Layout & baseline grid

Vorige week lanceerden we de nieuwe versie van de lijsterbes website . De oude website was een tamelijk zware flash-site en Geert (ja die vanop Vitaya ) dacht aan een open, licht en rustig ontwerp voor de nieuwe versie.

En hoe breng je openheid en rust in een ontwerp? Met een layout & baseline grid natuurlijk.

Een watte grid?

Grid systemen worden al sinds jaar en dag gebruikt door typografen en ontwerpers (maar ook door architecten bijvoorbeeld) om structuur en orde in een boekpagina of andere compositie te krijgen.

Elementen (titel, ondertitel, foto’s, footnotes) worden dan op een consistente manier op zo’n proportioneel grid gepositioneerd. Resultaat: orde, rust en een goed ontwerp.

Er valt veel te vertellen over grid systemen en anderen hebben het al beter en uitgebreider uitgelegd , dus ik toon gewoon even hoe ik mijn grids implementeer in onze projecten.

Layout grid

Voor het Lijsterbes project ben ik zo vrij geweest om het grid van Khoi Vinh over te nemen. Niet (echt nie!) uit luiheid, maar omdat Vinh zijn grid heeft geperfectioneerd en uitgebreid gedocumenteerd.

Zijn blog is trouwens een absolute aanrader.

Het grid:

http://farm3.static.flickr.com/2274/2111983961_6ef085b5ba

Je zal zien dat de inhoud niet tegen de grid-lijnen kleeft, maar dat alle elementen 5 pixels “ge-nudged” zijn. Handig als je een kader rond een element wil plaatsen.

Baseline grid

Een baseline grid zorgt voor een verticaal ritme in een pagina. Klinkt misschien wat gek, maar net zoals muziek goed klinkt door een vast ritme ziet een ontwerp er ook beter uit als de elementen op een baseline grid worden gepositioneerd.

Nogal abstract en moeilijk te begrijpen allemaal, onderstaande screenshot zou het een en het ander moeten verduidelijken.

http://farm3.static.flickr.com/2230/2112003927_e145c71079

Het grid bestaat uit horizontale lijnen, allemaal op 18 pixels van elkaar. Die 18 pixels zijn niet toevallig gekozen: 18 pixels is 1.5 keer 12 pixels (de grootte van de tekst). Een lijnhoogte van 1.5 keer de grootte van de tekst zorgt voor een comfortabele leeservaring.

Stel dat we werken met lopende tekst van 14 pixels groot, dan zou ons grid gebaseerd zijn op intervals van 21 pixels.

Alles kan beter

Eigenlijk zou het layout grid ook moeten gebaseerd zijn op intervals (of meervouden) van 18 pixels, zodat de pagina en al zijn elementen proportioneel blijven tegenover elkaar. Nu werk ik met 8 kolommen van 95 pixels.

Ik zou ook moeten werken met em’s in plaats van pixels zodat de pagina proportioneel schaalt wanneer de gebruiker de tekst groter maakt.

Later meer hierover.

Reacties

Reageer als eerste!

Geef je mening… don't be shy

  • http://

Feed the primates

Wij hebben grote honger naar nieuwe projecten. Ook voor uw project leggen wij de lat heel hoog. Samenwerken? Stuur een berichtje. Of bel 09 395 02 51.

Een idee voor een nieuw project? We zijn benieuwd