Brug af landemærker gør sidelayout let
Et design kan have indflydelse. Det kan have stil. Men at have disse er ikke nok.
For at fungere godt skal et design have elementer, der afspiller hinandens styrker. Heldigvis har hvert stykke indhold iboende retningslinjer.
Layout eller arrangement af indhold på en webside er afgørende for et designs succes. Layout prioriterer blandt andet indhold for at lede folk fra et element til et andet.
Hvis det gøres rigtigt, vil folk være så interesserede i indholdet, at de ikke vil bemærke noget andet.
Læs videre for flere detaljer og tips til at oprette layouter, der fungerer i dine designs.
Med nedenstående eksempel vil de fleste bemærke enten billedet eller overskriften først, så teksten og endelig linkene.
De må ikke bemærke, at overskriften, teksten og modelens ansigt er angivet med en tredjedel og to tredjedele på siden (ære for tredjedelsregel), eller at overskriften og linkene er skrevet i farver, der er udtaget fra modelens læber, eller at Kurven på hendes skulder fører øjet mod opkald til handling.
Tekst, foto og overskrift udgør en sammensætning. Hvis man falder ude af sted, fejler hele stykket.
Arrangement baseret på gensidig respekt
Hvor sætter vi ting? Lad dem fortælle os. Kendetegnene for grafik, billeder og klumper af tekst bliver tydelige, når de mødes på en side. Nogle arbejder sammen bedre end andre, og nogle arbejder kun, når de placeres på en bestemt måde. For eksempel fungerer vores layout teknisk på to måder:
Figur 1 viser det layout, der anvendes i vores eksempel ovenfor. Grå blokke repræsenterer overskrift, foto og tekst.
Figur 2 viser, hvordan de samme principper ville gælde for inversionen: et stort element afbalanceret af to mindre elementer. Dette særlige billede ser dog bedre ud til højre, dog.
Vores model ser til venstre. I figur 1 ser hun på teksten. I figur 2 ser hun væk fra teksten. Det kunne have fungeret, hvis hun kigger på kameraet, men fordi hun kigger væk, mister det noget. Ikke meget, men nok til at gøre noget.
Modellen viser skiftevis interesse for teksten og ignorerer den, når den er omvendt. Arrangementet af elementer etablerer enten en positiv eller negativ holdning.
Justering baseret på landemærker
Nogle gange giver den ting, der gør elementer på en bestemt måde, også spor om plads og justering. Vi bemærkede, hvordan modelens øjne peger til venstre, men billedet og teksten indeholder andre visuelle tegn.
Implicerede linjer mellem landemærker i typografi og billedet er overflødige i denne sammensætning:
- Modelens øje og læber og kanten af næsen møder kanten af den højre kolonne af tekst.
- Den venstre kolonne af tekst møder den venstre kant af overskriften. Det når næsten kanten af modelens hår, men den bliver kort for at holde sig i overensstemmelse med højre kolonne.
- Modells ansigt (især øjnene og munden) definerer overskriftets lodrette rum.
- Nederst på billedet markerer den nederste tredjedel af sammensætningen (i tredjedelsregel).
- Modelens øjne er en tredjedel fra toppen af kompositionen.
- Midt på modelens ansigt og den højre kant af overskriften mødes på en tredjedel og to tredjedeler af sammensætningens bredde.
Nogle landemærker har mere magt end andre. Designere og fotografer kunne for eksempel debattere, om modelens øjne er mere indflydelsesrige end hendes silhuet. Men et layout baseret på alle vartegn er bedre end et layout, der ignorerer dem.
Brug af funktioner til at skabe harmoni
Ikke-designere, der prøver deres hånd på layout, arrangerer nogle gange elementer baseret på, hvordan de passer på siden. Rummet skal respekteres, men det fører ikke altid til det bedste design.
Figur 5 justerer elementer til sidens rum og baserer alt på lærredets grænser.
Figur 6 baserer dog sit layout på kontaktpunkter i billedet. Resultatet er et mere strømlinet udseende.
Figur 5 er ineffektiv, fordi seerne springer rundt mellem fokuspunkter: til overskriften, ned til ansigtet, op til teksten. Den enkleste linje er lige. Derfor leder figur 6 seeren blik let fra venstre mod højre fra et element til det næste. Kernen i det andet layout er et smalt bånd, der løber langs linjestykket.
I disse billeder er læsere trukket på modelens ansigt, overskriften og teksten - normalt i den rækkefølge. Det er tre forskellige områder at se på. Aligning dem giver layout fokus.
Det rigtige svar
Alle tre layouts nedenfor bruger samme overskrift, foto og tekst elementer:
Det første layout har det mest "åndedræt." Det andet respekterer teksten. Det tredje layout bruger negativt rum for at opnå balance. Alle tre bruger landmærker, men på forskellige måder. Er det den bedste?
Jagt efter et svar kan blinde os til det åbenlyse: at flere løsninger kan være lige gyldige, når elementerne arbejder sammen. Visuelle vartegn er muligheder, ikke regler. Tag et nyt kig på det første design.
Jo mere elementerne er i overensstemmelse med implicitte linjer, desto mere vil et ikke-overensstemmende element skille sig ud. Her bryder designeren ordet "Landemærker" fra den anden teksts lodrette tilpasning, hvorved man lægger vægt på søgeordet.
Der er ingen tvivl om, hvad siden er fremme. Succes måles ikke af, hvor strenge elementer er i overensstemmelse med designprincipper, men hvor godt siden kommunikerer meddelelsen.
Skrevet udelukkende til Webdesigner Depot af Ben Gremillion. Ben er en freelance skribent og designer hvem løser kommunikationsproblemer med bedre design.
Hvordan følger du landemærker på dine designs? Hvad fungerer bedst for dig og hvad gør det ikke?