Ontwerpen met een grid

In veel ontwerpen wordt gebruik gemaakt van een grid. Een grid (bij grafische vormgeving) is simpel gezegd een verzameling lijnen die samen een houvast creëren. Met deze lijnen is het mogelijk om op een samenhangende wijze tekst en afbeeldingen in een ontwerp te positioneren.

Een goede basis

Het maken van een grid is vaak de eerste stap tijdens het maken van een grafisch ontwerp. De vormgever denkt hierbij na over het ritme en de indeling van de pagina. Deze fundamentele dingen van een ontwerp zijn achteraf moeilijk aan te passen en hebben veel impact op het eindresultaat.

Statisch of liquid ontwerp?

Tijdens het maken van een grid moet je een aantal keuzes maken. De eerste keuze is of je een statisch ontwerp of een liquid ontwerp maakt. Een statisch ontwerp heeft een vaste breedte en een liquid ontwerp past zich aan aan de resolutie waarop een website bekeken wordt. Het verschil in het maken van een grid voor deze ontwerpen is dat je bij een statisch ontwerp werkt met vaste waardes (bij webdesign pixels) en bij een ?liquid? ontwerp maak je gebruik van percentages. De verdere werkwijze blijft vrijwel gelijk.

Breedte van je ontwerp

Wanneer je hebt gekozen voor een ontwerp waarbij de breedte vaststaat is het vanzelfsprekend ook belangrijk om die breedte te definiëren. Vaak laat men de breedte afhangen van de maximaal beschikbare ruimte bij een bepaalde resolutie (Tegenwoordig wordt vaak gekozen voor een grid dat geoptimaliseerd is voor een resolutie van 1024 x 768 pixels). De maximaal beschikbare ruimte bij een resolutie is afhankelijk van de breedte van het beeldscherm verminderd met de ruimte die een scrollbalk van een browser in beslag neemt. Het is overigens ook mogelijk dat de horizontale ruimte van een browser nog minder is doordat bepaalde werkbalken (zoals de favorieten) geopend zijn. Hier wordt meestal geen rekening mee gehouden. Bij een ontwerp dat geoptimaliseerd wordt voor een resolutie van 1024 x 768 pixels komt het er in de praktijk op neer dat er vaak gekozen wordt voor een breedte tussen de 900 en 980 pixels breed.

Horizontale verdeling

Wanneer de breedte is vastgesteld, kan deze worden verdeeld in een aantal kolommen. Het mooiste resultaat wordt vaak verkregen door te kiezen voor een verdeling tussen de 4 en 8 kolommen. Tussen deze kolommen in worden smallere kolommen geplaatst. Deze kolommen bepalen de witruimte. Het mooiste resultaat wordt verkregen wanneer je begint en eindigt met een smalle (witruimte) kollom. De bredere kolommen die overblijven worden later gevuld de met content.

De brede kolommen en zijn net als de smalle kolommen altijd van dezelfde breedte. De brede en smalle kolommen kunnen op elkaar worden afgestemd door bijvoorbeeld de smalle kolommen 10% of 20% van de brede kolommen te maken.

Verticale verdeling

Nu we een horizontale verdeling hebben gemaakt is de volgende logische stap om een verticale verdeling te maken. Deze verdeling kun je maken door dezelfde verdeling als in de breedte ook in de hoogte toe te passen. Bedenk wel dat content vaak in de hoogte kan variëren. Vooral bij het ontwerpen van grids voor een CMS moet je hier gewoon rekening mee houden. Geef dus, waar nodig, blokken een variabele hoogte. Let er ook op dat de blokken naast de blokken met een variabele hoogte er ook nog goed uit zien op het moment dat het blok er onder verschuift. Boven en onder het grid kun je ervoor kiezen om dezelfde witruimte als aan de zijkanten te gebruiken. Het is echter een kwestie van smaak of je de witruimte boven en onder wel of niet gebruikt.

Het vullen van je grid

Nu de grid staat is de volgende stap om de grid in te gaan tekenen. Geef alle elementen die je in je site kwijt wil een plek in de grid. Bepaal welke elementen per pagina kunnen verschillen en welke elementen overal hetzelfde zijn. Door op elke pagina de grid grotendeels hetzelfde te houden creëer je een samenhangend geheel waarbij het ?gevoel? van de website overal hetzelfde is. Tijdens het vullen kun je ook al rekening houden met waar de ‘fold’ komt op de verschillende resoluties.

Wanneer je grid is ingevuld kun je verder gaan met de volgende stap in het vormgeven. In deze fase wordt de vlakverdeling gevuld met beelden en tekst. Vergeet bij het vormgeven niet dat je website ook naast de grid vormgegeven kan worden. Probeer van content en achtergrond één geheel te maken.

Breaking out of the grid

Het ontwerpen met een grid geeft een goede houvast om eenheid en ritme in je ontwerp te krijgen. Tevens is het een goede basis om (in combinatie met een stijlstudie) te beginnen met een ontwerp. Laat je echter niet beperken door een grid maar experimenteer ook met elementen die juist het ritme van een grid doorbreken. Door deze onderbreking kun je aandacht vestigen op een bepaald element. Wanneer je dit bewust toepast is het mogelijk om de voordelen van een grid ten volste te benutten zonder dat je een te strak of saai ontwerp krijgt.

• Tweet