Design

Moderne design for nettsider og apper

center full-width invert-text

Utvalgte designreferanser

Dips

Dips design

Les mer

Minerva

Minerva design

Les mer

Kontakt oss
 

Vår designprosess

Din nettside eller app skal ikke bare se fantastisk ut, den skal også være enkel i bruk, og gjøre det lett å finne det som er relevant for dine besøkende.

Designet blir best hvis du begynner med det mest verdifulle du har: innholdet ditt. Derfor starter vi designprosessen innenfra og jobber oss utover: Fra innhold til visuelt design.

Vår prosess har tre faser:

  1. Innsikt og analyse
  2. Innholdsstrategi og interaksjonsdesign
  3. Grafisk design

1. Innsikt og Analyse

Målsetninger

Designprosessen begynner med å vite hvem vi designer for, og hva vi ønsker de skal gjøre.

  • Hva er organisasjonens digitale målsetninger?
  • Hvem er brukerne, partnere og konkurrenter?
  • Hvordan brukes dagens kommunikasjonskanaler?

Her er målet å sitte igjen med konkrete digitale målsetninger og målekriterier: Når er nettsiden/appen en suksess?

Møte hos Frontkom

Datainnsamling

Med konkrete målekriterier setter vi nå opp tracking av eksisterende nettsted for å skaffe den nødvendige innsikten om hvor godt disse oppfylles i dag. Slik får vi et godt sammenligningsgrunnlag for det videre arbeidet.

Dette inkluderer for eksempel tilbakemeldingsskjemaer, måloppsett i Google Analytics og brukerundersøkelser via e-post, dashboard med kontinuerlig oppdaterte nøkkeltall (KPI) og en liste over anbefalte tiltak.

Les mer om analyse og innsikt

Analyse dashboard spørsmål

Evaluering av eksisterende design

Sammen går vi gjennom dagens designprofil og retningslinjer for markedsføring. Videre ser vi på faktiske eksempler for å se i hvilken grad designprofilen etterleves, og hvordan materialet fremstår i dag.

Deretter gjør vi en gjennomgang av deres eksisterende nettsted, for å tydeliggjøre hvilke elementer som bør forbedres. 

  • Anbefalte tiltak for å forbedre designprofil og retningslinjer
  • Rapport på brukeropplevelse, Ytelse/hastighet, SEO og sikkerhet

Gjennomgang av eksisterende innhold

Vi gjør oss kjent med alle typer innhold i dagens nettsted, ved å se på både frontend og backend (admin), samt kjøre en automatisert gjennomsøk av nettsiden (scrape) hvis det er snakk om svært mye innhold.

Basert på gjennomgangen, setter vi opp en delt oversikt med elementer som:

  • Innholdstype
  • Målgruppe
  • Kvalitet
  • URL-struktur
  • Egnet for eksport

Dokumentet brukes til videre innholdsarbeid og teknisk oversikt.

Kjernemodellen

Kjernemodellen er en metodikk for innholdsdrevet design der målet er å gjøre nettstedet mest mulig brukervennlig.

Kjernemodellen gjør at vi løser de vanligste problemene sett fra et brukerperspektiv, for eksempel at brukeren finner ikke det han/hun leter etter, eller at landingssider blir fylt opp med irrelevante elementer som skaper frustrasjon

Kjernemodellen gjør at vi utvikler innhold som er:

  • Passende: Innholdet er rett både for organisasjonen og brukeren
  • Nyttig: Hensikten med hver side er tydelig
  • Brukersentert: Tenk som sluttbrukeren
  • Nødvendig: Slett unødvendig innhold!  
kjernemodell_mal

Kundereise

Etter å ha analysert innsikten bedriften din har om brukerne er det lager vi én eller flere personas for de forskjellige målgruppene

Vi setter opp en rekke målgrupper/personas, og diskuterer oss igjennom sluttbrukerens “kundereise”. Dette resulterer i en tidslinje som tydeliggjør brukerens potensielle frustrasjoner.

Når du forstår hvordan personaene tenker og handler kan du tilpasse budskapet med følelser og logikk de responderer på, basert på hvem de er og når du treffer dem i kundereisen.


Les mer om personas og kundereise

Frontkom workshop arbeidsmøte kjernemodellen

2. Innholdsstrategi og interaksjonsdesign

Trådskisser

Trådskisser ("wireframes") brukes for å prioritere rekkefølge, layout og innhold for ulike elementer på ulike sidemaler.

Som regel gjør vi første trådskisser for mobil, for å spisse fokuset mot nettstedets toppoppgaver.

Vi lager som regel en trådskisse per sidemal, eller noen ganger flere, for å ta hensyn til ulike typer innhold. 

For hver wireframe, vurderer vi også hvem som skal besørge innhold for siden, og hvem som skal vedlikeholde den og hvilken rolle siden har i organisasjonens digitale strategi.

Trådskisse - wireframe

Innholdsutvikling

I innholdsutviklingen er kundens fagkunnskap gull verdt, og som regel gjør kunden som gjør det meste av innholdutviklingen, f.eks skrive tekster. Frontkom setter rammer, hjelper til med verktøy og kvalitetssikrer arbeidet. Noen sentrale elementer i innholdsarbeidet er:

  • Stikkord: Enkelhet, lesbarhet, skannbarhet.
  • Format: Riktig valg av tekst, illustrasjoner eller video.
  • Fokus: Kunne denne teksten henvendt seg til én målgruppe, og dermed vært kortere og mer presis?
  • Struktur og kategorisering: Logisk og intuitiv organisering av innholdet

Sidekart

En sidestruktur i et visuelt hierarki gir nyttig oversikt over ulike typer innhold på nettsiden.

Sidekartet gjenspeiles deretter i både brødsmuler, meny og andre navigasjonselementer. Det er også nyttig internt i organisasjonen for å klargjøre ansvarsområder for ulike deler av innholdet.

Sidekart

Brukertesting

Nytt design testes med brukere som ikke har brukt nettsiden før.

Vi gir konkrete oppgaver uten videre instruksjon, og lar brukeren selv prøve seg fram.

Brukertesting danner grunnlaget for videre forbedringer av designet.

brukertesting

3. Visuelt design

Stilplansjer og visuelle designforslag

Hvordan skal nettsidene speile organisasjonens verdier og image?

Sammen blir vi enige om et stiluttrykk ved å sammenstille stilplansjer med inspirasjon. Dette danner et utgangspunkt for helhetlige designforslag som viser ulike visuelle retningsvalg

Stilplansjer

Sidemaler, blokker og designsystem

Nettstedet består av ulike typer sider, men også av ulike typer gjenbrukbare blokker. Når designretningen er satt, designer vi ut disse, og klargjør de for en sidebygger i CMS.

Et designsystem eller styleguide er en designprofil for web. Den er klikkbar, responsive og viser alle de viktigste designelementene.

Styleguide

Responsivt design

HTML og CSS utarbeides “mobil først” med brytningspunkter fra de minste skjermbreddene og trinnløst opp til nettbrett, og videre til desktop fullbredde. Resultatet er en 100% responsiv løsning som er gjennomtestet på alle skjermbredder.

CMS-et tilpasser automatisk bildefilens størrelse til ulike kontekster, basert på blant annet skjermbredde. Frontend testes på 20 ulike nettlesere på PC, Mac, Android, iOS og Windows mobile.

white-iphone-in-portrait-position-macbook-pro-responsive-png-mockup-a12407

Universell Utforming

Frontkom leverer utelukkende prosjekter som støtter Difi’s anbefalte standard (WCAG 2.1 AA). 

Underveis i utviklingen, gjør vi automatiserte og manuelle tester med skjermlesere, analyseverktøy og tester. Tidlig i designprosessen implementerer vi prinsippene for tillatte farger, kontraster, skriftstørrelser og dokumentstruktur. Videre gjør vi koding etter beste praksis for universell utforming.

Frontkom har et godt samarbeid med Difi rundt implementering av UU. Dersom kritieriene for UU endres i fremtiden, vil vi implementere endringene i tråd med nye forskrifter. Vår tolkning av kravene baseres på Difis 50 indikatorer for web.

Les mer om Universell utforming