Bruke landemerker gjør sideoppsett enkelt
Et design kan ha innvirkning. Det kan ha stil. Men å ha disse er ikke nok.
For å fungere bra, må et design ha elementer som spiller av hverandres styrker. Heldigvis har hvert stykke innhold iboende retningslinjer.
Layout, eller innholdsordning på en nettside, er avgjørende for et designs suksess. Layout prioriterer blant annet innhold som fører folk fra ett element til det neste.
Hvis gjort riktig, vil folk være så interessert i innholdet at de ikke vil legge merke til noe annet.
Les videre for flere detaljer og tips for å lage layouter som fungerer i designene dine.
Med eksemplet nedenfor vil de fleste merke enten bildet eller overskriften først, deretter teksten og til slutt koblingene.
De merker kanskje ikke at overskriften, teksten og modellens ansikt er satt til en tredjedel og to tredjedeler på siden (heder tredjedelsregel), eller at overskriften og koblingene er skrevet i farger som er samplet fra modellens lepper, eller at Kurven på skulderen hennes fører øyet mot samtalene til handling.
Tekst, foto og overskrift utgjør en sammensetning. Hvis en faller tomt, svikter hele stykket.
Arrangement basert på gjensidig respekt
Hvor setter vi ting? La dem fortelle oss. Kjennene til grafikk, bilder og biter av tekst blir tydelige når de møtes på en side. Noen jobber sammen bedre enn andre, og noen jobber bare når de plasseres på en bestemt måte. For eksempel fungerer vårt layout teknisk på to måter:
Figur 1 viser oppsettet som brukes i vårt eksempel ovenfor. Grå blokker representerer overskriften, bildet og teksten.
Figur 2 viser hvordan de samme prinsippene ville gjelde for inversjonen: ett stort element avbalansert av to mindre elementer. Dette bestemte bildet ser bedre ut til høyre, skjønt.
Vår modell ser til venstre. I figur 1 ser hun på teksten. I figur 2 ser hun bort fra teksten. Det kan ha virket hvis hun så på kameraet, men fordi hun ser bort, mister det noe. Ikke mye, men nok til å gjøre noe.
Modellen viser vekselvis interesse for teksten og, når den er omvendt, ignorerer den. Ordningen av elementer etablerer enten en positiv eller negativ holdning.
Justering basert på landemerker
Noen ganger kan ting som lager elementer på en bestemt måte også gi ledetråder om plass og justering. Vi merket hvordan modellens øyne peker mot venstre, men bildet og teksten inneholder andre visuelle tegn.
Impliserte linjer mellom landemerker i typografien og bildet florerer i denne sammensetningen:
- Modellens øye og lepper og kanten av nesen hennes møter kanten av høyre kolonne med tekst.
- Den venstre kolonnen med tekst møter den venstre kanten av overskriften. Den når nesten kanten av modellens hår, men faller kort for å holde seg i overensstemmelse med høyre kolonne.
- Modellens ansikt (spesielt øynene og munnen) definerer den vertikale delen av overskriften.
- Bunnen av bildet markerer den nederste tredjedel av sammensetningen (i tredjedelsregelen).
- Modellens øyne er en tredjedel fra toppen av komposisjonen.
- Senteret av modellens ansikt og høyre kant av overskriften møtes på en tredjedel og to tredjedeler av sammensetningens bredde.
Noen landemerker har mer makt enn andre. Designere og fotografer kan for eksempel diskutere om modellens øyne er mer innflytelsesrike enn silhuetten. Men en layout basert på noen landemerker er bedre enn et oppsett som ignorerer dem.
Bruke funksjoner for å skape harmoni
Ikke-designere som prøver seg på layouter, arrangerer noen ganger elementer basert på hvordan de passer på siden. Plassen bør respekteres, men det fører ikke alltid til den beste designen.
Figur 5 justerer elementer til sidens plass og baserer alt på kanvasens grenser.
Figur 6 baserer imidlertid oppsettet på fokuspunkter i bildet. Resultatet er et mer strømlinet utseende.
Figur 5 er ineffektiv fordi seerne spretter rundt mellom fokuspunkter: til overskriften, ned til ansiktet, opp til teksten. Den enkleste linjen er rett. Derfor gir figur 6 visningen blikket lett fra venstre til høyre, fra ett element til det neste. Kjernen i den andre utformingen er et smalt band som løper langs topplinjen-ansikts-tekstjusteringen.
I disse bildene trekkes leserne til modellens ansikt, overskriften og teksten - vanligvis i den rekkefølgen. Det er tre forskjellige områder å se på. Aligning dem gir layoutet fokus.
Det riktige svaret
Alle tre layoutene nedenfor bruker samme overskrift, bilde og tekstelementer:
Det første oppsettet har det mest "pusterom". Den andre respekterer teksten. Det tredje layoutet bruker negativt mellomrom for å oppnå balanse. Alle tre bruker landemerker, men på forskjellige måter. Er det den beste?
Jakt på et svar kan blinde oss til det opplagte: at flere løsninger kan være like gyldige når elementene fungerer sammen. Visuelle landemerker er muligheter, ikke regler. Ta en titt på det første designet.
Jo mer elementene samsvarer med underforståtte linjer, desto mer vil et ikke-samsvarende element skille seg ut. Her bryter designeren ordet "Landemerker" fra den andre tekstens vertikale tilpasning, og legger dermed vekt på søkeordet.
Det er ingen tvil om hva siden er fremme. Suksess måles ikke av hvor strenge elementer er i overensstemmelse med prinsippene for design, men av hvor godt siden kommuniserer sin melding.
Skrevet utelukkende for Webdesigner Depot av Ben Gremillion. Ben er en frilansskribent og designer hvem løser kommunikasjonsproblemer med bedre design.
Hvordan følger du landemerker på designene dine? Hva fungerer best for deg og hva gjør det ikke?