Wanneer je een folder krijgt is meteen duidelijk of hij van de slager is of van Wehkamp. Niet alleen staat er een naam op, maar je ziet het verschil ook aan het formaat en de materiaalkeus. Op het web is dat wat lastiger. Daarom is het voor een grafisch ontwerper verstandig om een duidelijke structuur aan te brengen.

In dit artikel wil ik het hebben over organisatie. Want de grafisch ontwerper houdt zich niet alleen bezig met identiteit, maar ook met het inzichtelijk, functioneel en bruikbaar maken van structuren in informatie zoals die door de opdrachtgever worden aangeboden. Dat bruikbaar maken worden wordt over het algemeen tot de typografie gerekend. Typografie heeft dus niet enkel betrekking op de tekst en de vorm van de tekst, maar ook op de structuur van de informatie. Door de opdrachtgever wordt bijna altijd een hiërarchie of een geleding in de te communiceren informatie aangebracht, die de ontwerper tot heldere en communicatieve eenheden moet terugbrengen.

Beperkingen

Als je drukwerk ontwerpt spelen naast de aard van de informatie allerlei praktische beperkingen een rol. Financiële beperkingen bijvoorbeeld, dwingen een uitgave tot een maximale omvang en een maximaal formaat. Daarom moet de grafisch ontwerper zowel op het kleinste niveau als op het grootste niveau beslissingen nemen. Het kleinste element in een ontwerp dient altijd een vanzelfsprekende of beargumenteerbare relatie te hebben met het ontwerp als geheel.

Internet kent een aantal van deze beperkingen voor drukwerk niet, maar toch zou je ook bij het ontwerpen voor het beeldscherm uit moeten gaan van bepaalde grenzen. De noodzaak zorgvuldig om te gaan met de structuur en de vorm van de structuur van de informatie is waarschijnlijk zelfs groter op het internet dan in gedrukte media. Dit heeft meerdere redenen:

• Drukwerk geeft over het algemeen direct een indruk van de hoeveelheid informatie: een boek heeft 100 bladzijden of 200 bladzijden. Aan de gemiddelde website is moeilijk te zien hoeveel informatie er achter schuilgaat.

• Drukwerk is meestal lineair van opzet: je leest iets van voor naar achter. Internet is dit niet. De lezer springt kriskras over de pagina’s.

• Drukwerk heeft meteen een bepaalde uitstraling. Veel meer dan op het beeldscherm is het de gebruiker direct duidelijk of het om een uitgave van het Concertgebouworkest gaat of om de folder van het plaatselijke mannenkoor. Naast het beeld en de typografie spelen namelijk ook formaat en materiaalgebruik (papier) een grote rol in de ervaring van de gebruiker.

Om je op een website niet het gevoel te geven dat je je in een doolhof bevindt waar niet alleen de uitgang onvindbaar is, maar waarvan ook de grootte onbekend is, is een zorgvuldige behandeling van de structuur van de informatie van essentieel belang.

Beslissingen nemen

Om tot een heldere en informatieve website te komen, moeten er eerst beslissingen worden genomen over de aard en de structuur van de informatie en indien mogelijk over de hoeveelheid informatie. Als het over drukwerk gaat is het niet ondenkbaar dat de ontwerper, mits de opdracht zich er voor leent, mede bepaalt wat de omvang van de informatie is. Het komt ook voor dat de ontwerper de opdrachtgever of tekstschrijver doorgeeft hoeveel woorden deze mag gebruiken.

Om ook op internet keuzes te kunnen maken op dit niveau moeten er proeven worden gedaan. Wat zijn geschikte tekstlengtes en wat zijn geschikte tekstbreedtes? Over de vorm waarin de essentie van de informatie die een website biedt (dit is over het algemeen de tekst) wordt aangeboden moet als eerste een beslissing worden genomen.

Wanneer bepaald is dat de lezer niet al teveel moet hoeven te scrollen om een tekst te kunnen lezen, kan op basis hiervan een aantal beslissingen worden genomen. Die kunnen betrekking hebben op het volume van de informatie en op de structuur van de informatie. Je kunt bijvoorbeeld kiezen voor een maximale tekstlengte of voor de mogelijkheid om door te klikken naar een volgende pagina. Dat eerste is in de meeste situaties beter dan het tweede, er worden immers meer handelingen verwacht van de gebruiker en er is geen eenvoudige mogelijkheid de tekst te printen. Wanneer het echter een langere tekst betreft die per se vanaf het scherm gelezen moet kunnen worden, zijn er elegante oplossingen denkbaar door bijvoorbeeld een pdf of een tekstbestand aan te bieden.

Daarna is het belangrijk om te bepalen hoe de informatie geordend is. Een analyse hiervan maakt duidelijk welke onderscheidende (typografische) elementen moeten voorkomen in het ontwerp. Het gaat dan zowel om de navigatie als om de meer klassieke hiërarchie van de informatie: titels, ondertitels, koppen, subkoppen, noten, enzovoort. Als de structuur van de informatie duidelijk is en alle aanwezige elementen benoemd zijn, kan er een stramien worden gemaakt dat rekening houdt met deze structuur.

Het stramien

Een stramien voor drukwerk bestaat uit elementen, waarvan er een aantal kunnen worden gebruikt bij het ontwerpen van een website. Voor drukwerk kies je eerst een zetbreedte. Die vormt de basis voor de zetspiegel. Daarin worden niet alleen de linker- en rechtermarge vastgelegd, maar ook het kop- en het staartwit en het aantal kolommen met bijbehorend kolomwit. Meestal wordt er ook gekozen voor een basislijnstramien (de lijnen waarop de tekstregels worden geplaatst) en worden er beginposities aangegeven voor specifieke tekst- of beeldelementen.

Voor een website is dit iets gecompliceerder dan voor drukwerk. Doordat er gescrolld kan worden en doordat de maten van beeldschermen verschillen kun je een aantal van de eenheden hierboven niet zomaar toepassen. Toch kun je het meeste wel gebruiken. Zo kun je kiezen voor een vaste breedte van het stramien, ongeacht de schermgrootte. Het voordeel hiervan is dat de verschijningsvorm van de tekst altijd hetzelfde is. Vanuit een typografisch perspectief is dit een belangrijk gegeven.

Het nadeel hiervan is ook duidelijk, er onstaat loze ruimte of een gedeelte van het ontwerp komt niet in beeld. Een oplossing hiervoor zou kunnen zijn niet de kolommen variabel in breedte te maken, maar juist de ruimte tussen kolommen. Zeker wanneer het de ruimte betreft tussen de navigatie en de tekst is dat te overwegen. Een geheel gecentreerd stramien dat zich bijvoorbeeld in kleur onderscheidt van de rest van het scherm is uiteraard ook een veel voorkomende en acceptabele oplossing.

Voorbeeld van het gebruik van een variabele kolombreedte.

Het stramien kan dienen om verschillende informatieve eenheden hun plaats te geven, maar kan ook worden gebruikt om variatie in de opmaak tot stand te brengen. Grafisch ontwerpers gebruiken vaak een een 6-kolomsstramien, waarin je een opmaak in twee kolommen of drie kolommen kunt realiseren. Zeker wanneer in het ontwerp ook beeld wordt gebruikt of wanneer er veel verschillende informatie wordt aangeboden, is het raadzaam een uitgebreid stramien te gebruiken. De navigatie moet ook een plaats krijgen binnen dit stramien.

Enkele toepassingsmogelijkheden van een 6-kolomsstramien (6x1, 3x2 en 2x3)

Een helder en duidelijk stramien draagt bij tot inzichtelijkheid van de informatie op een website. Dit kan verder worden versterkt door in het stramien ruimte te reserveren voor tekst die betrekking heeft op de structuur en de omvang van de informatie. Zo kun je een kopregel toepassen, zoals die ook in boeken voorkomt. Een onderdeel van de navigatie dat de gebruiker vertelt waar hij is en hem in staat stelt om één of meerdere niveaus terug te gaan.

De verschillende typografische elementen die worden gebruikt in een ontwerp moeten wel een vanzelfsprekende relatie met elkaar hebben, ongeacht of ze betrekkking hebben op navigatie of op informatie. En onthou: Altijd moeten de beslissingen op het kleinste niveau worden getoetst aan de beslissingen op het grootste niveau en vice versa.

• Home
• Artikelen
• Colofon