Tips bij het vormgeven van je site

Een gastartikel van Jof Neuhaus – illustrator en eigenaar van joah.nl – over het vormgeven van je website.

Denken in rechthoekjes: standaard maar toch origineel
Html pagina’s worden door de browser opgebouwd in blokjes. Dit zijn altijd rechthoeken: bijvoorbeeld de div of table tags. Een browser begint linksboven eindigt rechtsonder. Door deze manier van werken krijgen de meeste sites ook snel het karakter van een berg gestapelde blokjes. Dit is niet erg, maar het kan zijn dat je juist ronde of golvende vormen wilt gebruiken in je ontwerp. Om dit te bewerkstelligen kun je gebruik maken van achtergrondplaatjes met ronde vormen. Ook kun je onderdelen afzonderlijk positioneren met verschillende marges of met absolute coördinaten. Maar blijf echter altijd denken in blokjes! Wanneer je net zo denkt als je browser, zie je eventuele technische obstakels sneller aankomen.

Onbekend maakt onbemind
Hoe saai dat ook klinkt; het is waar. De gemiddelde surfer kijkt in één oogopslag of de site biedt waar hij of zij naar op zoek is, en zo niet dan is hij/zij binnen 5 seconden weer vertrokken. Hierbij wordt niet alleen op inhoud gescand, maar zeker ook op een begrijpelijke interface. Wanneer je een al te afwijkende manier van navigeren hebt bedacht zullen de meeste bezoekers er simpelweg van weglopen.

Afb. Boomstrucuur

Dat betekent dus dat je er goed aan doet om je navigatie in te richten volgens de bij iedereen bekende boomstructuur. Daarnaast verwachten de meeste bezoekers het navigatieblok ook links- of rechtsboven, of als een horizontale balk bovenin. Zet je het op een andere plek, dan moeten bezoekers gaan zoeken. Uitzonderingen op de regel zijn sites waarbij het juist gaat om een afwijkend karakter, zoals kunstzinnige sites. Vaak zijn sites van kunstenaars, vormgevers of illustratoren enigszins afwijkend.

Begin in Photoshop
Bouw je pagina eerst in zijn geheel op in Photoshop (of een vergelijkbaar programma). Verdeel het ontwerp in de bovengenoemde rechthoekjes met behulp van “rulers” (linealen) of “slices” (plakjes). Zo zie je precies de afmetingen van de rechthoekjes in pixels. De vormgeving (bijvoorbeeld achtergrond) van deze blokjes kun je dan stuk voor stuk wegschrijven als plaatje. Hiervoor heeft Photoshop de functie “Save for Web”, waarmee je kunt finetunen naar de kleinst mogelijke bestandsgrootte. Wanneer je begint aan het schrijven van de html/php/etc kun je deze blokjes volgens je Photoshop ontwerp nabouwen. Achtergronden plak je er dan moeiteloos in. Doorlopende achtergronden komen nu naadloos aan elkaar te liggen van het ene naar het andere blokje.

Ontwerpen op groei
Wanneer je een ontwerp opzet, hou dan rekening met groei. Je site zal in de toekomst misschien meer inhoud gaan bevatten en zal dan extra navigatieonderdelen krijgen. Als je een navigatiestructuur hebt in de vorm van een lijst, dan betekent dit dat deze vertikaal zal groeien. Ook als content op een pagina toeneemt (bijvoorbeeld een extra alinea tekst), dan zal dit vertikaal gebeuren. Wanneer je een precies passende achtergrond gebruikt, en er komt een nieuw item bij, dan heb je een probleem.

Achtergrond
Achtergronden zijn leuk, en kunnen veel toevoegen aan de sfeer, maar keep it simple! Wanneer de achtergrond de boventoon gaat voeren schiet deze zijn doel voorbij. Ook repetitieve patronen kunnen erg dissonant zijn. Zorg er dus voor dat een achtergrond in zachte tonen of in rustige patronen aanwezig is. Wanneer er tekst over een achtergrond loopt is het belangrijk om er voor te zorgen dat er een groot contrastverschil bestaat tussen de tekst en de achtergrond. De regel is: zorg dat je het goed kunt lezen en maak het contrast in de achtergrond dan nog eens een flink stuk lager. Vooral ouderen en slechtzienden hebben snel last van drukke achtergronden. Wanneer je een foto gebruikt als achtergrond is het een goed idee om deze een beetje te blurren, zodat de scherpe lijnen erin verdwijnen.

Witruimte
De witruimte is ook een vorm te geven element op de pagina. Wanneer je bijvoorbeeld meer wit aan de onderkant dan aan de bovenkant van een ontwerp overlaat, dan krijgt de pagina ‘gewicht’ aan de onderkant. Dit kan een ontwerp zeer ten goede komen! Maar ook midden op de pagina zorgt witruimte ervoor dat het oog gemakkelijk en snel langs de verschillende content-items wordt geleidt. Zie de plaatjes hieronder:

Afb. Goede witruimte

Afb. Slechte witruimte

Plaatjes winnen van tekst
Wanneer een pagina in de browser verschijnt wordt deze eerst razendsnel in zijn geheel bekeken. Foto’s en tekeningen worden als allereerste gezien. Het is een goed idee om op je homepage één of twee foto’s (of tekeningen) te zetten die precies de sfeer pakken die je met de hele site wilt uitdragen. Wanneer dit aansprekende foto’s of illustraties zijn, dan zal een bezoeker veel sneller de moeite te nemen om aan de tekst te beginnen. Plaatjes kunnen soms ook tekst vervangen. Probeer dit vooral verderop in de site (in de contentpagina’s) toe te passen, maar let er wel op dat plaatjes moeten worden ingeladen en dat een overkill aan plaatjes juist weer averechts werkt.