Hopp til innhold

Layout

For at løsningene våre skal fremstå som like, er det viktig at de følger de samme prinsippene for layout. I tillegg skal de bruke fargene, komponentene og typografien vår. I våre løsninger bruker vi rikelig med luft for å dele opp og gruppere innhold. På den måten får vi en god sidestruktur, som gir en behagelig brukeropplevelse, og hindrer at brukeren blir overlesset med informasjon.

Rutenett (grid) og responsivitet

Vi har ikke et fast rutenett. Velg det rutenettet eller den metoden som fungerer best for den løsningen du jobber med.

  • Pass på at løsningen er responsiv og fungerer godt på alle flater.
  • Undersøk hvilke flater løsningen bruker mest, og pass spesielt på at designet oppfører seg optimalt på disse flatene.

Du kan lese mer om responsivt design og breakpoints her.

Justere innhold

Du kan enten høyre- eller venstrejustere elementer. Tekst skal alltid være venstrejustert. Elementer kan også oppta hele sidebredden.

Interaktive og funksjonelle elementer skal alltid følge det rutenettet som er satt for løsningen. Bilder og bakgrunnsflater kan plasseres mer fritt. Vi midtstiller ikke elementer.

Bilder

Bilder kan gå utenfor bakgrunnen, og ha ulike effekter, for eksempel parallax, for å skape ønsket inntrykk. Les mer om hvordan vi bruker bilder her.

Gruppere innhold

Det er viktig å gruppere innhold som hører sammen, slik at siden får et oversiktlig hierarki. Vi har flere virkemidler for å oppnå dette. Først og fremst bruker vi luft og typografi. Deretter kan vi fremheve viktig innhold ved bruk av bakgrunnsflater. Hvis det er behov for det, kan vi også bruke bokser og linjer.

1. Luft

I hovedsak skiller vi innhold ved å bruke godt med luft. Elementer som hører sammen står tettere enn elementer som ikke gjør det. Vi har et sett med spacing-blokker, som vi bruker for å få samme vertikale mellomrom på tvers av løsninger. Velg et sett på tre til fire spacing-blokker, som du bruker igjennom løsningen.

1.1 Spacing-skala

Spacing er viktig for å skape system, hierarki og god rytme på tvers av løsninger. Se retningslinjer for spacing her.

2. Typografi

Tydelig typografi gjør det enklere å skille innhold. Se retningslinjer for typografi her.

3. Bakgrunnsflater

Vi bruker bakgrunnsflater når vi vil utheve og skille innhold fra hverandre. Hvis luft ikke er nok, kan du bruke en bakgrunnsflate i en av våre hovedfarger, for å gi oppmerksomhet til utvalgt innhold. Bakgrunnsflater kan gå helt ut i kanten eller ha marger. Husk å teste at bakgrunnsfargen og innholdet tilfredsstiller krav for universell utforming. Se retningslinjer for farger og for universell utforming.

4. Bokser

Vi bruker bokser sparsomt. Vi legger informasjon i en boks bare når vi har informasjon og elementer som må stå tydelig uthevet og atskilt fra annet innhold. Kortkomponenten er et eksempel på en boks.

5. Linjer

Hvis det er viktig å spare plass, kan vi skille innhold fra hverandre med delelinjer. Dette er vårt siste virkemiddel, og vi bør bruke det så sjelden som mulig. Spør deg selv om du heller kan skille innhold fra herandre med luft.

Eksempler på layout

Som nevnt – for at løsningene våre skal fremstå som like, er det viktig at de følger de samme prinsippene for layout. Om du er i ferd med å lage noe som havner i en av kategoriene under, se om du kan bruke samme layout.

Skjemadesign og skjemavalidering

Skjemaer er viktige i Fremtinds løsninger og vi ønsker at de skal være konsekvente. Se retningslinjer for design av skjemaer og skjemavalidering her.

Feilsider

Vi har to hovedtyper av feilside:

  1. Siden finnes ikke (404 Not Found)
  2. Det har skjedd en feil med tjenesten eller underliggende tjeneste (ulike 500-feil)

På begge typer av feilside ønsker vi å forklare for brukeren hva som har gått galt og gi konkrete veier videre.

Et eksempel på en 404-side kan du se her i portalen. For andre type feil har vi et eksempel uten feilmelding og et eksempel med feilmelding.