Grid-Based Design voor het web

Geplaatst op 06-11-2009 in Advies

Structuur maakt bewust of onbewust een groot deel van ons leven uit. We beseffen het niet altijd, maar kom je het overal tegen. Denk maar aan het verkeer, op de werkvloer, de inrichting van een winkel, kantoor of huiskamer etc. Zonder structuur zou er complete chaos heersen. Voor bezoekers van een website is het ook belangrijk dat er structuur aanwezig is: hierdoor vinden bezoekers eenvoudiger waar ze naar op zoek zijn en ziet een website er aantrekkelijker uit. Een van de belangrijkste methodes om structuur aan te brengen in een website is met behulp van een grid (raster).

Wat is een grid?

Een grid is een collectie van (denkbeeldige) horizontale en verticale lijnen waar elementen van een ontwerp op uitgelijnd worden. Over het algemeen bestaat een grid uit kolommen met daartussen ruimte (Margin/Gutter), zie afbeelding 1.

Afbeelding 1: Voorbeeld van een eenvoudig grid

Wanneer een grid wordt gebruikt, is het belangrijk dat het grid kan worden onderverdeeld in meerdere kolommen en dat deze onderverdeling consequent is. Afbeelding 2 laat zien hoe belangrijk het is dat de onderverdeling consequent en harmonieus is.

Afbeelding 2: Belang van een consequente en harmonieuze onderverdeling

De hoofdlijnen van deze twee grids zijn aangegeven in zwart en de onderverdeling is blauw. De onderverdeling van grid 1 is niet consequent en oneven, hierdoor wordt de structuur chaotisch. De onderverdeling van het grid 2 is harmonieus en zorgt voor een goede, rustige structuur.

Grids in websites

Grids worden (gelukkig) steeds vaker gebruikt bij het ontwerpen van een website. Hieronder ziet u een voorbeeld van een website die ontworpen is met een grid. (Bron: http://960.gs/)

Afbeelding 3: Een website met een grid

De elementen binnen deze webpagina zijn uitgelijnd binnen dit grid, zoals te zien is op afbeelding 4.

Afbeelding 4: Groepering van kolommen binnen een grid

Het menu aan de linkerkant bestaat uit twee kolommen. Het content deel in het midden bestaat uit een zestal kolommen en het laatste nieuws met fles wijn aan de rechterkant bestaat uit drie kolommen. Uiteraard kan deze opzet per pagina verschillen en is het goed mogelijk dat een vervolgpagina een andere combinatie gebruikt.

960 grid

Een veel gebruikt grid is het 960 grid, wat zoals de naam al een verklapt 960 pixels breed is. De reden waarom het 960 grid zo populair is, is omdat 960 een goed deelbaar getal is: 960 is te delen door 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 en 480, waarbij telkens een even getal ontstaat.

Het 960 grid is openbaar beschikbaar en ontzettend populair, voor bijna elk ontwerp programma zijn er dan ook templates ontwikkeld om eenvoudig dit grid te gebruiken: Fireworks, InDesign, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Expression Design, Printable PDF en als CSS framework downloaden. Via de 960 grid website kun je 3 templates downloaden: met respectievelijk 12, 16 en 24 kolommen.

De variant met 12 kolommen is erg geschikt voor gebruik, omdat 12 een veelvoud is van 2, 3, 4 en 6. Zo kan er dus makkelijk een structuur met 2, 3, 4 of 6 kolommen gemaakt worden (zie afbeelding 5).

Afbeelding 5: Toepassingen van een 12-kolommen grid

Het belangrijkste voordeel van de variant met 12 kolommen ten opzichte van de variant met 16 kolommen is dat 12 deelbaar is door 3.

De variant met 24 kolommen leent zich ook goed om een structuur te creëren. Met 24 kolommen kan er makkelijk een structuur gemaakt worden van 2, 3, 4, 6, 8 en 12 kolommen. Het nadeel is dat er door de grote hoeveelheid kolommen het minder overzichtelijk wordt.

Moet alles op een Grid geplaatst worden?

Grids zijn er voor om elementen makkelijk uit te lijnen op een ontwerp. In sommige gevallen moeten bepaalde elementen echter juist niet uitlijnen op het grid, omdat deze elementen belangrijker zijn; zij zien er dan visueel aantrekkelijker uitzien of verhogen de gebruiksvriendelijkheid. Soms lijnen bepaalde elementen niet uit met het grid (zie afbeelding 5). Het is dan niet erg om het grid los te laten (of een 12 koloms grid bijvoorbeeld te combineren met een 16 koloms grid). Een grid moet helpen om structuur te creëren en niet beperken. Tijdens het ontwerp kan daarom ook het best begonnen worden met het uitlijnen van de basis elementen:

• Kopteksten;
• Paragrafen;
• Opsommingen;
• Tabellen

Als deze basiselementen zijn uitgelijnd, is waarschijnlijk al 80% van de content op de website uitgelijnd en wordt mogelijke chaos voorkomen. Afwijking van de overige 20% van de elementen zal dan niet leiden tot een te grote chaos.

Afbeelding 6: Elementen die niet zijn uitgelijnd

Bespaar tijd (en daarmee kosten) met grids

Naast het visueel aantrekkelijker maken van een website, bespaart het gebruik van grids ook tijd. Niet alleen de ontwerper heeft meer structuur en kan eenvoudiger zijn elementen plaatsen, ook degene die het ontwerp in HTML/CSS zet kan sneller te werk gaan. Wanneer een website op een grid ontworpen is, ontstaat een wiskundig ritme in de webpagina. Dit biedt bijvoorbeeld Yes2web de mogelijkheid om sneller uw ontwerp om te zetten naar HTML/CSS en daarmee de ontwikkeltijd te beperken.

Meer informatie over Grids

• http://www.designbygrid.com/
• http://en.wikipedia.org/wiki/Grid_(page_layout)

« Terug naar Advies