Robin Williams - nee, niet die - is een van de interessantste auteurs over tekst- en lay-outontwerp. Haar boekThe Non-Designer's Design Book: Design and Typographic Principles for the Visual Novice, is een waar juweeltje. In het boek legt ze de 4 basisregels voor effectief grafisch ontwerp uit: contrast, herhaling, uitlijning en nabijheid (CRAP).

In deze blogpost bespreken we die 4 basisregels en hoe je ze gemakkelijk kunt toepassen in je lay-outontwerp. Ik heb je al geleerd hoe je scanbare webinhoud schrijft, maar in die blogpost kwam de opmaak van teksten niet zo veel aan bod. Dus laten we dit even rechtzetten! Hoewel scanbaarheid in een tekst op zich belangrijk is, hangt het ook nauw samen met de opmaak van de tekst. Een tekst die een lust voor het oog is, is immers een tekst die uitnodigt om gelezen te worden!

1. Contrast

Laten we beginnen met de eerste regel voor effectief lay-outontwerp: contrast. Als elementen op je pagina (zoals lettertype, kleur, grootte, vorm enzovoort) niet identiek zijn, laat ze dan extreem van elkaar verschillen. Wees geen watje. Laat contrast schitteren! Een goed voorbeeld is de grootte van de letters in een krantenkop versus die in het artikel zelf. In contrast (zie je wat ik daar deed?), een kop getypt in Constantia 11 boven een artikel in Constantia 10 toont niet genoeg verschil tussen de twee, waardoor het moeilijk is om onderscheid te maken.

Dus hoe voeg je contrast toe aan je pagina? Contrast kan op verschillende manieren worden gecreëerd. Je kunt

• grote letters met kleine letters,
• een sierlijk oldstyle lettertype met een vet schreefloos lettertype,
• een dunne lijn met een dikke lijn,
• een koele kleur met een warme kleur,
• een gladde textuur met een ruwe textuur,
• een horizontaal element (zoals een lange tekstregel) met een verticaal element (zoals een hoge, smalle tekstkolom),
• breed uit elkaar staande lijnen met dicht op elkaar staande lijnen,
• of een kleine afbeelding met een grote afbeelding.

Nogmaals, wees geen watje. Je kunt 12-punts lettertypes niet laten contrasteren met 14-punts lettertypes, je kunt een halve puntregel niet laten contrasteren met een éénpuntsregel en je kunt donkerbruin niet laten contrasteren met zwart. Wees serieus! Contrast is cruciaal voor de organisatie van informatie (de scanbaarheid): een lezer moet altijd een blik op een document kunnen werpen en meteen begrijpen wat er aan de hand is.

De informatie in dit cv is er allemaal, maar het ziet er niet uitnodigend uit om te lezen en het trekt je aandacht niet.

In de lay-out van dit voorbeeld is er veel meer contrast, wat de scanbaarheid enorm verbetert.

2. Herhaling

De tweede regel van effectief lay-outontwerp is de regel van herhaling. Deze stelt dat je een bepaald aspect van het ontwerp in het hele stuk moet herhalen. Het herhalen van visuele elementen in je brochure, nieuwsbrief of blogpost helpt om een structuur te ontwikkelen en versterkt het gevoel van een verenigd stuk content. Het herhalende element kan een vet lettertype zijn, een dikke regel (lijn), een bepaalde bullet, ontwerpelement, kleur, formaat, ruimtelijke relaties, enz. Het kan van alles zijn dat een lezer visueel herkent. Je kunt de regel van herhaling zien als een herinnering om consistent te blijven.

Als je aan het einde komt van de informatie op deze kaart, dwaalt je oog een beetje af. Als je nu aan het einde komt van de informatie op deze kaart, dwaalt je oog een beetje af.

Als je nu aan het einde van de kaart bent, gaat je oog heen en weer tussen de vetgedrukte elementen. Dat is het punt van herhaling - het bindt een stuk samen en zorgt voor eenheid.

Het is net als het accentueren van je kleding: als je een zwarte outfit draagt, kun je die accentueren met sieraden en schoenen in dezelfde tint rood. Maar pas op dat je een element niet zo vaak herhaalt dat het vervelend of overweldigend wordt. Denk aan regel #1 en wees je bewust van de waarde van contrast! Als je bijvoorbeeld dezelfde zwarte outfit draagt, maar nu met een rode hoed, rode oorbellen, een rode sjaal, rode schoenen en een rode jas, zou de herhaling geen prachtig en verenigend contrast vormen: het zou overweldigend zijn en de focus zou verward worden.

3. Afstemming

Niets mag 'zomaar' op je pagina's terechtkomen, ongeacht het medium waarvoor je schrijft. Elk element moet een visueel verband hebben met een ander element op de pagina. Zo creëer je een frisse en duidelijke uitstraling.

Als elementen op één lijn staan op de pagina, is het resultaat een sterkere eenheid. Zelfs als uitgelijnde elementen fysiek van elkaar gescheiden zijn, is er een onzichtbare lijn die ze met elkaar verbindt, zowel in je oog als in je hoofd. Hoewel je bepaalde elementen misschien van elkaar hebt gescheiden om hun relaties aan te geven (met behulp van de regel van nabijheid), vertelt de regel van uitlijning de lezer dat, ook al staan deze elementen niet dicht bij elkaar, ze wel bij hetzelfde stuk horen.

De elementen op deze kaart zien eruit alsof ze er gewoon zijn opgegooid en geplakt. Geen van de elementen heeft enig verband met een ander element op de kaart. Sommige elementen zijn links uitgelijnd, sommige zijn rechts uitgelijnd en andere zijn gecentreerd.

Door alle items op de kaart naar rechts te verplaatsen en ze één uitlijning te geven, is de informatie meteen overzichtelijker (ook omdat ze gegroepeerd zijn). De tekstitems hebben nu een gemeenschappelijke grens die ze met elkaar verbindt.

Vermijd het gebruik van meer dan één tekstuitlijning op de pagina. Centreer bijvoorbeeld niet sommige tekst en lijn andere tekst rechts uit.

4. Nabijheid

Items op je pagina die bij elkaar horen of op de een of andere manier met elkaar te maken hebben, moeten altijd dicht bij elkaar staan. Onthoud: nabijheid impliceert een relatie. Dat geldt voor mensen in relaties, voor woorden in een zin en voor koppen en stukken in een tekst. Dat betekent ook dat items of groepen informatie die geen verband met elkaar houden, niet dicht bij andere items moeten staan. Dit geeft je lezers direct een visuele aanwijzing over de organisatie en inhoud van je pagina.

Laten we een eenvoudig voorbeeld nemen om de regel van nabijheid te illustreren. Ik heb hieronder 2 lijsten geplaatst die allebei dezelfde informatie bevatten. Wat neem je aan over de bloemen op de eerste lijst? Waarschijnlijk niet veel, toch? Hoe zit het met de bloemen op de tweede lijst? Het blijkt dat de laatste vier bloemen op de een of andere manier anders zijn dan de andere. Je begrijpt dit meteen. En je begrijpt het zonder je er zelfs maar bewust van te zijn. Je weet dat de laatste vier bloemen op de een of andere manier anders zijn omdat ze fysiek gescheiden zijn van de rest van de lijst.

Meenemen

Zelden is slechts één regel het enige antwoord op een pagina. De andere drie regels zijn inherent aan het ontwerpproces en je zult ze meestal alle vier gebruiken. Maar neem ze één voor één. Het is een goed idee om eerst te beginnen met nabijheid en dan verder te gaan.

Contrast: Als elementen op je pagina (zoals lettertype, kleur, grootte, vorm enzovoort) niet identiek zijn, laat ze dan extreem van elkaar verschillen.

Herhaling: herhaal een aspect van het ontwerp in het hele stuk, zoals een vet lettertype, een dikke regel (lijn), een bepaald bolletje, ontwerpelement, kleur, formaat of ruimtelijke relaties.

Uitlijning: elk element moet een visueel verband hebben met een ander element op de pagina.

Nabijheid: elementen op je pagina die bij elkaar horen of op de een of andere manier een verband hebben, moeten altijd dicht bij elkaar staan.

Ik hoop dat deze 4 regels jou net zo goed van pas komen als mij. Pas ze toe op je lay-outontwerp en kijk hoe het je verbetert! 💩