Vad en mockup används till
En lös skärmdump är platt och saknar sammanhang. Samma skärmdump i en mobil visar en produkt man kan tänka sig hålla i handen. Det låter som en liten sak. På en butikssida eller i en annons är det ofta skillnaden mellan att någon scrollar vidare och att någon trycker.
Du hittar mockups i:
- skärmdumpar i App Store och Google Play;
- toppbilder och produktvideor på webbplatser;
- inlägg på Instagram, TikTok och LinkedIn;
- kundpresentationer och portfolier;
- pitch decks till investerare.
För designers finns också en praktisk sida. En kund som tittar på en platt PNG frågar alltid till slut hur det ser ut på en mobil. En mockup svarar innan frågan kommer.
Typer av mockups
I dag ser man tre typer, och var och en är bra på något eget.
Platt (2D) mockup
Skärmdumpen sitter i en enhetsram sedd rakt framifrån. Snabb att göra, små filer och ofta tillräckligt för butikerna. Men allt syns från samma vinkel, så en sida full av 2D-mockups blir snabbt enformig.
Fotomockup
Någon fotograferar en riktig enhet, till exempel en mobil i handen eller en laptop på ett skrivbord. Skärmytan markeras och din design läggs in med rätt perspektiv. Ljuset och miljön är riktiga, så resultatet ser väldigt naturligt ut, och därför fungerar det så bra i sociala medier och på webbplatser.
3D-mockup och mockupvideo
En tredimensionell modell av enheten. Du vrider mobilen i alla vinklar, flyttar ljuset och skuggan följer med. Styrkan är rörelse: enheten vrider sig eller datorn fälls upp medan din app spelas på skärmen. För lanseringsvideor och App Store-förhandsvisningar är det i dag den vanligaste typen.
Mockup, wireframe och prototyp
De blandas ihop hela tiden. En wireframe är skelettet till en skärm: rutor, linjer, platshållartext och ingen färg. Den används för att komma överens om vad som ska vara var. En prototyp går att klicka i: du trycker på en knapp och nästa skärm öppnas. Den visar man för testpersoner.
En mockup visar den färdiga, eller nästan färdiga, designen i en realistisk miljö. Den går inte att klicka i; den är till för att titta på.
Hur du gör en mockup
Förr fanns två vägar: öppna en PSD med smarta objekt i Photoshop eller bygga en scen i ett 3D-program som Blender eller Cinema 4D. Den första är snabb men begränsad. Den andra är kraftfull men tar veckor att lära sig.
Nu finns appar gjorda just för det här. I Mockup Center går det till så här:
- Dra in din skärmdump eller skärminspelning i appen.
- Välj en enhet (iPhone, Galaxy, iPad, MacBook, Apple Watch med flera) eller öppna en animerad mall.
- Ställ in vinkel, ljus och bakgrund och exportera PNG eller video.
Guiden skapa mockup går igenom varje steg.
Vad som gör en mockup bra
Efter att ha sett många butikssidor och lanseringsinlägg har de bra alltid samma vanor:
- Skärmdumpen är skarp. En suddig skärm får även en påkostad 3D-scen att se billig ut. Ta den i enhetens riktiga upplösning.
- Statusfältet är rent: 9:41, fullt batteri, inga notiser. En detalj, men folk märker den.
- Bakgrunden tävlar inte med produkten.
- Varje bild säger en sak, med en funktion och en rubrik.
