Layoutet er strukturen som støtter de visuelle komponentene i et grensesnitt. Det å gi synet hjelp med å tolke innholdet via grupperinger og prioritering av innhold hjelper brukeren å finne mening med innholdet.  Hvordan innholdet er satt opp teknisk er usynlig for brukeren, men relevant for navigasjon.
Et godt layoutdesign er relatert til mål og gjenspeiles i en god brukeropplevelse. Derfor kan vi si at riktig oppsett gjør at brukeren raskt finner det han leter etter. Dette gjenspeiles også i flere konverteringer og mer tid på nettstedet (engasjement).

Det å bruke avstander godt hjelper med å fokusere i innhold, reduserer distraksjoner og forbedrer sideskanningsevnen. Avstander definerer også kategorier og gir logisk mening til brukerens mentale prosesser. Ved å utvikle dette med en kreativ og dynamisk layout får du et brukervennlig, men også estetisk UI-design.
For å lage en layout må vi vite om prinsippene for nærhet og negativt rom.  I denne studien vil vi presentere syv ressurser for profesjonell opprettelse av en stående layout.

Størrelse

Størrelseshierarki letter brukerens beslutning. Størrelse er den tydeligste måten å informere brukeren om hva som er viktig på et nettsted, det er grunnen til at hjemmesideoppsettene vanligvis har hierarkiske blokker med informasjon.

Det gjeldende tradisjonelle navigasjonsregelsettet kan deles inn i to typer, navigasjonssider og forbrukersider. Når en bruker går inn på hjemmesiden til et nettsted, er de vanligvis en navigasjonside, enten for å oppdage innhold eller for å søke etter noe spesifikt. Dette er grunnen til å lage hierarki-blokker, som fungerer som inngangsdører for alt grensesnittinnhold.

På den annen side, når brukeren har funnet det de leter etter og klikker på en blokk, er det de trenger nå å konsumere innholdet, noe som gjør hierarkiene mindre relevante på denne siden. I dette scenariet er det mest funksjonelle og vennlige designet å vise informasjonen på en balansert måte for å lette den naturlige lesningen av synet. Alt har å gjøre med målet for hver side.

Den visuelle reisen

Å være klar over den visuelle reisen gir deg kraften til å manipulere den. Å veilede stien langs en foreslått bane er mye vennligere enn å tvinge gjennom skanning av innhold, derfor må den visuelle reisen være kjent i designet.

Det er veldig vanlig å begynne å designe med den falske oppfatningen om at alle elementene må tiltrekke seg oppmerksomhet, men å designe uten noen prioritert rekkefølge resulterer i mangel på klarhet og mye støy i kommunikasjonen. Selv om det er vanskelig å ta disse beslutningene, spesielt i små områder som for eksempel en smarttelefonskjerm, kan det å ha følgende betraktninger gjøre det lettere:

Kjenne til informasjonen, forstå hva innholdet handler om, målet med siden og hvilke elementer som vil bli inkludert.
Skisser innholdet bevisst, lag en layout og begynn å lage alternative versjoner basert på den etablerte prioriteringsrekkefølgen.
Bekreft den visuelle reisen fra tid til annen, for å gå tilbake til designet med ‘friske øyne’ er en fin måte å gjenkjenne bedre muligheter til å forbedre utformingen og den visuelle banen.

Asymmetri

Asymmetriske utforminger uttrykker mer bevegelse og dynamikk. Asymmetri har en tendens til å være mer uttrykkelig for øyet på grunn av lovene om sammensetning og balanse, det letter elementenes hierarki og gir dem bevegelse.

Hovedideen er å balansere grensesnittelementene på en slik måte at den ene delen ikke veier mer enn den andre, men uten å være strengt opplagt som i symmetriutforminger. Dette tvinger oss til å definere et hierarki i oppsettet og å leke med elementer som tekster, ikoner, bilder, mellomrom og farger på en mer kreativ måte.

Den visuelle reisen til en asymmetrisk komposisjon går fra hovedelementet til de sekundære elementene, og uttrykker en viss spenning mellom dem og et mangfold av følelser som vil avhenge av design og stil. Det er veldig viktig å omgi elementene med passende negativt rom. Kort sagt kan man si at asymmetri er en skjult symmetri, som er mer interessant for sinnet.

Avstander og rom

Riktig avstand definerer oppsettet. Siden oppsettet er dokumentert av avstanden mellom elementer eller negativt rom, avhenger dens form av hvor mye noen elementer er nærmere enn andre.

På Chilimobil.no kan du se gruppering av elementer som utgjør en layout, mellomrommet mellom den første gruppen (spotillustrasjon og tekst), den andre gruppen, USPér, den tredje gruppen, nyhet bedrift og den fjerde gruppen (prisplanene) fungerer som en støtte for strukturen.  På denne subtile måten utgjør det negative rommet en layout.

Disse mellomrommene inneholder sammensetningen og kobler eller kobler fra elementene på en slik måte at det skapes assosiasjoner mellom dem. De viktigste visuelle assosiasjonene bestemmes av oppsettet, så de må være designet for dette formålet fra begynnelsen. Vi må også huske på at avstanden mellom ett element og et annet må være en refleksjon av hva brukeren har i tankene som beslektet og ikke relatert, og at isolering av en gruppe elementer gir mer lesbarhet og betydning.

Brudd

Brudd på et tradisjonelt opplegg holder brukerens oppmerksomhet. Gjentakelsen av skjemaene har en tendens til å kondisjonere sinnet, så endringen av skjemaet tiltrekker alltid brukerens oppmerksomhet og får den besøkende til å vente på mer informasjon.

På Digitaldagen.no vises foredragsholderne på en slik måte at det skaper brudd i leserens lesing. Bilder 2,3,4,5, 7 og 8 har samme dimensjon, men bilder 1 og 6 bryter formatet for å gjøre den visuelle reisen mer dynamisk.

Med fokus på å tiltrekke seg oppmerksomhet vil endringen av det samme skjemaet knyttet til den visuelle loven om repetisjon og justering, der ethvert element som hører til en gruppe og som bryter fremmedgjøringen eller andre kjennetegn, gjøre elementet mer slående og interessant for øyet.

Å holde på brukerens oppmerksomhet og gjøre opplevelsen spennende har mye å gjøre med bevegelse, skalaer,»clutter» og å bryte noen regler. Det vanlige er behagelig, men det innovative blir minneverdig.

Posisjonering

Overlapping av ett element på et annet skaper dybde. Selv om oppsettet lever i en todimensjonal verden, vil det å plassere ett element på toppen av et annet utvide dybden gi realisme til komposisjonen.

Denne skjermdumpen fra Digitaldagen.no viser overlegget til tekstene: “Årets”, “Konferanse”, “Tilgang til alle foredrag” og overlay med bilde fra konferansen balanserer den flate verdenen av brukergrensesnittdesign og den tredimensjonale stilen som grafisk design kan ha.

Bruken av forskjellige lag gjør at designet føles mer realistisk og visuelt mer interessant. En av de viktigste reglene når tekstet overlapper bilfrt er at det skal være nok kontrast til bakgrunnen for å unngå lesbarhetsproblemer. Hvis synet ikke enkelt kan kjenne igjen karakterene, vil opplevelsen være stressende. Det er også viktig å bruke en såkalt «fallback» slik at leseprogrammer enkelt kan lese denne typen design.

Grid/Rutenett

Bruken av rutenettet er matematisk behagelig for øyet. Selv om de er usynlige i designet, letter rutenettene plasseringen av elementene, skaper en proporsjonal fordeling og gir en høy konsistens til grensesnittet.

Å designe med riktig avstand er en virkelig utfordring, men det er enda mer utfordrende å opprettholde konsistensen på denne avstanden gjennom hele UI-strømmen. Rutenettet er standardløsningen for dette. Måten den inneholder elementene på vil gi en nøyaktig proporsjon, men vi må huske at oppsettet kan variere betydelig, avhengig av designerstil og hvordan han vil vise informasjonen. Systematisk praksis er den beste måten å mestre bruken av nett.

Oppsummert

Selv om det er et stort utvalg av oppsett og måter informasjon kan distribueres på er den viktigste regelen å holde det enkelt. De aller fleste brukere er ikke i et grensesnitt på jakt etter design, men etter informasjonen designet tilrettelegger for. Tross alt er komplekse strukturer vanskelig å forstå.

Selv om det ikke er en lett oppgave å kunne kombinere estetiske prinsipper og vitenskapen om kognitive prosesser, er riktig bruk av begge deler vesentlig for profesjonell UI-design. Hvis vi skal takle et nytt prosjekt, la oss huske å gi oss selv den nødvendige kreative friheten, men alltid basert på en struktur som brukeren anerkjenner og som har vist seg å fungere.