Design & produktion
Byg et wireframe før du designer
Struktur før farve og billeder
Et wireframe er en enkel skitse af, hvor tingene skal stå — uden farver, billeder eller finpudset grafik. Det lader dig og kunden blive enige om strukturen, før du bruger timer på detaljer.
- 01
Læs briefen og find målet
Notér hvad siden skal få brugeren til at gøre (købe, tilmelde, læse, kontakte). Det vigtigste mål bestemmer, hvad der skal fylde mest på skærmen.
- 02
List indholdet i prioriteret rækkefølge
Skriv alle elementer siden skal indeholde — overskrift, tekst, knapper, billeder, formular — og ranger dem efter, hvor vigtige de er for målet. Det vigtigste øverst.
- 03
Skitsér kasser, ikke pynt
Tegn indholdet som grå kasser og linjer for tekst. Brug kun kasser, streger og pladsholdere — ingen farver, fonte eller rigtige billeder endnu. Så diskuterer I placering, ikke smag.
Kan du forklare siden med kun grå kasser, holder strukturen.
- 04
Tegn mobil og desktop hver for sig
Lav en smal version (telefon) og en bred version (computer). Beslut allerede her, hvad der stables oven på hinanden på mobil, og hvad der står ved siden af hinanden på desktop.
- 05
Test flowet med et menneske
Vis wireframet til en kollega eller kunden og bed dem pege på, hvordan de ville løse opgaven. Fanger du forvirring her, er det gratis at rette; fanger du den efter design og kode, er det dyrt.
Bygget på uddannelsens artikel «UX, wireframes og brugertest»