Een grid zou vaak een vaste waarde moeten zijn in de werkwijze van een webdesigner om een proportionele verdeling en compositie van afbeeldingen en tekst te bekomen in zijn/haar design en daardoor een (complexe) website duidelijk en ordelijk te communiceren naar de bezoeker. Via deze post wil ik dan ook het gebruik van grids (en het waarom) proberen toe te leggen. In één van de volgende posts zal ik dan ook enkele tutorials schrijven om je op weg te helpen met grids.

Grids worden al sinds lange tijd gebruikt in de print-, architecten-, typografenwereld enz. om de lay-out van een magazine, een brochure, een krant, gebouwen, ..., duidelijk weer te geven. Vele webdesigners zien het gebruik van grids nog steeds als iets onnodig. Meestal komt dit door het feit dan ze het gebruik niet gewoon zijn of gewoon nog geen kennis hebben hierover. Ik ben persoonlijk van mening dat een grid een belangrijke fundering is van een goed design.
Velen denken bij webdesign aan het gebruik van kolommen zoals de zo vaak gebruikte 2- en 3-kolommen lay-outs. Maar bij een goed design komt meer kijken. Eigenlijk zou er altijd rekening gehouden moeten worden met kolommen en rijen. Grid zullen, wanneer je het eenmaal snapt, je echt niet belemmeren in je design mogelijkheden. De bedoeling van een grid is niet om alle gecreëerde vlakken op te vullen maar om je te helpen al je tekst en afbeeldingen gestructureerd te organiseren binnen je beschikbare ruimte. Twee soorten basis elementen van een grid die je onder de knie dient te krijgen zijn de kolommen en de baseline grid:

De kolommen

De verdeling van je kolommen bepaal je uiteraard door rekening te houden met de inhoud. Wanneer je deze bepaald hebt kan je beginnen met de verdeling van je website in kolommen (al dan niet met "gutters": witruimtes tussen je kolommen om de leesbaarheid te verhogen) bijvoorbeeld met behulp van de 1/3-regel of "gulden snede" regel. Deze berekeningen verdienen hun eigen, volgende blogpost. Deze regels zijn nooit 100% bepalend, maar zijn algemeen aangenomen richtlijnen die gebruikt worden in verschillende toepassingen.
Wanneer dit te moeilijk is kan je uiteraard ook gebruik maken van de verschillende frameworks die ondertussen voorhanden zijn, zoals het 960 Grid System en Blueprintcss Framework. Deze zijn een hulpmiddel, geen standaard. Elk design kan een andere grid nodig hebben.
(voorbeeld: kolommen grid)

Baseline grid

De baseline grid wordt gebruikt om verticale harmonie te brengen in de teksten. Het principe van deze grid is dat de onderkant van elke regel tekst samenvalt met de horizontale lijnen bepaald door de lineheight van de tekst.
Ideaal naar mijn standaard is een lineheight die 150% is van de tekstgrootte. Stel je gebruikt een font met een standaard tekstgrootte van 12px. Vermenigvuldig die 12 met 1.5 en je krijgt een lineheight van 18px die tevens jou baseline grid bepaalt.
(voorbeeld: baseline grid)

Conclusie

Eenmaal je begrijpt hoe je je website kan designen volgens een grid, kan je je toeleggen op meer gecompliceerde grids en na verloop van tijd zal je zien dat je je webdesign gemakkelijk kan toe passen op een grid.
De voordelen van het gebruik van een grid zijn op deze manier hopelijk duidelijk:

• Een grid helpt de webdesigner om een proportionele en overzichtelijke indeling te creëren voor de elementen van de layout;
• Het gebruik van grids doet de webdesigner relationeel en systematisch denken tijdens het designen;
• Een grid voorziet een webdesigner van betere controle over het design;
• En vooral: de bezoeker zal de website aangenamer ervaren en makkelijker kunnen lezen.

Een voorbeeld met de kolommen en baseline grid gecombineerd vind je hier: http://inventis.be/blogassets/gridbased/

Enkel mooie voorbeelden waar grids gebruikt werden als basis voor het design:

• http://www.monocle.com
• http://csswizardry.com
• http://www.optiver.com
• http://tapbots.com/weightbot