Mockup

Et mockup er en visuel, forholdsvis detaljeret fremstilling af, hvordan et design forventes at se ud, før det bliver bygget eller produceret. Det kan være en hjemmeside vist på en computerskærm, en etikette placeret på en flaske eller et logo sat på en varebil.

I webdesign ligger mockuppet typisk mellem et enkelt wireframe og en fungerende prototype. Wireframen viser struktur og placering med få visuelle detaljer. Mockuppet viser farver, typografi, billeder og hierarki. Prototypen tilføjer klik og bevægelse, så dele af oplevelsen kan afprøves.

Et mockup er ikke den færdige hjemmeside. Det kan se overbevisende ud, men knapperne virker måske ikke, formularen sender intet, og mobilversionen er ikke nødvendigvis lavet. Det viser retningen. Det beviser ikke, at løsningen fungerer.

Fordelen er, at store visuelle beslutninger kan tages, før udviklingen bliver dyr at ændre. Kunden kan se, om udtrykket passer, om den vigtigste besked står tydeligt, og om billederne støtter indholdet. Det er lettere at flytte en sektion i et designudkast end i en færdig specialfunktion.

Mockups bruges også i grafisk design til at vise materialer i en realistisk sammenhæng. En flad etiketfil kan være svær at forestille sig på en rund dunk. Et mockup gør ideen konkret, men det må ikke skjule produktionskrav eller love en finish, som trykket ikke kan levere.

Start med indhold og mål. Hvad skal brugeren forstå og gøre? Et mockup, der udarbejdes før teksten, ender ofte med pæne tomme bokse og overskrifter, der kun passer, fordi de hedder “Lorem ipsum”. Brug realistiske tekstmængder, priser og produktnavne.

Godkend først det overordnede hierarki. Kan man se forskel på primær og sekundær handling? Er den vigtigste CTA tydelig uden at råbe? Hænger siden sammen med den forventede brugerrejse? Det er vigtigere end at diskutere fem næsten ens grønne nuancer i første runde.

Vis de skærmstørrelser, der har betydning. Et desktop-mockup alene er ikke nok til et responsivt design. Mobilversionen kan kræve en anden rækkefølge, kortere navigation og enklere tabeller. Markér, om designet viser én fast bredde eller flere gennemtænkte brudpunkter.

Aftal, hvad feedbacken gælder. I én runde kan fokus være struktur og prioritet. I næste runde kan det være farver, billeder og typografi. Hvis alle detaljer diskuteres samtidig, bliver et simpelt “knappen er svær at finde” blandet med 30 små smagskommentarer.

Brug et designsystem eller en enkel komponentoversigt, når flere sider skal følge samme retning. Knapper, kort, formularfelter og mellemrum bør ikke opfindes på ny for hver underside. Mockuppet skal vise et system, ikke kun én heldig komposition.

Når mockuppet er godkendt, dokumenteres de åbne spørgsmål: animationer, validering, hover-tilstande, tomme resultater og fejlbeskeder. De er sjældent synlige i et statisk billede, men afgør meget af den faktiske UX.

En sikkerhedsvirksomhed skal have en ny side med tre servicepakker. Det første udkast består af en wireframe med overskrift, kort introduktion, tre priskort og en kontaktsektion. Kunden godkender rækkefølgen, men har svært ved at forestille sig det færdige udtryk.

Designeren laver et mockup med virksomhedens farver, rigtige pakkenavne, konkrete priser og realistiske beskrivelser. Den anbefalede pakke får en rolig markering, og knappen “Få et tilbud” står samme sted på alle tre kort. Der vises både desktop og mobil.

På mobilen bliver det tydeligt, at de lange funktionslister gør kortene næsten endeløse. Indholdet ændres derfor, før udviklingen starter: fem hovedpunkter vises direkte, mens resten kan foldes ud. Det er en indholdsbeslutning, som mockuppet gjorde synlig.

Kunden beder om, at alle tre pakker får stærke farver. Mockuppet viser, at siden mister fokus, når alt fremhæves. I stedet beholdes én primær markering og tydelige, men rolige alternativer. Beslutningen træffes ud fra hierarki frem for “mere knald på”.

Efter godkendelse bygges siden i WordPress. Først her testes tastaturnavigation, formularens fejlbeskeder, loading og faktiske brudpunkter. Mockuppet sparede udviklingstid, men det blev ikke brugt som bevis for, at den færdige webtilgængelighed var i orden.

Den største faldgrube er et falsk indtryk af, at løsningen er færdig. Et mockup kan ligne en skarp, fungerende side, selv om de svære dele endnu ikke er løst. En dropdown ser fin ud i lukket tilstand. Det siger intet om 40 valgmuligheder, tastaturbetjening eller fejl på en lille skærm.

En anden fejl er at bruge urealistisk indhold. Tre produkter med lige lange navne og perfekte billeder skjuler problemerne. Test med det længste produktnavn, det dårligste billede og en overskrift, der faktisk skal bruges. Virkeligheden kommer alligevel senere.

Pas på enhedsrammer og skygger. Et design vist i en lækker laptop kan imponere, men rammen må ikke forveksles med selve løsningen. Bedøm også siden uden præsentationspynt og i den størrelse, brugeren reelt ser.

Sidst kan feedback blive en folkeafstemning. Ti personer kommenterer hver sin detalje, og ingen ejer målet. Aftal beslutningstager, målgruppe og succeskriterium. Ellers ender mockuppet som et kompromis mellem personlige yndlingsfarver.

Begrebet mockup bruges bredt og ikke altid ens. Nogle kalder et enkelt skærmdesign for mockup, mens andre bruger ordet om en fotorealistisk præsentation af et produkt. Spørg derfor, hvad leverancen konkret indeholder: antal sider, mobilversioner, klikbarhed og korrekturrunder.

Et mockup kan være lavet i Figma, Adobe-programmer eller andre værktøjer. Filformatet er mindre vigtigt end, om det giver de rigtige beslutninger. En PDF kan være nok til et trykprodukt, mens en kompleks digital løsning ofte har brug for komponenter og klikbare forløb.

Mockuppet bør hænge sammen med UI, men også med teknik og indhold. Et visuelt stærkt design kan falde fra hinanden, hvis billederne er for tunge, teksten ikke kan redigeres i CMS’et, eller funktionerne kræver en anden struktur.

Den bedste godkendelse lyder ikke bare “det ser flot ud”. Den beskriver, at hierarki, indhold og visuel retning kan gå videre til udvikling. Se mere om processen i guiden til at skabe en brugervenlig hjemmeside.

En leverance bør beskrive antal sider eller skærme, hvilke bredder der vises, om komponenter er klikbare, og hvor mange korrekturrunder der indgår. Det forhindrer, at et enkelt desktopudkast bliver opfattet som design af hele løsningen.

Angiv også, om billeder og tekster er endelige. Midlertidigt indhold bør markeres, så kunden ikke godkender en licensbelagt reference eller en tekst, der kun var skrevet for at teste pladsen.

En god præsentation fortæller tydeligt, hvad der er til godkendelse. Er det struktur, farver, billedstil eller den endelige tekst? Hvis alt vises på én gang uden forklaring, ender feedbacken let på et stockfoto, selv om mødet skulle handle om navigation.

Vis de vigtigste situationer frem for tyve næsten ens sider. For en hjemmeside kan det være forside, indholdsside, kontakt og mobilmenu. For en webshop kan det være kategori, produkt, kurv og checkout. Det giver kunden nok sammenhæng til at opdage reelle problemer.

Brug realistisk tekstlængde. Tre ord med lorem ipsum kan få ethvert kort til at se luftigt ud, men løsningen skal måske rumme en lang ydelsestitel og en konkret pris. Mockuppen bør stresstestes med de længste forventelige overskrifter, små produktbilleder og fejlbeskeder.

Opsaml kommentarer ét sted og knyt dem til en version. “Flyt knappen lidt” giver ingen mening, når der ligger fire PDF’er med næsten samme filnavn. En enkel versionsdato og en samlet korrekturliste sparer både kunden og designeren for gentagelser.

Afslut godkendelsen med at skelne mellem design og funktion. En statisk mockup kan vise placering og udtryk, men ikke bevise at en formular validerer korrekt, at menuen kan bruges med tastatur, eller at siden er hurtig. De forhold hører til prototype, udvikling og test, selv om mockuppen gør dem lettere at planlægge.