Het gebruik van oriëntatiepunten maakt pagina-indeling eenvoudig
Een ontwerp kan impact hebben. Het heeft misschien stijl. Maar deze hebben is niet genoeg.
Om goed te werken, moet een ontwerp elementen hebben die elkaars sterke punten uitspelen. Gelukkig bevat elk stukje inhoud inherente richtlijnen.
Lay-out of de indeling van inhoud op een webpagina is van cruciaal belang voor het succes van een ontwerp. Onder meer geeft lay-out prioriteit aan inhoud om mensen van het ene element naar het andere te leiden.
Als het goed is gedaan, zullen mensen zo geïnteresseerd zijn in de inhoud dat ze niets anders zullen merken.
Lees verder voor meer informatie en tips voor het maken van lay-outs die in uw ontwerpen werken.
In het onderstaande voorbeeld zullen de meeste mensen de foto of de kop eerst zien, daarna de tekst en tenslotte de links.
Ze zullen misschien niet opmerken dat de kop, tekst en het gezicht van het model respectievelijk een derde en tweederde op de pagina worden gezet (de regel van derden respecteren), of dat de kop en links zijn geschreven in kleuren die zijn bemonsterd uit de lippen van het model, of dat de de kromming van haar schouder leidt het oog naar de oproepen tot actie.
Tekst, foto en kop vormen een compositie. Als er een uitvalt, mislukt het hele stuk.
Regeling gebaseerd op wederzijds respect
Waar plaatsen we dingen? Laat ze het ons vertellen. De eigenaardigheden van afbeeldingen, foto's en stukjes tekst worden duidelijk wanneer ze elkaar op een pagina ontmoeten. Sommige werken beter samen dan andere en sommige werken alleen als ze op een bepaalde manier worden geplaatst. Onze lay-out werkt bijvoorbeeld op twee manieren:
Figuur 1 toont de lay-out die wordt gebruikt in ons voorbeeld hierboven. Grijze blokken vertegenwoordigen de kop, foto en tekst.
Figuur 2 laat zien hoe dezelfde principes zouden gelden voor de inversie: één groot element uitgebalanceerd met twee kleinere elementen. Deze foto ziet er aan de rechterkant echter beter uit.
Ons model kijkt naar links. In figuur 1 bekijkt ze de tekst. In figuur 2 kijkt ze weg van de tekst. Dat had misschien gewerkt als ze naar de camera keek, maar omdat ze wegkijkt, verliest ze wat impact. Niet veel, maar genoeg om er toe te doen.
Het model toont afwisselend interesse in de tekst en negeert deze wanneer deze wordt omgekeerd. De ordening van elementen vestigt een positieve of een negatieve houding.
Afstemming op basis van oriëntatiepunten
Soms geeft het ding dat elementen op een bepaalde manier laat werken ook aanwijzingen over ruimte en uitlijning. We hebben gezien hoe de ogen van het model naar links wijzen, maar de foto en tekst bevatten andere visuele aanwijzingen.
Impliciete lijnen tussen oriëntatiepunten in de typografie en de afbeelding zijn rijk aan deze compositie:
- Het oog en de lippen van het model en de rand van haar neus ontmoeten de rand van de rechterkolom van tekst.
- De linkerkolom van tekst komt overeen met de linkerrand van de kop. Het bereikt bijna de rand van het haar van het model, maar schiet tekort om consistent te blijven met de rechterkolom.
- Het gezicht van het model (met name de ogen en mond) bepaalt de verticale ruimte van de kop.
- De onderkant van de foto markeert het onderste derde deel van de compositie (in de regel van derden).
- De ogen van het model zijn een derde van de bovenkant van de compositie.
- Het midden van het gezicht van het model en de rechterkant van de kop komen samen op het derde en twee derde punt van de breedte van de compositie.
Sommige bezienswaardigheden hebben meer kracht dan andere. Ontwerpers en fotografen kunnen bijvoorbeeld discussiëren of de ogen van het model meer invloed hebben dan haar silhouet. Maar een lay-out op basis van alle herkenningspunten is beter dan een lay-out die ze negeert.
Functies gebruiken om harmonie te creëren
Niet-ontwerpers die de lay-out proberen, rangschikken soms elementen op basis van hoe ze op de pagina passen. De ruimte moet worden gerespecteerd, maar dit leidt niet altijd tot het beste ontwerp.
Figuur 5 lijnt elementen uit op de pagina's en baseert alles op de grenzen van het canvas.
Figuur 6 baseert de lay-out echter op focuspunten in de foto. Het resultaat is een meer gestroomlijnd uiterlijk.
Figuur 5 is inefficiënt, omdat kijkers rondstampen tussen focuspunten: naar de kop, tot aan het gezicht, tot aan de tekst. De eenvoudigste regel is recht. Vandaar dat figuur 6 de blik van de kijker gemakkelijk van links naar rechts, van het ene element naar het volgende leidt. De crux van de tweede lay-out is een smalle strook die loopt langs de koplijn-tekst-uitlijning.
In deze afbeeldingen worden lezers aangetrokken door het gezicht van het model, de kop en de tekst - meestal in die volgorde. Dat zijn drie verschillende gebieden om naar te kijken. Ze uitlijnen geeft de lay-out focus.
Het goede antwoord
Alle onderstaande drie lay-outs gebruiken dezelfde kop-, foto- en tekstelementen:
De eerste lay-out heeft de meeste "ademruimte". De tweede heeft betrekking op de tekst. De derde lay-out gebruikt negatieve ruimte om balans te bereiken. Alle drie gebruiken oriëntatiepunten maar op verschillende manieren. Is dit de beste?
Op zoek naar een antwoord kan ons verblinden voor de hand liggende: dat meerdere oplossingen even geldig kunnen zijn als de elementen samenwerken. Visuele herkenningspunten zijn kansen, geen regels. Kijk nog eens naar het eerste ontwerp.
Hoe meer de elementen overeenkomen met impliciete lijnen, hoe meer een niet-conform element eruit zal springen. Hier verbreekt de ontwerper het woord "Oriëntatiepunten" van de verticale uitlijning van de andere tekst, waardoor het sleutelwoord wordt benadrukt.
Er is geen twijfel over wat de pagina promoot. Succes wordt niet gemeten door hoe strikt elementen in overeenstemming zijn met ontwerpprincipes, maar door hoe goed de pagina zijn boodschap communiceert.
Exclusief geschreven voor Webdesigner Depot door Ben Gremillion. Ben is een freelance schrijver en ontwerper die communicatieproblemen met beter ontwerp oplost.
Hoe volg je oriëntatiepunten op je ontwerpen? Wat werkt het beste voor jou en wat niet?