7.3 Wireframing og prototyping

Wireframing og prototyping

Før du byrjar å kode eller designe i detalj, er det viktig å planleggje strukturen. Wireframes og prototypar lèt deg teste idear raskt og billeg, før du investerer tid og pengar i utvikling. Å oppdage eit problem i ei papirskisse tek fem minutt å fikse - å oppdage det i ein ferdig app kan ta veker.

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

Frå skisse til prototype

Skisse (sketch): Raske teikningar på papir. Blir brukt til å utforske mange idear raskt. Ingen detaljar, berre konsept. Ein designprosess bør starte med mange skisser.

Wireframe: Ein strukturell plan for ei side eller skjerm. Viser plassering av element utan visuelt design. Brukar grå boksar, linjer og plasshaldartekst.

Mockup: Eit detaljert visuelt design som viser korleis det ferdige produktet vil sjå ut, med fargar, bilde og typografi. Ikkje interaktiv.

Prototype: Ein interaktiv modell som kan klikkast gjennom. Simulerer brukaropplevinga utan å faktisk fungere teknisk.

Lo-fi vs. hi-fi

Lo-fi (low fidelity): Enkle, raske representasjonar. Papirskisser, enkle wireframes. Fordelar: Rask å lage, billeg å endre, inviterer til tilbakemeldingar fordi det ser uferdig ut.

Hi-fi (high fidelity): Detaljerte, polerte representasjonar som liknar det ferdige produktet. Fordelar: Realistisk testing, viser visuelt design. Ulemper: Tek lengre tid, folk kan fokusere på detaljar i staden for konseptet.

Wireframing i praksis

Element i ein wireframe:
- Rektangel for bilde (med X-kryss for å indikere bilde)
- Horisontale linjer for tekst
- Boksar for navigasjon, knappar og skjemafelt
- Tjukke boksar for overskrifter
- Plasshaldartekst ("Lorem ipsum" eller ekte tekst)

Strukturar å planleggje:
- Plasseringa av navigasjonen (topp, side, botn)
- Innhaldshierarki (kva er viktigast?)
- Handlingar brukaren skal gjere (knappar, lenker)
- Responsivt design (korleis ser det ut på mobil vs. desktop?)

Verktøy:
- Papir og blyant: Raskast for tidlege skisser
- Figma: Gratis, nettbasert designverktøy, industristandard
- Balsamiq: Spesialisert wireframing-verktøy med skisseaktig stil
- Adobe XD: Design- og prototypingsverktøyet til Adobe

Prototyping

Ein prototype lèt deg teste interaksjonar utan å kode. I Figma eller liknande verktøy koplar du skjermbilde med klikkbare lenker.

Fordelane med prototyping:
- Test idear tidleg og billeg
- Avdekk navigasjonsproblem
- Kommuniser ideen til teamet og oppdragsgjevarar
- Spar tid og pengar ved å fange feil tidleg

Den iterative designprosessen

1. Skissere: Utforsk mange idear raskt på papir
2. Wireframe: Lag strukturerte wireframes av dei beste ideane
3. Prototype: Gjer wireframane interaktive
4. Test: Lat brukarar prøve prototypen
5. Iterer: Forbetr basert på tilbakemeldingar
6. Gjenta steg 2-5 til løysinga fungerer godt

Kvar runde gjev ny innsikt som forbetrar designet. Tre raske iterasjonar gjev nesten alltid eit betre resultat enn å bruke all tida på éin perfekt versjon.

Oppsummering

- Wireframes er enkle skisser som viser layout og innhaldsstruktur utan visuell detaljering.
- Prototypar testar interaksjonar og brukarflyt før utvikling startar.
- Figma er eit populært verktøy for wireframing og prototyping.
- Lo-fi-prototypar (papir) er raske å lage, hi-fi-prototypar liknar det ferdige produktet.
- Den iterative designprosessen forbetrar løysinga gjennom gjentekne rundar med testing.
- Tidleg testing med enkle prototypar sparar tid og pengar i utviklinga.