Grids

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).

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).

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.

Veel user-interface designers zien het gebruik van grids nog steeds als iets overbodigs of ervaren het als beperkend voor de creativiteit. Meestal komt dit doordat ze het gebruik niet gewoon zijn of nog geen kennis genoeg hebben. Grids zullen, wanneer je het eenmaal snapt, je echt niet belemmeren in je design mogelijkheden.

Een grid is een belangrijke fundering van een goed design. Je kunt niet ontwerpen voor meerdere devices zonder het gebruik van grid!

Er zijn twee grids die je onder de knie dient te krijgen: kolommen grid en de baseline grid.

Baseline grid

De baseline grid wordt gebruikt voor verticale uitlijning. 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.

Meestal is een lineheight 150% 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 voor de baseline grid.

In de meeste grafische programma's kun je het grid instellen. Maak hier ook gebruik van!

Kolommen grid

Wanneer je een inventarisatie hebt gemaakt van alle functies die nodig zijn om de user story's uit te voeren, moet je alle functies verdelen over de verschillende pagina's. Je kunt een pagina dan zien als een blokkendoos van div'jes. Elke blok bevat een aantal functies die bij elkaar horen.

Wanneer je bepaald hebt welke blokken op een pagina geplaatst moeten worden, 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.

960 grid

Een handig hulpmiddel is het 960 grid van Nathan Smith. Hij koos ervoor om een breedte te handhaven van 960px breed. Dit is een breedte die op de meeste schermen van laptops, pc's en tablets duidelijk overkomt en eigenlijk ontwikkeld is voor een verouderde weergave: 1024x768. Het 960 Grid System is een template met een kant en klaar css-lay-out die je aan een site kan koppelen. Het voordeel is dat je niet zelf de volledige CSS moet maken.

Het 960 grid is 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. De meeste Wordpress-thema's zijn gebaseerd op dit grid.

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.

Via de 960 grid website kun je 3 verschillende css-bestanden downloaden: met 12, 16 of 24 kolommen. 12 kolommen is erg geschikt, 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.

De voordelen van het gebruik van het 960 grid zijn:

• Een grid helpt je om een overzichtelijke indeling te creëren voor de elementen van de layout
• Het gebruik van grids dwingt je systematisch te denken tijdens het designen
• Een grid voorziet je van betere controle over het design, je krijgt een "strakke" site.
• En vooral: de bezoeker zal de website als aangenamer ervaren en makkelijker kunnen lezen.
• De meeste templates zoals Bootstrap zijn gebaseerd op een 12 kolommen grid. Wanneer je bij het ontwerp dit grid gebruikt, kun je het makkelijk bouwen met deze templates.
• Je kunt je ontwerp goed overdragen naar een developer, zonder dat je precies de pixelgrootte van de verschillende elementen hoeft aan te geven.

Het gebruik van grid

Op de website 960.gs staat een grote download-knop. Hiermee download je de volgende mappen:

In de map Code staan de verschillende css-bestanden. Hierin vind je regels voor de verschillende kolom-breedtes. Bijvoorbeeld:

.container_12 .grid_6

Wanneer deze css-regel is koppelt aan een <div>, dan is deze div 6 kolommen breed, dus de helft van de de 12 kolommen.

Oefeningen 1

1. Download van de site 960.gs de 960-grid-system-master.
2. Maak een nieuw html-document aan en koppel 960_12_col.css aan dit bestand.
3. Voeg een css-regel toe die zorgt voor een achtergrondkleur:

.kleur{
background-color:#f26a4b;
}

4. In de <body> begin je altijd met een container <div> met de class container_12. (zorg dat je alle div's ook afsluit)
5. Probeer kolommen te maken met verschillende breedtes zoals het voorbeeld hiernaast.
6. In de css zie je ook de volgende regels:

.container_12 .prefix_1 {
padding-left: 80px;
}

en

.container_12 .suffix_1 {
padding-right: 80px;
}

Hiermee kun je "lege" ruimte voor of na de div invoeren.

<div class="grid_6 prefix_1 kleur"> de helft</div>

Deze regel beslaat 7 kolomen: 1 lege kolom en een <div> van 6 kolommen.

Probeer "lege" kolomen toe te voegen voor of na verschillende <div>'s

Ontwerpen voor 960 grid

Wanneer je gebruik maakt van het 960 grid bij het bouwen van een pagina, dan moet je ook ontwerpen op 960 grid.

Hiervoor biedt de 960-grid-system-master een aantal hulpmiddelen. In de map sketch_sheets vind je schetspapier met grid. In de map templates staan grids voor de verschillende ontwerpprogramma's.

Oefeningen 2

1. Print uit de 960-grid-system-master 960_sketch_12_col.pdf en teken het wireframe van deze pagina.
2. Open het programma Axure en ga naar de menuoptie: Arrange | Grids and guides | Create guides en bekijk  de Presets van 1200 grid: 12 Column en 960 12 column
3. Teken in Axure het wireframe van een van de productpagina's www.kleinejurkjes.nl.
4. Open het 12 kolom-grid ook in Photoshop of Illustrator en maak het ontwerp na van www.kleinejurkjes.nl. Neem de afbeeldingen over van de site.
5. Het 960-grid is niet geschikt voor mobile. Hoeveel kolommen gebruikt jouw smartphone?