Layout & Grid
Hoe maak je een consistent ontwerp bij verschillende media? Hoe maak je een passend stramien?
Layout zijn oppervlakten waarop punten, lijnen, vlakken, interactieve elementen en teksten geordend worden. Dat zorgt voor hiërarchie, waardoor de lezer weet wat het belangrijkst en wat minder belangrijk is en waar hij of zij moet beginnen. Zie hieronder tips hoe je effectief ontwerpprincipes als samenhang, nadruk, balans en vorm kan toepassen in je ontwerpen.
01. Samenhang
Elementen die thematisch bij elkaar horen hebben visueel een connectie met elkaar qua gelijke kleur of vorm of plaatsing. Elementen vormen een geheel. Bij het ontwerpen van meerdere pagina’s zijn er dezelfde elementen gebruikt tussen de pagina’s. Deze zijn consistent toegepast.
Gestaltwetten
- Kleur: Elementen met dezelfde kleur worden gezien als bij elkaar horend
- Nabijheid: Elementen die dicht op elkaar staan worden beschouwd als een geheel
- Nabijheid: Elementen die dicht op elkaar staan worden beschouwd als een geheel
- Gelijkheid: Elementen die dezelfde kenmerken hebben worden waargenomen alsof ze bij elkaar horen.
- Geslotenheid: Elementen die dicht op elkaar staan worden beschouwd als een geheel. Losstaande elementen als individueel
TIP! Onderscheid elementen.
Visuele Hiërarchie
Visuele hiërarchie geeft de relevantie en relatie tussen interfaceonderdelen aan.
- Dichtheid
- Achtergrondkleur
- Positie en grootte
- Ritme
Je kunt iets belangrijk maken door de
volgende eigenschappen aan te passen
- Witruimte
- Grootte van de tekst
- Fonts (verschillende fonts gebruiken)
- Gewicht (Normal, Bold, Heavy)
- Stijl (Regular, Italic, Underlined)
- Kapitalen gebruiken
- Kleur veranderen
- Typografische elementen gebruiken
Witruimte
- De ruimte om de vaas vormt een silhouette
- Diapositief definieert vorm
- Geeft rust en focus
Gebrek aan witruimte:
- Iedere cm is gebruikt
- Ook geen negatieve witruimte, geen focus
- Geen plek voor rust of stilte
- Een beetje alsof je in een lift vastzit met dertig schreeuwende teenagers
Creeër vorm met leegte
Tips!
Groeperen van elementen: Zo krijgt een alleenstaand element meer aandacht.
Zelfde stijl houden. Bijvoorbeeld foto’s van dezelfde fotoshooting, kleuren zijn gelijk (b.v. zwart/wit, duotone).
Herhaling van grafische elementen.
02. Uitlijnen
Alle elementen zijn zorgvuldig geplaatst en met elkaar verticaal en horizontaal uitgelijnd. Er is geen opgesloten ruimte (“trapped space”).
Gestaltwetten
Positie: Elementen die horizontaal of verticaal op dezelfde as staan worden waargenomen op hetzelfde niveau.
Tips!
Duidelijk uitlijnen geeft structuur! Niet duidelijk uitgelijnde elementen ogen besluiteloos en onzeker.
Niet te streng uitlijnen anders voelt het zo geforceerd.
Tekst niet links uitlijnen naast een verticale blok dat oogt onrustig.
03. Benadrukken
‘If everyone shouts, how will any one voice be heard?’
- Door een visuele element te benadrukken creëer je een aandachtspunt en leidt je de kijker door het beeld.
- Elementen kunnen in een compositie opvallen door grootte, kleur of positie.
Bekijk je ontwerp van een afstand: is een duidelijke hiërarchie tussen de elementen? Is er een aangename visual flow of wordt je blik uit het ontwerp gestuurd? Door een visuele element te benadrukken of met lijnen creëer je een aandachtspunt en leidt je de kijker door het beeld. Elementen kunnen in een compositie opvallen door grootte, kleur of positie.
Gestaltwetten
- Grootte: Teksten met dezelfde grootte bepalen de mate van belangrijkheid
- Grootte: Elementen met dezelfde grootte bepalen de mate van belangrijkheid
- Intensiteit: Elementen met bepaalde intensiteit bepalen de mate van belangrijkheid
- Contrast: Elementen die er anders er uit zien dan hun omgeving worden als eerste opgemerkt
Tips!
Benadruk een elementen duidelijk zoals een dominante afbeelding of een titel.
Voorkom opgesloten ruimte, het oogt weet niet waar het moet kijken.
Focus bepaalde elementen in een layout leiden het kijken.
Spanning! Voeg verrassende elementen toe.
Leid de kijker door het beeld d.m.v. lijnen.
Call to action staat bovenaan de pagina, boven de fold. Gebruik contrast en grootte om aandacht te trekken. De actie tekst moet duidelijk zijn.
Visuele flow
Focuspunten Vragen om een actie!
Oefening: Schets vier manieren om te zorgen dat mensen weten wat ze als volgende stap moeten doen.
Presentatie: LABVD-Grids-Layout-2019
Lees verder: Grids
Referenties
Krause, T (2004),howdesign. design basics index
Tondreau, B. (2011), Rockport Publishers. Layout Essentials
Stribley, M. (2019, 10 april). 10 rules of composition all designers live by. Geraadpleegd op 9 mei 2019, van https://www.canva.com/learn/visual-design-composition/
