Layout tips og teknikker

Layout setter rammen for hvordan vi kommuniserer på en side. Når du bruker riktig komposisjon, hjelper det brukeren å navigere innholdet på en meningsfull, nyttig og visuell fin måte. Her finner du tips og triks som kan hjelpe deg med å organisere og tilpasse innholdet for en vellykket brukeropplevelse.

Lag og bryt mønstre

Komposisjon i design er faktisk ganske lik musikalsk komposisjon. Ting som melodi, rytme, harmoni, klangfarge og form kan brukes på begge områder. Akkurat som i musikk, handler design om å finne den rette balansen mellom repetisjon og variasjon for å skape enhet og interesse.

Er det for mye av det samme og forutsigbart? Eller er det helt kaotisk og mangler struktur? Hvordan henger elementene sammen, og hvordan passer de inn i rommet rundt?

Ved å bruke logisk repetisjon av elementer, mål, former, forhold og proporsjoner, kan vi oppnå konsistens og kvalitet. Og når det er passende, kan litt ekspressiv variasjon bryte opp forventningene og gi visuell interesse.

Strukturell rytme

Når vi snakker om rytme, er det like viktig å tenke på det som ikke er der, som det som faktisk er. Tenk på musikken; hvis du bare gjentar noter uten noen form for struktur, blir det ikke bra. Men når notene er plassert med jevne mellomrom, får du en skikkelig god rytme.

Grid layout

Grid-layouten er et verktøy som OBOS-designerne bruker for å skape en rytme i designet. Den gir en god struktur og proporsjoner som hjelper til med å veilede designet på tvers av ulike medier. Når man bruker den smart, får man harmoniske forhold mellom lerretet og innholdet, samtidig som man viser frem vårt unike perspektiv.

Dimensjoneringsskala

I stedet for å bruke faste vertikale inndelinger som på en nettside, kan størrelsesskalaen være super nyttig for å skape en god vertikal rytme. Akkurat som med en typeskala, hjelper størrelsesskalaen med å begrense størrelsesområdet, noe som gir bedre konsistens og rytme, samtidig som den gir rom for mange forskjellige størrelser.

Redaksjonell rytme

Å bruke repetisjon og variasjon av større designenheter gir en god flyt i redaksjonelt arbeid. Dette ser vi ofte i design for flere sider eller på nettsider som ruller, der seeren får oppleve én del av helheten om gangen.

Dette konseptet er godt kjent innen musikk. Musikkform handler om strukturen i et musikkstykke, hvor man kombinerer ulike enheter. Hver enhet får en bokstav, og gjentatte enheter får samme bokstav. I AABA-formen, for eksempel, har A-enhetene en lik melodisk stil, mens B-enheten gir en spennende variasjon fra A-enhetene.

I designet er det innholdet som driver de større visuelle enhetene. Lignende typer innhold kan ha en lik struktur, som for eksempel de samme dimensjonene, typestørrelser og justeringer. Tenk på hvordan enheter kan gjentas, og hvordan forskjellige enheter kan bryte opp monotonien av gjentatte elementer. Repetisjon av enheter på tvers av designene skaper en fin sammenheng.

La det puste

En vanlig feil som mange designere og ikke-designere gjør, er å overfylle designet med for mange elementer. Selv om det å utnytte all tilgjengelig plass kan redusere lerretsstørrelsen eller scrolle-avstanden, kan det faktisk gjøre mer skade enn nytte for hvordan folk oppfatter informasjonen. Når det er for mye innhold uten struktur og luft, blir designet ditt vanskelig å forstå.

Luft gir en visuell pause mellom elementene, så øynene kan få hvile. Det hjelper til med å skille ting fra hverandre eller samle dem for å vise hva som er viktigst. Luft gir oppsettet et rent og tilgjengelig preg, samtidig som det opprettholder et innholdsrikt design.

Blikkfang

Design fungerer best når brukeren blir guidet gjennom komposisjonen med hjelp av hierarki. Et godt hierarki lager visuelle inngangspunkter som leder blikket fra ett element til et annet, i rekkefølge etter hva som er viktigst. Uten dette må brukeren selv finne ut hva som er viktig blant like elementer, noe som kan gjøre designet flatt og opplevelsen dårlig.

Informasjonshierarki

Typografisk hierarki er som et navigasjonssystem som gjør det lettere å forstå komplisert informasjon. Tenk på hvordan en bok er lagt opp; størrelsen, stilen og plasseringen av teksten bestemmer ikke bare rekkefølgen du leser i, men viser også hvordan innholdet henger sammen. Når du bruker typeskalaen smart og har en god forståelse av gestaltprinsipper, blir designet ditt mye enklere å navigere og forstå.

Komposisjonsflyt

Å legge til rette for øyebevegelser gjennom komposisjonen skaper et mer interessant design. Et fokuspunkt tiltrekker seg umiddelbart øyet til ett område av lerretet. Sekundære og tertiære elementer trekker deretter øyet over lerretet, noe som skaper mer engasjement mellom brukeren og designet. Dette gjøres best gjennom asymmetriske layouter, der gjennomtenkte forhold mellom elementene gir et mer visuelt stimulerende design. Det er viktig å planlegge øyets bevegelse for å veilede betrakteren til det tiltenkte resultatet.

Mestre Asymmetri

Selv om perfekt symmetri kan se bra ut og gi en følelse av stabilitet, er det ofte ikke den beste måten å lage en spennende komposisjon på. Balansert asymmetri funker som regel bedre for å skape bevegelse, liv og interesse ved å legge opp elementene på en mer kreativ måte. Det krever også litt mer planlegging av elementene for å få det til.