Vad är Mockup?

En mockup är en bild av hur en färdig webbsida eller app kommer att se ut, med allt det visuella på plats: färger, bilder, typsnitt, riktiga texter och logga. Om en wireframe är den avskalade ritningen så är mockupen det målade fotot av det färdiga huset — fast fortfarande bara en bild, inget du kan klicka i ännu.

Man kan säga att mockup = wireframe + visuell design. Först bestämmer wireframen strukturen (var saker ska sitta), sedan lägger mockupen på hela det snygga lagret ovanpå. Du får se den verkliga känslan och stämningen, precis som en inredningsbild i en möbelkatalog visar hur rummet ska bli — men du kan inte sätta dig i soffan.

Skillnaden mot en prototyp är just klickbarheten. En mockup är en statisk bild. Så fort du kan trycka på knappar och navigera runt är det istället en prototyp.

Varför är mockups viktiga för ditt företag?

En mockup låter dig se och godkänna exakt hur din sajt eller app kommer att se ut innan den byggs på riktigt. Du slipper överraskningar och kan tycka till om färger, bilder och känsla medan det fortfarande är enkelt att ändra.

Det gör beslutet tryggare. Istället för att lita på en muntlig beskrivning ser du resultatet framför dig och kan ge tydlig feedback. Det minskar risken för dyra missförstånd längre fram i bygget.

Mockup i praktiken

Tänk dig ett café i Jönköping som vill ha en ny sajt. Utifrån wireframen skapar vi en mockup: nu syns caféets riktiga färger, snygga bilder på fikat, den valda fonten och den färdiga texten "Välkommen in på en kopp".

Ägaren tittar på mockupen och säger "gör bakgrunden lite varmare och byt hjältbilden". Vi justerar bilden, hen godkänner, och först då går vi vidare till att bygga den riktiga, klickbara sajten. Så vet alla exakt vad slutresultatet blir innan arbetet drar igång på allvar.