071 - 576 13 23
Slave to the grid

Slave to the grid

door Erwin de Zwart op 18 februari 2016


Met mijn Museumjaarkaart op zak bezocht ik pas geleden het Stedelijk Museum in Amsterdam. Vooral de afdeling over de Nederlandse vormgeving sprak mij erg aan. Naast schilderkunst heeft Nederland een rijke traditie in vormgeving, typografie, industrieel ontwerp en architectuur. In het Stedelijk zijn werken van bekende Nederlandse kunststromingen uit de vorige eeuw, zoals De Stijl en de nul-groep (maar ook buitenlandse gelijksoortige stromingen zoals de Zwitserse Stijl en Bauhaus) goed vertegenwoordigd.

Deze belangrijke Nederlandse stromingen vonden hun weg naar de consument in de vorm van meubelen, strakke typografie en een typisch Nederlandse stijl van vormgeving. Wat opvalt in al deze werken is een streven naar rust en harmonie. Met beperkte kleuren, strakke lijnen en minimalistische uitgangspunten. En vooral: een bijna obsessief gebruik van een grid. Dat zette mij aan het denken.

mondriaan

Ritme

In de vormgevingswereld gebruiken we een grid of raster om de ruimte op een (web)pagina, poster, boek of schilderij verticaal en horizontaal te verdelen. Een grid bepaalt de marges tussen grafische en tekstuele elementen en geeft de kijker houvast. Een grid geeft een kunstwerk of ontwerp kortom ritme. Niet voor niets is het grid sinds de jaren ‘70 een van de pijlers in het grafisch onderwijs.

Ook in webdesign maken we continu gebruik van grids. Tijdens de schetsfase gebruiken we hulplijnen om het positioneren en uitlijnen van grafische elementen makkelijker te maken. Onze developers worden blij van vaste kolombreedtes en vaste afstanden tussen grafische elementen. Het grid helpt ons om breekpunten te bepalen voor responsive ontwerpen: de afmetingen vanaf waar het ontwerp overschakelt naar het volgende formaat. We passen de grids aan op de diverse devices waarop onze websites worden bekeken.

Beeldtaal

Een grid geeft een vormgever houvast, maar gebruik van een grid is nog geen garantie voor een goede vormgeving. Sterke vormgeving gaat over gevoel. Over de juiste letter, een goed kleurenpalet, goede fotografie en stijlelementen zoals iconen en interactieve elementen die dit gevoel uitdrukken. De uniforme structuur die het grid biedt, helpt vooral om die elementen op de juiste manier bij elkaar te brengen.

En toch: Met de juiste vormgevingselementen én het gebruik van een grid, kom je een eind, maar ben je er nog steeds niet. Een goede vormgeving is ook een spannende vormgeving en dat betekent de strakke ordening van het grid soms doorbreken. Een goed voorbeeld van iemand die het grid heel letterlijk nam was Wim Crouwel. Maar ondanks de beperkingen die hij voor zichzelf met zijn grids opwierp, bleef hij innovatief. Hij liet het grid voor hem werken, in plaats van andersom.

Ons experiment

Binnen ons vakgebied zijn er al veel standaard grids ontwikkeld, het bekendste waarschijnlijk Twitter Bootstrap. Bij wijze van experiment zijn wij eens aan de gang gegaan met het oudste bekende grid, de Rij van Fibonacci, ook wel de Gulden Snede genoemd. Dit grid wordt al sinds de renaissance gebruikt door kunstenaars, en is in feite een cijferreeks die ook veel in de natuur voorkomt.

bron: kennislink.nl

Met deze wiskundige vergelijking hebben we een responsive grid ontwikkeld voor een website.

Wat bleek? De Gulden Snede is hier, met gebruik van een rekenmachine en een aantal nieuwe webtechnieken, prima voor geschikt. Dit grid is totaal anders dan we gewend zijn in webdesign. We gaan immers niet uit van een horizontaal en verticaal raster, maar verdelen onze pagina in vlakken, en voeren de formule uit wanneer een scherm kleiner of groter wordt. Op deze manier wordt de grootte van ieder vlak nu bepaald door de vergelijking van Fibonacci. Een leuk experiment, waarbij we letterlijk een keer uit het grid stapten.

Uit ons experiment blijkt dat het als webdesigner belangrijk is om de regels van een grid te kennen, juist zodat je er soms uit kunt breken. Zo word je geen slaaf van het grid.