Copyright © WebsiteInEenMiddag.nl – 2011 Op de inhoud en vormgeving van dit document rust, ongeacht de drager of de vorm waarin het werd verspreid, auteursrecht. Dit document werd geproduceerd en verspreid als onderdeel van de workshop Website In Een Middag en is daar onlosmakelijk mee verbonden. De gids wordt alleen verspreid onder cq ter beschikking gesteld aan deelnemers van de workshop. U mag dit document NIET verspreiden of op welke manier dan ook ter beschikking stellen aan derden. Niet in zijn geheel en niet gedeeltelijk. Als u dit document in uw bezit heeft (opgeslagen op een elektronisch medium of in geprinte vorm) zonder dat u de workshop heeft gevolgd of zich formeel voor de workshop heeft aangemeld, dan beschikt u over een illegaal exemplaar. In dat geval verzoeken we u vriendelijk dit te melden aan
[email protected] Disclaimer De inhoud van deze gids is gebaseerd op de persoonlijke ervaringen van de auteur. Dat wil niet persé zeggen dat u dezelfde resultaten zult behalen. Deze gids bevat een aantal links naar pagina’s op internet. Een aantal daarvan leidt naar websites of online bestanden cq applicaties die buiten de verantwoordelijkheid van de auteur vallen. Bovendien kan het zijn dat een aantal links niet (meer) werkt. Google.com, Google.nl en Google zijn handelsnamen van Google Inc. WebsiteInEenMiddag is op geen enkele wijze verbonden met Google Inc. of elke andere in deze gids genoemde merknaam.
VORMGEVING Dit document gaat over de vormgeving van je website: kleuren, vormen, lettertype en ga zo maar door. Vaak is je huisstijl de basis waarop je de vormgeving baseert.
Doel van dit document is dat je een uitgeschetst idee formuleert over de uitstraling en feitelijke vormgeving. Je krijgt advies over hoe je ideeën opdoet en vertaalt naar je eigen website. Daarnaast leer je welk materiaal je tijdens de workshop beschikbaar moet hebben.
Actiepunt(en): bepaal welke vormgevingselementen je gaat gebruiken en verzamel (indien mogelijk) de bestanden die je daarvoor nodig hebt. Bewerkt grote beeldbestanden tot een werkbaar formaat.
Hoofdstukken: Inleiding Je bent verder dan je denkt Vormgevingselementen Achtergronden Laat je inspireren Vormgevingsanalyse Grafische bestanden en bestandsvormen Wat je tijdens de workshop paraat moet hebben Homepage vs webpage Hot Tip: Hoe PowerPoint je kan helpen Tot slot…
INLEIDING Dit eBook vraagt om iets meer inleiding dan de vorige 3. Hoewel dit zeker niet het meest ingewikkelde uit de serie is, is dit eBook wel het minst concrete. Ik kan je tot achter de komma helpen bij het opzetten van een lay-out en het bepalen van een navigatiestructuur. Dat vraagt concrete acties: doe dit + doe dat + let hier op = resultaat. Maar als het gaat over vormgeving is het ineens allemaal een stuk minder concreet. Wat jij mooi vindt, vind ik misschien lelijk minder mooi. Lastig allemaal! Het betekent namelijk dat mijn ondersteuning wat betreft de vormgeving van je website beperkter is dan bij het daadwerkelijk bouwen van je website. Concreet: ik kan je vertellen hoe je een achtergrondfoto in je website plaatst, maar ik kan je niet vertellen wélke achtergrondfoto je moet gebruiken. Dat allemaal gezegd hebbende, ga ik je de komende pagina’s wel degelijk helpen bij de vormgeving van je website. Echter, dit eBook is geen beknopte cursus vormgeving. Het biedt je een serie handvatten waarmee je de lay-out van je website relatief eenvoudig kunt ‘inkleuren’ en optuigen. Voordat we daarmee beginnen, nog één ding. De website die je straks tijdens de workshop bouwt zit technisch prima in elkaar. En als je je huiswerk een beetje fatsoenlijk doet, creëer je een lay-out die passend is, klopt de structuur en zit de goede content op de goede plek. Vormgeving is vervolgens de slagroom op de taart. Maar wat voor jou en mij geldt, geldt ook voor je website: van teveel slagroom word je dik en onaantrekkelijk. Niks is niks, maar minder is meer. Let maar op!
VORMGEVING? JE BENT VERDER DAN JE DENKT…! Het lijkt misschien alsof je wat betreft de vormgeving van je website op nul begint, maar dat is niet zo. Je hebt – neem ik aan - een logo en huisstijlkleuren. Dat is een solide start. Neem de website hieronder als voorbeeld en kijk wat er voor nodig was om een lay-out (die je bekend zal voorkomen) op te tuigen tot een volwassen ogende website. achtergrond kader (het ‘verlopende’ kleurvlak achter de primaire content) ‘icons’ (2 stuks) logo foto
De kleuren die zijn gebruikt voor de achtergrond en in het kader zijn afgeleid van de huisstijlkleuren in het logo. Of bovenstaande een mooie website is, laat ik in het midden. Maar dat ‘ie een zakelijke uitstraling heeft, daarover zullen we het eens zijn. En nogmaals: voor de vormgeving zijn vijf grafische bestandjes en een logo gebruikt. That’s all Folks. 5 bestandjes en niets meer. Je bent verder dan je denkt!
VORMGEVINGSELEMENTEN Als het gaat om de vormgeving van je website, heb je meerdere elementen tot je beschikking. Variërend van achtergronden tot kaders en uiteraard je logo. Door die zo uitgebalanceerd mogelijk te combineren (qua kleurstelling, formaat en bijvoorbeeld lettertype) creëer je een unieke uitstraling. We hebben de belangrijkste elementen hieronder op een rijtje gezet. Voor de goede orde: het is niet verplicht elk van de hieronder genoemde elementen in je website vorm te geven cq te betrekken bij de vormgeving. Sterker nog: dat is eerder verboden. Tenzij je kermisexploitant bent…
1 logo Je hebt ongetwijfeld een logo. Je bedrijfsnaam zit er (waarschijnlijk) in verwerkt en het heeft een zekere uitstraling die je wilt verbinden met je bedrijfsidentiteit. Je logo is zodoende een vormgevingselement dat op je website niet mag ontbreken.
2 kleur Al is het wit: er zit kleur in je huisstijl. Die kun je doorvoeren in de achtergrond en de vormgevingselementen. Niet iedereen is even kleurgevoelig en het internet zou het internet niet zijn als er op dat vlak geen hulp te vinden is. Als je op zoek bent naar inspiratie, surf dan naar http://www.colourlovers.com/web/palettes. Daar pronken vormgevers, designers en kleurfetisjisten met hun favoriete kleurcombinaties. Je vindt er een wereld aan zowel gewaagde als geruststellende kleurcombinaties. Biedt Colorlovers niet wat je zoekt, probeer het dan hier eens: http://colorschemedesigner.com/
3 Overige huisstijl-elementen We kennen allemaal de ‘swoohs’ van Nike, de ster van Heineken en het ‘dubbele dakje’ van Citroën. Het zijn huisstijl-elementen, onderdelen van het logo, die bijdragen aan de uitstraling van de website cq het bedrijf. Als je een huisstijl hebt waarin zo’n grafisch element voorkomt, dan kun je die subtiel verwerken in je website. In de achtergrond maar bijvoorbeeld ook in buttons.
4 Typografie Misschien schrijft je huisstijl het gebruik van een lettertype voor. Je website maakt echter gebruik van de lettertypes die op de PC van de bezoeker geïnstalleerd zijn. De gemiddelde PC heeft een beperkte font-bibliotheek. Zit ‘jouw’ lettertype daar niet tussen, dan valt de website automatisch terug op standaard lettertypes: Arial, Verdana, Courier et cetera. Om misverstanden te voorkomen: bovenstaande betekent niet dat je je logo niet in zijn volle glorie en in het juiste grafische lettertype op je website kunt zetten. Een afbeelding van je logo is namelijk exact wat het is: een grafisch afbeelding en dus geen ‘getikte’ tekst.
5 blokken, kaders en lijnen Hoewel je de stelregel ‘Minder = Meer” constant in je achterhoofd moet houden, kun je wel degelijk kaders, blokken en bijvoorbeeld lijnen inzetten als vormgevingselementen. Op de website van ‘ons’ bureau Veenema (zie afbeelding vorige hoofdstuk) wordt in de bovenste helft een groot blokkader als achtergrond gebruikt.
6 foto’s en video De tijd dat beeldmateriaal de laadtijd van een website zodanig beïnvloedde dat elke foto werd teruggebracht tot een postzegel, ligt gelukkig achter ons. De techniek is verbeterd en we hebben bijna allemaal een snelle verbinding. Je kunt je wat betreft beeldmateriaal dus beter uitleven dan voorheen – al blijft ook hier enige terughoudendheid geboden.
7 Achtergrond Elke website heeft een achtergrond. Dat kan elke willekeurige kleur zijn (van wit tot zwart en alles daar tussenin). Het kan ook een verlopende kleur zijn zoals in de website van Bureau Veenema (zie boven). Omdat achtergronden voor een belangrijk deel de sfeer van je website bepalen, gaan we verderop dieper in op dit onderwerp.
8 Grafische elementen, bullets, icons etc Ons bureau Veenema heeft twee ‘icons’ op de homepage staan: een rijtje ordners en een ‘handshake’. Soms hebben die elementjes geen andere functie dan het visueel ‘opleuken’ van de pagina en soms verduidelijken ze in één oogopslag waar de betreffende ‘ankeiler’ over gaat. De manieren waarop je dergelijke icons kunt inzetten is oneindig. Je zult ze, als je straks op internet gaat zoeken naar inspiratie, tegenkomen in elk denkbare vorm en in elk denkbaar formaat. Op de website van WebsiteInEenMiddag vind je meerdere toepassingen. Bovenin zie je ‘pijlen’ die het oog naar de opsomming trekken. Onderin koos ik icons die zijn aangepast aan het onderwerp. Icons (of graphics of hoe je die kleine plaatjes ook wilt noemen) verlevendigen je website. Maar ze helpen je ook meer nadruk te leggen op bepaalde content. Daarnaast hebben ze een zekere psychologisch effect. Een lachende smily heeft een voorspelbaar ander effect dan een huilende. En denk ook eens aan het effect van een rode pijl, een bliksemschicht, een garantiezegel of bijvoorbeeld een oplopende grafiek. Platgetreden paden? Daar heb je helemaal gelijk in. Maar het werkt nog steeds…
ACHTERGRONDEN Elke website heeft een achtergrond. Sterker nog, als het om vormgeving gaat, is de achtergrond een van de meest sfeerbepalende elementen van je website. Voordat we verdergaan, gaan we een mogelijke spraakverwarring voorkomen. Er zijn namelijk twee soorten achtergronden. De eerste is de achtergrond van de TOTALE website. Kortom de achtergrond die ‘schermbreed’ en ‘schermhoog’ zichtbaar is. Ongeacht hoe hoog en breed dat beeldscherm is. De tweede is de achtergrond achter specifieke onderdelen van een website. Vaak worden die ook aangeduid als ‘kaders’. Veenema maar weer als voorbeeld? De TOTALE achtergrond loopt van links naar rechts over het gehele scherm en van boven naar beneden. Van boven naar beneden zit er een kleurverloop in (naar wit onderin). De tweede achtergrond, het kader, zit achter de primaire content en de foto. Ook daarin zit van boven naar beneden een verloopje. Nu we dat duidelijk hebben, kijken we eerst even naar de TOTALE achtergrond (maak je geen zorgen, dit was de laatste keer dat ik het voor de duidelijkheid in die schreeuwerige kapitalen tikte).
De totale achtergrond
De website die je tijdens de workshop gaat bouwen heeft standaard een witte achtergrond. Als je geen Bouvrie van achteren heet, zou het maar zo eens kunnen dat je dat wilt veranderen. Dat kan. De simpelste manier is botweg de kleur aanpassen. Van wit naar geel of bruin of pimpelpaars. Dat is een kwestie van één druk op de knop. Simpeler dan dat kan het niet worden, dus daar maken we verder geen woorden meer aan vuil. Misschien ben je in voor een achtergrond die iets meer spanning heeft dan één egale kleur. Bijvoorbeeld met een kleurverloop van donker(der) naar licht(er) of andersom, kortom het verloopje dat we net ook al zagen in de website van Veenema.
Om zo’n effect te bereiken heb je één grafisch bestandje nodig. Het bestand waarmee de achtergrond van Veename is gemaakt, zie je hier rechts. En om maar direct antwoord te geven op je vraag: ja, in werkelijkheid is het ook zo’n klein bestandje. De truc is dat de software in staat is net zoveel van die bestandjes naast elkaar te zetten als nodig is om het beeldscherm van links naar rechts te vullen. Zodoende ontstaat er een totale achtergrond met behulp van een klein en licht bestandje. Je ziet, het stelt weinig voor. Je maakt zo’n verloopje met elk willekeurig fotobewerking- of tekenprogramma. Wellicht kun je overweg met zo’n programma en maak je zo’n bestandje in een handomdraai. Misschien niet. Dan maken we ’m tijdens de workshop. Kwestie van 1 minuut. Voorwaarde is natuurlijk wel dat je weet welke kleuren je wilt gebruiken…!!!! En da’s nog maar het begin… Nu je weet dat je een achtergrond kunt maken met een relatief simpel grafisch bestand, opent zich een wereld aan mogelijkheden. De webpagina hieronder komt je waarschijnlijk bekend voor. Het is een achterliggende pagina van WebsiteInEenMiddag.nl.
Rechts naast het screenshot van de webpagina zie je het (enige) bestandje waarmee de achtergrond is gecreëerd: een klein, simpel kleurvlakje met een schaduw aan de onderzijde op de overgang van groen naar wit, wat de suggestie wekt dat het groene vlak lichtjes boven de witte achtergrond zweeft. Eén klein bestandje. Meer is het niet… NB Voor de goede orde: het beeld van de webpagina hierboven is verkleind, waardoor de verhoudingen tussen de twee uiteraard helemaal zoek is.
FOTO ALS ACHTERGROND Als je een meer uitgesproken achtergrond wilt hebben dan kom je misschien al snel op het idee een foto of illustratie in de achtergrond ‘te hangen’. Dat kan. Hiernaast een aantal ideeën. Wellicht past geen van de ideeën hiernaast bij je bedrijf, je website of de beoogde uitstraling. Waar het me om gaat is je voorbeelden aan de hand te doen, die je tonen wat de mogelijkheden zijn. Vervolgens is het aan jou om te bepalen of je een dergelijke ‘vormgevingstruc’ op jouw website en in jouw branche kunt en wilt toepassen. Hou daarbij in je achterhoofd dat beeld zoals hiernaast nogal dominant is. Dat is goed als het je primaire boodschap onderstreept, slecht als het afleidt.
Als je de voorbeelden hiernaast live wilt bekijken, dan heb je hier de url’s: http://volll.com/#section_main http://www.surfinparadise.com.au/ http://mykidtookthese.com/ Meer voorbeelden? Ga dan naar deze link: http://www.webdesignerwall.com/trends/80-large-background-websites/
LAAT JE INSPIREREN Voordat je verder leest: als ik je aanmoedig om je te laten inspireren, moedig ik je niet aan om klakkeloos ideeën of oplossingen van andere websites over te nemen. Regels van het huis: 1. Inspiratie opdoen is ‘best practise’ 2. Na-apen zit op het randje 3. Ronduit stelen is domweg verboden Nu we het daar over eens zijn: internet is een enorme bron van inspiratie en het zou dom zijn die links te laten liggen. Kortom, start je pc en surf van de ene naar de andere zakelijke website. Nogmaals: niet om klakkeloos na te apen maar om ideeën en inspiratie op te doen. Je kunt natuurlijk zelf op strooptocht gaan (en dat moet je ook zeker doen, bekijk vooral je concurrenten!) maar waarom zou je je niet de weg laten wijzen door iemand die zo vriendelijk is geweest het meeste werk voor je te doen: http://www.instantshift.com/2010/01/30/40-apple-inspired-website-designs-for-design-inspiration/ http://hellocollections.com/best-of-the-web/60-simply-professional-looking-website-designs http://www.instantshift.com/2009/07/07/80-corporate-website-designs-for-design-inspiration/ http://www.instantshift.com/2009/08/25/45-inspirational-corporate-website-designs/ http://www.instantshift.com/2009/09/25/corporate-website-designs-60-inspirational-examples/ http://www.instantshift.com/2009/07/28/55-fresh-examples-of-corporate-website-designs/
Bookmark de websites die je aanspreken in een aparte map zodat je ze later makkelijk kunt terugvinden. Niet iedereen vindt het prettig om zo’n ‘swipefile’ alleen maar op zijn scherm te hebben. Als je de ideeën die je op het web tegenkomt ‘in je handen’ wilt hebben of geprint op tafel wilt uitspreiden, maak dan ‘screenshots’ (fotokopieën van het beeldscherm) en sla ze op in een aparte map die je makkelijk kunt terugvinden. Daar kun je software voor gebruiken (zie de tip hieronder) maar met de toets ‘PRTSC’ (print screen op PC) op je toetsenbord kom je ook een heel eind.
Tip: handige software voor het maken van screenshots is FireShot. Er is een betaalde en een gratis Freeware versie. Je kunt ‘m hier downloaden: http://screenshot-program.com/downloads.php (zoek naar de link FireShot op de onderste helft van de pagina). Grote voordeel ten opzicht van PRTSRN is dat je met dit programmaatje een ‘foto’ kunt maken van de gehele website terwijl PRTSCRN alleen het in je scherm zichtbare gedeelte pakt.
HOE JE AAN ICON’S, BEELD EN ACHTERGRONDEN KOMT Als je eenmaal een aantal voorbeelden hebt verzameld en een idee begint te vormen over hoe je website er uit moet gaan zien, doet zich natuurlijk de volgende vraag voor: hoe kom ik aan de ‘vormgevingselementen’ die ik nodig heb – foto’s, kaders et cetera. Onderdeel van het WiEM Startpakket is een pdf genaamd ‘online bronnen’. Daarmee kom je een heel eind. Ik kom vrijwel dagelijks op enkele of elk van die websites om er ‘goodies’ weg te halen. Een tweede bron is een klein internetbedrijfje waar je wellicht wel eens van hebt gehoord of iets over hebt gelezen. Het heet Google . Zoek naar ‘free background’ of ‘free website graphics’ of varianten daarop en er gaat en wereld voor je open. Gebruik liever Google.com dan Google.nl. Een waarschuwing is hier wel op z’n plaats. Twee zelfs. Ten eerste bestaat er zoiets als ‘copyright’. Gebruik dus alleen beeld waarvan je zeker weet dat je het mág gebruiken. Als iets op een reguliere website ter download wordt aangeboden, mag je daar redelijkerwijs vanuit gaan. Ten tweede: dit is een onderdeel van je voorbereiding waarin je je kunt verliezen. Hoe meer websites je bekijkt, des te groter is de kans dat je de weg kwijtraakt in alle mogelijk opties. De bekende ‘verlammingsverschijnselen’ zijn vaak het trieste resultaat. Vier uur ‘gesurfd’ en nóg niks besloten…. Kortom, hou het puntje een beetje bij het paaltje en hak op een goed moment die knoop door. Bam! Wat betreft ‘kaders’ en kleine achtergrondbestandjes – die kun je uiteraard ook zelf maken. Elk fotobewerking- of tekenprogramma komt daarvoor in aanmerking. Waaronder PaintDotNet. Nogmaals: als je daar niet uitkomt, dan help ik je tijdens de workshop op weg.
GRAFISCHE BESTANDEN EN BESTANDSFORMATEN Niet iedereen is thuis in de wereld van grafische bestanden. Een heel klein beetje kennis van die wereld scheelt je een hoop tijd (en frustratie). Grafische bestanden heb je in verschillende bestandsformaten. Voor de workshop zijn er in feite twee van belang: JPG en PNG. Er zijn tientallen anderen (gif, psd, tiff et cetera), maar die laten we voor het moment even buiten beschouwing. Een foto/beeld/bestand/logo in bestandsformaat JPG is opgeslagen als bestandsnaam.jpg. In bestandsformaat PNG is het opgeslagen als bestandsnaam.png. Wat tijdens de workshop regelmatig voor frustratie en tijdsverlies zorgt, is het ‘fysieke’ formaat van de bestanden. Ze zijn domweg te groot om mee te werken. Een beetje moderne camera maakt foto’s in het formaat waarmee je een babykamer kunt behangen. Dat is hartstikke leuk, maar totaal ongeschikt voor je website. En dat geldt overigens ook voor foto’s die je ophaalt bij stockfoto websites als SXC. Size does matter als het om beeldmateriaal je website gaat, maar dan andersom: hoe kleiner hoe beter. Kleiner is vaak een kwestie van het daadwerkelijke formaat van de foto cq het bestand. Je website is 1000 pixels breed (zo’n 25 centimeter). De foto uit een moderne camera is makkelijk 4.000 pixels breed (ruim een meter!). Minstens vier keer groter dan we ooit nodig zullen hebben. Ook de resolutie van het bestand speelt een rol, maar in de praktijk is het vooral het daadwerkelijke formaat dat dwars zit tijdens de workshop. Daarom het volgende (vriendelijke doch dringende) advies: verklein vooraf de foto’s, je logo of welk ander grafisch bestand dan ook wat je op je website denkt te gaan gebruiken tot een werkbaar formaat. Door de bestanden te verkleinen tot maximaal 1000 pixels breed, weet je zeker dat je bestand nooit te klein zal uitvallen. Je website is immers niet breder dan 1000 pixels. Er is slechts één uitzondering: beeldmateriaal dat je wilt gebruiken voor de totale (!) achtergrond van je website. Hou die bestanden in hun oorspronkelijke formaat. Op de volgende pagina een beknopte uitleg hoe je een bestand met behulp van PaintDotNet kunt verkleinen.
Hoe verklein je bestanden? In dit voorbeeld verkleinen we stap voor stap een foto tot 1000 pixels breed via het fotobewerkingsprogramma PaintDotNet . Als je dat programma niet hebt geïnstalleerd, klik dan hier: http://www.getpaint.net/download.html Het werkt als volgt: Stap 1: Open PaintDotNet Stap 2: klik op Open en selecteer de foto die je wilt verkleinen. De foto verschijnt vervolgens in het werkvlak van PaintDotNet.
Stap 3: Klik op Image en op Resize in het uitklapscherm
Stap 4: Vervolgens verschijnt het scherm dat je hieronder ziet. Daarin zitten twee zaken die belangrijk zijn. Bij 1 zie je de verhoudingen van het beeld. Dat moet aangevinkt zijn (zoals in het voorbeeld). Bij 2 kun je het gewenste formaat van het bewerkte beeld invullen. Zet in dit geval de ‘width’ op 1000 pixels (in plaats van de 3668 in het voorbeeld) en klik op OK. Omdat we ‘Maintain Aspect Ratio’ aangevinkt hadden, blijft de hoogte/breedte verhouding van het bestand gehandhaafd. Je bent er bijna. Alleen nog even ‘saven’ (volgende pagina).
Stap 5: Klik op File en op Save as. Door te kiezen voor Save as sla je het bestand op onder een andere naam waardoor het originele bestand in het oorspronkelijke formaat, niet verloren gaat. Wees slim en kies een bestandsnaam die een beetje logisch is. Dus als het bestand in eerste instantie ‘logo’ heet, noem het tot 1000 pixels verkleinde bestand dan logo1000. Klaar is Kees.
WAT JE TIJDENS DE WORKSHOP PARAAT MOET HEBBEN Hoe beter je weet wat je tijdens de workshop wilt bereiken, des te beter zal het eindresultaat zijn. Maar dat had ik geloof ik al een paar keer eerder gezegd Als het gaat om de vormgeving, komt het er op neer dat je minimaal een helder beeld moet hebben van hoe je website er uit moet komen te zien. Een helder beeld is meer dan een helder idee. Een beeld is concreet, een idee zit in je hoofd. Een beeld heb je uitgewerkt op papier en kun je laten zien. Een idee kun je alleen omschrijven. Kortom, pak je zoontje/neefje/buurjongetje (m/v) zijn kleurpotloden af en ga aan de slag. Neem een leeg Aviertje en leg het dwars voor je neer. Dat is het beeldscherm. Trek links en rechts, circa 5 centimeter van de zijkant, een lijn van boven naar beneden. Dat ziet er ongeveer als volgt uit: Het gebied tussen de twee lijnen die je trok is je website. Het gebied daarbuiten (zowel links als rechts) is het zichtbare deel van je achtergrond. Schets vervolgens met potlood de lay-out die koos in het websitegebied. Omdat je ook je ook wat betreft je navigatie- en contentstructuur al keuzes hebt gemaakt, kun je ook die inschetsen. Voor de duidelijkheid: dit hoeft geen hoogstaand ‘artwork’ te worden. Het is puur een oefening voor jezelf, die je helpt om je website te visualiseren. Dus hou je niet in, maar kladder er rustig op los. Je gummetje is je beste vriend Zullen we de website van Veenema weer als voorbeeld nemen? Op de volgende pagina vind je een aantal schetsen waarin we stap voor stap de vormgeving vastleggen. Hou in gedachte: ik heb alles in de goede volgorde gedaan. Ik heb mijn lay-out vastgelegd, mijn content op een rijtje gezet en ik weet wat mijn primaire content is. Als je dat niet weet, heeft schetsen misschien nog niet zo heel veel zin… Let op: als je deze eBook uitgeprint leest, in zwart/wit, zijn een aantal kleurtjes in de illustraties op de volgende pagina waarschijnlijk slecht of niet zichtbaar!
Ik heb gekozen voor een relatief eenvoudige opzet: logo bovenin, daaronder een kader met primaire content (txt en beeld), daaronder twee ankeliers en een lijstje weeskinderen. Onderin zit uiteraard de footer. Dat is standaard. Mijn schets laat weinig te wensen over aan duidelijkheid. Ik heb uit het logo een achtergrondkleur gehaald en besloten daarmee de totale achtergrond van mijn website een beetje ‘smoel’ te geven. Omdat ik niet wil dat die kleur te dominant wordt, heb ik besloten die kleur (van boven naar beneden) te laten verlopen naar wit.
De volgende stap is een kleur voor het kader achter de primaire content. In dit geval besluit ik min of meer dezelfde tint te gebruiken als gebruikt wordt voor de totale achtergrond. Ik had ook juist voor een contrastkleur kunnen kiezen. Omdat er in dit kader ook tekst komt, realiseer ik me dat een donkere achtergrond als consequentie heeft dat ik een lichte in plaats van zwarte gekleurde tekst moet gebruiken.
Ik wil de ankeilers wat meer ‘body’ geven en daarom kies ik op www.sxc.hu twee ‘icons’ die iedereen begrijpt en een relatie hebben met mijn vak (boekhouder, weet je nog?): een ordner en een ‘handshake’. Die icons zet ik links bovenin de hoek en ik laat de tekst er omheen lopen zodat het een sluitend geheel wordt.
Ik ben er bijna. Ik moet alleen nog beeld hebben om de primaire content te ondersteunen. Je weet wel, de foto in het kader. Ook dat haalde ik in dit geval overigens van sxc.hu. Maar in veel gevallen is dit de plek om jezelf in de schijnwerpers te zetten. Als je goed kijkt naar de schets hiernaast, zie je op de Post-it staan dat ik drie foto’s selecteerde. Waarom? Om de primaire content nog meer body te geven, heb ik een dynamisch element toegevoegd: een beeld waarin verschillende foto’s roteren. Zie hier het resultaat: http://veenema.wiemstartpakket.info/ Zoals je ziet wordt telkens een nieuwe foto ingeladen. Die functionaliteit zit standaard in het pakket waarmee je tijdens de workshop aan de slag gaat. Op welke plek je die ‘rotator’ zet en hoe groot de foto’s zijn, bepaal je straks helemaal zelf. Net als het aantal foto’s en of er op die foto’s tekst komt te staan. Het opent een wereld aan mogelijkheden. Oke, dat was de homepage. Nu de rest nog… Een website bestaat uit meer dan alleen een homepage. Er zijn ook ‘achterliggende’ pagina’s. Ook voor die pagina’s moet je (als ze afwijken van je homepage) een layout maken en de vormgeving bepalen. De werkwijze is gelijk aan die voor de homepage, maar er is (vaak) één groot verschil om rekening mee te houden.
HOMEPAGE VS ACHTERLIGGENDE WEBPAGES We blijven even bij de firma Veenema als voorbeeld. Bekend terrein, dus dat werkt lekker makkelijk. Wellicht heb je net – toen je de website live bezocht – op een paar links geklikt en kwam je terecht op achterliggende webpages. Hieronder zie je screenshots van twee van die webpages.
Het enige verschil op deze twee pagina’s is de content (het artikel, plus de kopregel). De rij onderin de vomgeving komt je (als het goed is) bekend voor. Die is bijna identiek als de rij ankeilers op de homepage. Alleen verhuisde de navigatie (de lijst met links naar de overige webpages) van rechts onderin naar rechts naast het artikel en in plaats daarvan creëerde ik een derde ankeiler. Op elke achterliggende webpage staat een artikel. Verder zijn die webpages EXACT HETZELFDE! Het logo, de achtergrond, de navigatie, de ankeilers onderin – allemaal exact hetzelfde. Kortom: ik heb één lay-out bedacht/gemaakt en ‘vormgegeven’ voor de homepage en ik heb één lay-out bedacht/gemaakt en vormgegeven voor alle achterliggende pagina’s. Het grote verschil tussen de homepage en de achterliggende pagina’s is dat er op de achterliggende pagina’s ruimte is gecreëerd voor content; een artikel eventueel aangevuld met foto’s of bijvoorbeeld video. Je bent overigens niet beperkt tot twee lay-outs. Het systeem kan er meer verwerken dan jij er kunt bedenken. Dus voel je wat dat betreft niet geremd. Er is echter wel een andere reden om het aantal lay-outs te beperken. Nou, twee eigenlijk. Ten eerste: je bezoekers kunnen best een beetje verandering aan, maar als elke webpage er totaal anders uitziet, oogt dat niet erg professioneel.
Ten tweede: elke lay-out zul je moeten bedenken, maken en optuigen tot een evenwichtig vormgegeven webpage. Daarom het advies: hou het (zeker in den beginne….) beperkt tot liefst twee, maximaal drie á vier verschillende lay-outs.
HOE POWERPOINT JE KAN HELPEN Enige bescheidenheid mijnerzijds is nu terecht. De tip hieronder komt namelijk niet van mij, maar van een deelnemer aan de workshop. Maar ik had ‘m graag zelf verzonnen… In een vorige hoofdstuk spoorde ik je aan je kleurpotloden te slijpen en zo aan de vormgeving van je website te knutselen. Dat werkt. Vormgeving begint altijd met krabbeltjes op een papiertje. Ik adviseer je die fase dan ook niet over te slaan. Zet een kop muntthee of trek een fles wijn open en ga aan het kliederen. Er komt echter een moment waarop je de schets graag meer body wilt geven. Daar is PowerPoint (als je daar een beetje mee overweg kunt) uitermate geschikt voor. Het voordeel van PowerPoint is dat je bijvoorbeeld achtergronden heel makkelijk van kleur kunt veranderen. Zo zie je razendsnel het gevolg en de impact op je gehele ontwerp. Hetzelfde geldt voor de omvang van een kopregel. Of van een kader. Alsof het er voor gemaakt is, heeft een standaard PowerPoint sheet ongeveer de breedte van een website. Gebruik dus het hele vlak en je hebt een aardig idee hoe je website er straks op het scherm komt uit te zien. Bedenk wel dat er links en rechts van je website een achtergrond zichtbaar is. Verlies je niet teveel in de details. Denk ‘big picture’. Details zijn van latere zorg. Ik kreeg deze handige tip toen de website voor bureau Veenema al klaar was. Had ik ‘m eerder gehad, dan zou de schets in PowerPoint er ongeveer zo uitgezien hebben:
TOT SLOT… Je bent op de laatste pagina van het WebsiteInEenMiddag startpakket gekomen. Hierna volgt alleen nog een lijstje actiepunten. Ik hoop dat je ideeën hebt opgedaan, geïnspireerd bent geraakt en dat je zin hebt in de workshop. Als je alle stappen hebt doorlopen, ben je optimaal voorbereid op de workshop. Niets staat je in de weg om straks een dijk van een website te bouwen. Mocht je je zorgen maken over de techniek: niet doen. Daar slepen we je tijdens de workshop wel doorheen. Maar hoe de navigatiestructuur in elkaar zit, welke content de bezoeker krijgt voorgeschoteld en hoe eea oogt, de uitstraling, daarvoor ben je grotendeels zelf verantwoordelijk. We helpen je waar we kunnen – ook als het gaat om vormgeving– maar dat kunnen we alleen als je weet wat je wilt. Kortom, maak die contentlijst, puzzel een uurtje op de primaire boodschap die je op de homepage zet, maak die schetsjes, ga op zoek naar beeldmateriaal. Je zult er straks tijdens de workshop ontzettend veel plezier van hebben en ik verzeker je dat je website er mooier, sterker en professioneler van wordt. Als je het prettig vindt dat ik voorafgaand aan de workshop met je meekijk – in welke fase van de voorbereiding dan ook – laat het me weten. Mail me je schetsen, je powerpoint of url’s van de websites die je als inspiratie wilt gebruiken. En mail me vooral als je vast dreigt te lopen. Ik heb het al eerder gezegd: ik ben niet 24 uur per dag online, maar het scheelt niet veel. Doorgaans heb je binnen een paar uur antwoord. Meestal sneller, heel soms iets later. Ook in het weekend, ook ’s avonds. Aarzel niet. Mail of bel. We gaan samen een website bouwen. Je stoort nooit! Carl (tel: 0654-718 440) PS Trouwens, mocht je suggesties hebben om het Startpakket te verbeteren, dan hoor ik het graag. Mis je iets? Is er iets volslagen onduidelijk? Waar loop je vast?
Actie: Vorm een zo concreet mogelijk idee over de vormgeving van je website. Bepaal welke elementen je daarvoor nodig hebt en verzamel die zo veel mogelijk. Creëer een map op je computer waarin je alle elementen en bestanden opslaat (vergeet je logo niet!) Verklein grote grafische bestanden tot maximaal 960 pixels breed en sla die op onder een aparte naam waardoor het bestand ook in het originele formaat behouden blijft. Maak schetsen op papier en zet die als het even kan om in PowerPoint.
