AI

Automatisering

Branding

Design

Marketing

Procesoptimering

SaaS

SEO

UX

Webudvikling

Mockup er en detaljeret, visuel model eller simulation af et produkt, hjemmeside, app eller design, som viser, hvordan det endelige resultat kommer til at se ud – uden at være funktionel som den endelige løsning. En mockup bruges til at visualisere ideer, præsentere koncepter og indsamle feedback fra interessenter og potentielle brugere, inden man går i gang med den egentlige udvikling.

Hvad kendetegner en mockup?

  • Visuel nøjagtighed: Mockuper er realistiske og viser typografis, farver, layout og overordnet udtryk præcis som den færdige produkt.

  • Statisk og ikke-funktionel: Modsat prototyper har mockuper ikke funktionalitet – man kan ikke klikke, scrolle eller interagere med dem.

  • Fleksibel og let at ændre: Mockuper kan tilpasses og trækkes i flere retninger, så man kan teste forskellige designløsninger, inden man bestemmer sig.

  • Skalerbarhed: De kan laves på komponentniveau eller for hele systemer, fra simple skitser til meget detaljerede, næsten færdige modeller.

  • Digital eller fysisk: Mockuper kan både være digitale billeder/renders eller fysiske modeller, fx af emballage, hardware eller inventar.

Typiske eksempler

  • Web/app-design: Et realistisk billede af, hvordan en hjemmeside eller app ser ud på mobil og desktop – inklusiv menuer, knapper, tekst og fonter.

  • Produktdesign: En 3D-model eller fotorealistisk rendering af et nyt produkt, fx emballage, smartphone eller møbel.

  • Grafisk design: En digital version af en plakat, brochure eller avis, så man kan se eksakt, hvordan det ser ud, inden trykning.

Sådan bruges en mockup i processen

  1. Koncepter og skitser: Designeren laver første version af idéen i hånden eller digitalt.

  2. Wireframe: Man beslutter struktur og indhold uden detaljer.

  3. Mockup: Nu kommer farver, fontvalg, ikoner, billeder, grafiske elementer og layout – så det ser næsten færdigt ud.

  4. Feedback og justering: Holdet og eventuelt kunden/brugerne giver input, så mockupet kan forbedres.

  5. Videreudvikling: Når mockupet er godkendt, laves prototype og reel udvikling.

Hvorfor er mockuper vigtige?

  • Tydelig kommunikation: Alle stakeholders kan se og diskutere, hvordan produktet kommer til at se og føles.

  • Risikominimering: Hvis noget skal ændres, gøres det tidligt og billigt – inden man går i gang med dyre, teknologiske implementeringer.

  • Brugerfeedback: Man kan teste æstetik og brugeroplevelse før reel udvikling.

  • Sparer ressourcer: Beslutninger om æstetik tages før udviklingen, så arbejdet med selve produktet går hurtigere og medmindre fejl.

Forvirring: Mockup, wireframe, prototype

  • Wireframe = Strukturskitsen (uden farver, billeder eller styletypografi).

  • Mockup = Realistisk, men ikke funktionel – al indhold og styling på plads.

  • Prototype = Funktionsdygtig, interaktiv model (kan klikkes, swipe, scrolle, input).

Best practice

  • Lav flere mockuper af samme idé, så man kan sammenligne og vælge.

  • Afprøv med reelle brugere – æstetik betyder ofte mere end man tror.

  • Samarbejd tværsfagligt – omend mockupet laver designeren, får hele teamet glæde af det.

  • Brug digitale værktøjer som Figma, Adobe XD, Sketch, Photoshop til hurtige og smukke mockuper.

Konklusion:

En mockup er en uundværlig del af design- og produktudvikling – den giver et realistisk, men ikke-funktionelt billede af det kommende produkt og sikrer, at alle krav til udseende, følelse og brugeroplevelse er på plads, inden man skyder gang i teknisk udvikling eller produktion.

Relaterede begreber

Book et møde

Hvornår?

Vælg dato