7.3 Wireframing og prototyping

Wireframing og prototyping

Før du begynner å kode eller designe i detalj, er det viktig å planlegge strukturen. Wireframes og prototyper lar deg teste ideer raskt og billig, før du investerer tid og penger i utvikling. Å oppdage et problem i en papirskisse tar fem minutter å fikse - å oppdage det i en ferdig app kan ta uker.

I dette kapittelet skal du lære:
- Forskjellen mellom skisser, wireframes og prototyper
- Lo-fi og hi-fi wireframing
- Prototypingverktøy som Figma
- Den iterative designprosessen

Fra skisse til prototype

Skisse (sketch): Raske tegninger på papir. Brukes til å utforske mange ideer raskt. Ingen detaljer, bare konsepter. En designprosess bør starte med mange skisser.

Wireframe: En strukturell plan for en side eller skjerm. Viser plassering av elementer uten visuelt design. Bruker grå bokser, linjer og plassholdertekst.

Mockup: Et detaljert visuelt design som viser hvordan det ferdige produktet vil se ut, med farger, bilder og typografi. Ikke interaktiv.

Prototype: En interaktiv modell som kan klikkes gjennom. Simulerer brukeropplevelsen uten å faktisk fungere teknisk.

Lo-fi vs. hi-fi

Lo-fi (low fidelity): Enkle, raske representasjoner. Papirskisser, enkle wireframes. Fordeler: Rask å lage, billig å endre, inviterer til tilbakemeldinger fordi det ser uferdig ut.

Hi-fi (high fidelity): Detaljerte, polerte representasjoner som ligner det ferdige produktet. Fordeler: Realistisk testing, viser visuelt design. Ulemper: Tar lenger tid, folk kan fokusere på detaljer i stedet for konseptet.

Wireframing i praksis

Elementer i en wireframe:
- Rektangler for bilder (med X-kryss for å indikere bilde)
- Horisontale linjer for tekst
- Bokser for navigasjon, knapper og skjemafelter
- Tykke bokser for overskrifter
- Plassholdertekst ("Lorem ipsum" eller ekte tekst)

Strukturer å planlegge:
- Navigasjonens plassering (topp, side, bunn)
- Innholdshierarki (hva er viktigst?)
- Handlinger brukeren skal gjøre (knapper, lenker)
- Responsivt design (hvordan ser det ut på mobil vs. desktop?)

Verktøy:
- Papir og blyant: Raskest for tidlige skisser
- Figma: Gratis, nettbasert designverktøy, industristandard
- Balsamiq: Spesialisert wireframing-verktøy med skisseaktig stil
- Adobe XD: Adobes design- og prototypingsverktøy

Prototyping

En prototype lar deg teste interaksjoner uten å kode. I Figma eller lignende verktøy kobler du skjermbilder med klikkbare lenker.

Prototypingens fordeler:
- Test ideer tidlig og billig
- Avdekk navigasjonsproblemer
- Kommuniser ideen til teamet og oppdragsgivere
- Spar tid og penger ved å fange feil tidlig

Den iterative designprosessen

1. Skissere: Utforsk mange ideer raskt på papir
2. Wireframe: Lag strukturerte wireframes av de beste ideene
3. Prototype: Gjør wireframene interaktive
4. Test: La brukere prøve prototypen
5. Iterer: Forbedre basert på tilbakemeldinger
6. Gjenta steg 2-5 til løsningen fungerer godt

Hver runde gir ny innsikt som forbedrer designet. Tre raske iterasjoner gir nesten alltid et bedre resultat enn å bruke all tiden på én perfekt versjon.

Oppsummering

- Wireframes er enkle skisser som viser layout og innholdsstruktur uten visuell detaljering.
- Prototyper tester interaksjoner og brukerflyt før utvikling starter.
- Figma er et populært verktøy for wireframing og prototyping.
- Lo-fi-prototyper (papir) er raske å lage, hi-fi-prototyper ligner det ferdige produktet.
- Den iterative designprosessen forbedrer løsningen gjennom gjentatte runder med testing.
- Tidlig testing med enkle prototyper sparer tid og penger i utviklingen.