visual mockup

Hvad er en mockup?

“Jeg kan ikke forklare det… men jeg kan vise dig det!”. I denne artikel dykker vi ned i, hvad et mockup design er, og hvordan du kan bruge metoden til at skabe forståelse, indsamle data, teste, minimere fejl m.m.

Hvad betyder mockup?

Når et digitalt tiltag er under udvikling, f.eks. en hjemmeside eller en app, så laver vi typisk en prototype. Altså en demo udgave eller skitse af det endelig produkt, hvor der stadig er mulighed for at lave test og rettelser på design og funktionalitet.

For at visualisere tankerne bag protoypen, kan man lave et mockup design. Er du f.eks. i gang med at lave en app, så kan man lave en kladde, der viser:

  1. hvordan appen ca. kommer til at se ud (design),
  2. hvordan den kommer til at fungere (f.eks. hvordan virker knapperne) og
  3. hvordan brugerrejsen ca. kommer til at se ud.

Det er et godt værktøj til at skabe en mere konkret forståelse af produktet, selvom det stadig er undervejs i udviklingsprocessen. Typisk vil det være sværere at forklare end at demonstrere, hvad man mener. Særligt hvis modtageren er mindre teknisk end du er.

Mockups har ikke alle de samme funktioner som det endelige resultat, men nok til at skabe en overordnet forståelse af funktionaliteten.

Hvad bruger man en mockup til?

Mockups har flere forskellige formål, alt efter konteksten de bruges i. Det kan f.eks. være til produktudvikling, design, undervisning, præsentation, design evaluering, promovering, test osv.

Man kan f.eks. bruge et mockup design til at teste en idé på målgruppen og dermed indsamle data til at skabe proof of concept. Her kan det både være designet, brugervenlighed og funktionalitet, som er i fokus. Altså: giver det mening og vil målgruppen bruge produktet? Dette kaldes også UX/UI design.

Vis mig en artikel om UX/UI design 

Metoden kan også med fordel bruges til at nedbringe antallet af eventuelle fejl, før man arbejder videre med prototypen og slutproduktet.

Visuel mockup: Din Faglige A-kasse

Hvordan laver man en mockup?

Der findes mange forskellige metoder til at udarbejde mockups i. Du har måske hørt om wireframes? Wireframes er en konkret mockup metode, som har til formål at visualisere opsætningen eller layoutet på en hjemmeside. På sin vis kan man godt sige, at det er en grov skitse af, hvordan webløsningen kommer til at se ud med tekstfelter og billeder mv.

Jeg vil gerne læse mere om wireframes! 

Forskellige værktøjer

Mange har et favoritværktøj til at lave visualiseringer, og nogle værktøjer kan endda simulere den ønskede funktionalitet i det digitale produkt.

Man kan f.eks. bruge Adobe XD til at designe sin projektskitse. Det er muligt at prøve Adobe XD, men efter prøveperioden koster det 93DKK/md for enkeltbrugere og 186 DKK/md for små teams. Skal du/I alligevel arbejde med grafisk design og fotoredigering, kan det give mening at købe hele Adobe-pakken.

Der findes også andre programmer som kan mange af de samme ting som Adobe XD, bl.a.:

  • Figma, som har en gratis version, hvor man kan gemme ét projekt ad gangen. Betalingsløsningen koster 73DKK/md med et års binding.
  • Sketch, som har 30 dages prøveperiode og kun koster 55DKK/md per bruger efterfølgende
  • Axure, som har 30 dages prøveperiode, men koster 153DKK/md med et års binding.
  • Moqups, som er en alt-i-en designplatform, hvor du både kan designe mockups, planlægge processer og lave prototyper. Her kan du oprette en gratis konto og prøve det af inden du opgraderer til Moqups Pro, hvor man får adgang med 3 brugere for 98DKK/md med et års binding.

Skal du bare lave et råt udkast?
Hvis du ønsker en gratis løsning til at lave det første udkast, vil vi også slå et slag for Canva. Den gratis konto har selvfølgelig nogle begrænsninger, men det er et godt udgangspunkt, og så kan man altid opgradere til Canva Premium senere. Det skal dog siges, at Canva ikke er et decideret mockup værktøj, men en grafisk designplatform.

Andre eksempler på mock up designs

DEL DIN NYE VIDEN:

Del på facebook
Del på linkedin
Del på twitter

Relateret content

CASES & blogindlæg