Wireframe vs mockup vs prototype: hvad er forskellen?

Fem mennesker sidder om et mødebord og læser den samme kravspecifikation: “Kunden skal kunne se sine ordrer og genbestille.” Alle nikker. Tre uger senere viser det sig, at salgschefen forestillede sig en liste, økonomichefen en tabel med fakturaer, og direktøren en app med én stor knap. Et wireframe på skærmen den første dag havde afsløret uenigheden på ti minutter. Det er hele idéen med wireframes, mockups og prototyper: at gøre et produkt konkret, før det er dyrt at ændre.

Ordene bliver ofte brugt i flæng, også af bureauer, og det gør det svært at sammenligne tilbud. Når ét tilbud indeholder “design af 10 skærme” og et andet “klikbar prototype”, kan det være vidt forskellige leverancer. Derfor gennemgår vi her, hvad hver ting er, hvad den bruges til, og hvad den typisk koster.

Hvad er forskellen på wireframe, mockup og prototype?

Den vigtigste kolonne er “Pris for at ændre”. Et wireframe kan tegnes om, mens kunden sidder ved bordet. En mockup kræver, at designeren opdaterer farver, komponenter og tilstande. Og når produktet først er kodet, kan den samme ændring tage dage. Det er derfor, rækkefølgen betyder så meget.

Hvad er et wireframe, og hvad skal det indeholde?

Et wireframe er en skitse af et skærmbillede i gråtoner. Det viser, hvilke elementer der er på siden, hvor de står, og hvad der er vigtigst. Farver, billeder og skrifttyper er bevidst udeladt, så samtalen handler om indhold og funktion. Wireframes kan være lo-fi, tegnet på papir på fem minutter, eller mid-fi, lavet i Figma med rigtige overskrifter og realistiske data. Mid-fi er ofte det mest nyttige niveau, fordi rigtige tekster og tal afslører problemer, som “lorem ipsum” skjuler.

• Overskrifter og de vigtigste tekster, gerne i et realistisk udkast.
• Navigation og hvordan man kommer videre fra skærmen.
• Knapper og handlinger med deres rigtige tekst.
• Felter i formularer og hvilke der er obligatoriske.
• Realistiske data: lange navne, tomme lister, mange rækker.
• Noter om adfærd: hvad sker der ved klik, fejl og tom tilstand.

Hvad er en mockup, og hvornår har I brug for den?

En mockup er et statisk billede af, hvordan det færdige skærmbillede kommer til at se ud. Den bygger på wireframet og tilføjer jeres farver, typografi, ikoner, billeder og komponenter i alle tilstande. Mockups bruges til at godkende det visuelle udtryk, tjekke kontrast og læsbarhed og give udviklerne et præcist mål at bygge efter. I større projekter samles komponenterne fra mockups i et designsystem, så de samme knapper og felter genbruges overalt. Det gør både design og udvikling hurtigere, og vi har skrevet mere om det under designsystemer.

Husk, at en mockup kun viser én skærmstørrelse ad gangen. De fleste besøgende på en typisk hjemmeside kommer fra mobilen, så de vigtigste skærme bør designes til mobil først og derefter til computer. Bed om mockups i mindst to bredder, og tjek, at tabeller, menuer og formularer fungerer på en lille skærm. Det er også her, I skal kigge på kontrast og tekststørrelser, hvis I er omfattet af tilgængelighedsloven, fordi rettelser i mockup-fasen er langt billigere end rettelser i den færdige kode.

Hvad er en prototype, og hvorfor er den klikbar?

En prototype forbinder skærmene, så man kan klikke sig igennem et flow, som var det et rigtigt produkt. Den kan være lavet af wireframes, når I vil teste strukturen hurtigt, eller af færdige mockups, når I vil teste hele oplevelsen eller vise produktet til investorer og ledelse. Prototypen er det mest effektive værktøj til brugertest, fordi brugerne reagerer på noget, de kan prøve, i stedet for at svare på hypotetiske spørgsmål.

Klikbar prototype i Figma eller kodet prototype?

I de fleste projekter er en klikbar prototype i Figma det rigtige valg. En kodet prototype giver mening, når det svære er teknisk, fx realtidsdata, kort eller en avanceret kalender. Læs mere om, hvordan vi bygger og tester klikbare prototyper.

Hvornår skal I bruge wireframe, mockup eller prototype?

Hvad koster wireframes, mockups og prototyper?

Prisen afhænger af antal skærme, kompleksitet og om der skal research og test med. Med en freelance UX-designer til typisk 600–750 kr. i timen og bureauer på typisk 1.100–1.300 kr. i timen kan I bruge tabellen herunder som et groft overslag. Timetallene er typiske niveauer for et afgrænset projekt med 8–12 skærme.

Et regneeksempel: en grossist med 15 ansatte vil give sine B2B-kunder en portal til ordrer og genbestilling. Ti mid-fi wireframes, en klikbar prototype og test med fem kunder tager typisk 35–55 timer. Testen viser, at kunderne vil genbestille fra en liste over tidligere ordrer frem for at søge i kataloget. Den indsigt koster et par timer at indarbejde i wireframes. Var den kommet efter lanceringen, havde det været en ombygning. Vil I se flere priser pr. leverance, så læs hvad UX design koster.

Hvordan går man fra skitse til færdigt produkt?

Overgangen fra Figma til kode er der, hvor mange projekter taber kvalitet. Vi har beskrevet, hvad designerne skal levere, og hvordan design tokens hjælper, i guiden fra Figma til hjemmeside.

Hvilke fejl ser vi oftest?

• Wireframes med “lorem ipsum”, som skjuler, at teksterne ikke kan være der.
• Kun den perfekte situation designes. Tomme lister, fejl og lange navne glemmes.
• Mockups godkendes af ledelsen uden at være testet med brugere.
• Prototypen bliver så flot, at ingen tør ændre den efter testen.
• Designfiler ligger i designerens private konto og forsvinder med samarbejdet.
• Mobilversionen tegnes til sidst, selvom de fleste brugere kommer fra mobilen.

Tjekliste: hvad skal I bede om i et tilbud?

1. Hvor mange skærme er inkluderet, og hvilke flows dækker de?
2. Er wireframes i lo-fi eller mid-fi, og bruges der rigtige tekster?
3. Er der en klikbar prototype, og bliver den testet med brugere?
4. Hvor mange brugere testes der med, og får vi en rapport?
5. Indeholder mockups alle tilstande: tom, fejl, indlæser og succes?
6. Designes mobil og computer begge to?
7. Hvem ejer designfilerne, og hvor ligger de?
8. Hvor mange rettelsesrunder er inkluderet?

Er I i tvivl om forskellen på det strukturelle og det visuelle arbejde, så læs UX vs UI design. Og vil I have en prototype, som I kan teste eller pitche med, kan I få en fast pris inden for 24 timer.