Grids zijn lijnen: horizontale lijnen, verticale lijnen. Vier, acht, vierentwintig. Alles kan, als het maar binnen de lijnen blijft. Grids zijn kaders, maar tegelijkertijd zijn ze verrassend simpel te breken. Wat weerhoudt je ervan om over een lijn heen te gaan? Niets of niemand. Toch raad ik je aan altijd goed na te denken voordat je met de grid breekt.

Grids zijn namelijk ook je vriend. Echt, zoals een goede vriend willen ze je helpen. Veel van ons geloven dat niet. Grids lijken op tralies en houden je creativiteit gevangen. Je kunt het ook anders zien: pas met lijnen op papier weet je waar je kunt kleuren.

Het is namelijk nou eenmaal zo dat mensen houden van orde. Breek met kaders en je creëert chaos, waardoor mensen – jouw gebruikers – niet meer weten wat ze moeten. Dat is de doodsteek van goed webdesign, waarin je juist hoort te zorgen dat gebruikers altijd weten waar ze zijn en wat ze doen.

Als het dan zo belangrijk is om je aan een grid te houden, hoe werkt het dan?

Gelukkig is er nog altijd vrijheid in wat voor grid je gebruikt. Er zijn in webdesign zelfs verschillende grid ‘systemen’ die jouw leven als ontwerper makkelijker willen maken. Zo hebben deze systemen vooraf opgestelde ratio’s, en zijn ze geschikt om te gebruiken voor responsive webdesign.

De keuze voor een grid maak je vaak voordat je begint met ontwerpen en ligt vaak aan de complexiteit van het ontwerp dat je voor ogen hebt. Dat kan gaan van een single column blog tot een magazine ontwerp dat gebruik maakt van wel 24 kolommen. Denk goed na over de grid die je gaat gebruiken en denk nog veel beter na voordat je met je layout breekt. Hoe vaker je met grids werkt, hoe beter je aanvoelt wanneer het oké is om over de grens te gaan.

In mijn gratis Figma Starter Design System zitten ook 3 verschillende grids die je kunt gebruiken. Voor zowel desktop, tablet als mobiel.