Skapa en web mockup till din hemsida

2014 grundade jag MOTE agency tillsammans med Rembrant Van der Mijnsbrugge. Vi är specialiserade på e-handel och samarbetar med kunder i alla faser av deras varumärkesresor – från initial marknadsstrategi och varumärkesidentitet till design, utveckling och marknadsföring – alltid med fokus på hållbar tillväxt. Under mina 15 år av erfarenhet inom webbdesign för e-handel har jag format strategier för kunder som sträcker sig från oberoende varumärken till Fortune 500-företag. Jag ser fram emot att dela med mig av de webbdesigntips och råd jag samlat på mig under min karriär.

Att redigera ett färdigt webbtema är enkelt – om du vill se hur din webbplats kommer att se ut med fyra produkter per rad jämfört med två produkter per rad kan du förhandsgranska det på några sekunder. Men med en helt anpassad webbplats kan ändringar i kod vara tidskrävande och kostsamma. Det är därför designers skapar en web mockup innan de går vidare till utvecklingsfasen.

I den här artikeln får du lära dig mer om hur det fungerar, samt verktyg och bästa praxis för att skapa din egen web mockup.

Vad är en web mockup?

En webbplatsmodell är en statisk visuell förhandsgranskning av hur en webbplats kommer att se ut. Den ger en känsla av webbplatsens slutliga design och layout, men den är ännu inte funktionell med den back-end-kod som skulle göra webbplatsen interaktiv och redo att publicera. Webbdesigners använder webbplatsmodeller för att utforska olika designalternativ innan de överlämnar en webbdesign till utveckling för kodning. När en webbplats väl har byggts i kod är det svårare att justera, så en högupplöst webbplatsmodell (en som ligger så nära slutprodukten som möjligt) kan spara tid och pengar.

Web mockup, wireframe och prototyp

• Wireframe
• Modell
• Prototyp

Wireframes, modeller och prototyper är alla olika sätt att visualisera en designidé. Här är när du ska använda varje alternativ:

Wireframe

Wireframes är diagram som visar layouten och strukturen för en webbplats utan dess designelement. Du kan tänka på en wireframe som en ritning för din webbplatsdesign.

En wireframe kan vara en enkel skiss med penna och papper, så det är ett användbart verktyg för icke-designers som vill kommunicera sin vision. Wireframes kan också hjälpa designers som arbetar med webbplatser med ett nytt eller djupt interaktivt element. Det beror på att wireframes låter dig bestämma webbplatsens grundläggande struktur och funktionalitet innan du fastnar i design och kod.

Även om du bygger en enklare webbshop kan en wireframe hjälpa dig att befästa den övergripande försäljningstratten och kundupplevelsen du vill skapa. Eftersom wireframes är så enkla är de ett utmärkt sätt att få alla på samma sida innan designen börjar.

Modell

Modeller är detaljerade, statiska representationer som illustrerar den avsedda layouten med varumärkesbeslut. Till skillnad från wireframes inkluderar modeller art direction, typografi och användning av färg.

Modeller ger en realistisk förhandsgranskning av hur den slutliga webbplatsen kommer att se ut för en användare, men de är ännu inte interaktiva. Modeller är nödvändiga när man bygger en anpassad webbplats eftersom de låter dig göra ändringar i din design innan kodningen börjar.

Prototyp

Prototyper är det mest detaljerade alternativet för att förhandsgranska en webbplats. Dessa är interaktiva modeller som använder privata länkar för att simulera användarupplevelsen och föra webbplatsens design närmare verkligheten.

För projekt som kräver testning av olika interaktiva element innan utveckling kan en prototyp vara riktigt fördelaktig. För enklare projekt kan du gå direkt från en modell till utveckling.

Skapa en web mockup

1. Bestäm hur varumärket ska presenteras
2. Skapa en linjär berättelse
3. Samla varumärkeselement
4. Designa mallar för varje sidtyp
5. Lägg till praktiska platshållare
6. Få feedback

Oavsett om du designar något själv eller arbetar med en designer är de grundläggande elementen att överväga när du går igenom designprocessen desamma.

1. Bestäm hur varumärket ska presenteras

Det första steget i att designa en webbplats är att ta ett steg tillbaka och fundera på hur du ska presentera varumärket. Om du arbetar med en designer kan du kickstarta processen med en kreativ brief. Det hjälper din designer att lära sig om ditt varumärke, din målgrupp och din inspiration.

Det är naturligt att vilja fokusera på specifika funktioner, men innan du fastnar i tekniska detaljer, försök att zooma ut först. Tänk på den övergripande berättelsen du vill berätta med webbplatsens layout.

Du kan till exempel börja med ett mål att uppmuntra användare att tillbringa mer tid på din startsida. Startsidan är ofta den första kontaktpunkten för ett varumärke. Den tenderar också att ha de högsta avvisningsfrekvenserna. Men istället för att börja från ett funktions- eller konverteringsperspektiv, fråga dig själv: "Hur etablerar vi en djupare koppling med startsidans besökare?"

Lösningen kan vara så enkel som att skriva en mening som introduktion till ditt varumärke ovanför mitten. Om dina värderingar är kärnan i din verksamhet är detta ett utmärkt tillfälle att visa upp dessa värderingar direkt på startsidan. Att till exempel demonstrera värderingar som hållbarhet eller inkludering kan resonera med din målgrupp och hålla dem kvar på din webbplats längre.

2. Skapa en linjär berättelse

Din webbplats bör följa en linjär berättelse, vilket innebär att varje avsnitt och sida logiskt flyter och bygger vidare på nästa. En framgångsrik berättelse säkerställer att när någon hamnar på din startsida har hen en tydlig känsla av ditt varumärke och dina produkter. När de reser genom webbplatsen bör du erbjuda fler detaljer och funktioner som hjälper besökarna att hitta rätt produkter.

På en traditionell webbshop är din linjära berättelse försäljningstratten: en användare landar på startsidan, som introducerar ditt varumärke. Därifrån hittar besökaren dina produktsidor, som går in på djupare detaljer än din startsida – och lyfter fram den viktigaste informationen först, med sekundär och tertiär information inom räckhåll. I ett framgångsrikt flöde väljer användaren sedan produkter, går till varukorgen och slutför sitt köp.

3. Samla varumärkeselement

När du har funderat på hur du vill forma berättelsen för webbplatsen, samla de varumärkeselement som kommer att användas i designen.

Om du har varumärkesriktlinjer kan du dela dessa med din designer (eller hänvisa till dem själv). Om inte måste du bestämma dig för varumärkeselement som typografi, grafik och färger innan du skapar en modell. Webbplatsens rutnätslayout kommer att baseras på radhöjderna och bokstavsavståndet för dina valda typsnitt, så det är viktigt att bestämma dessa varumärkeselement innan du ritar upp din modell. När du har en rutnätslayout kan du skapa modeller med hjälp av dina designtillgångar och kreativa brief.

4. Designa mallar för varje sidtyp

När du designar en web mockup skapar du inte en modell för varje enskild webbsida. Istället skapar du modellmallar för olika typer av sidor, till exempel en samlingssida och en produktsida.

När du designar var och en av dessa mallar, ta ett steg tillbaka och fråga: "Vad kommer att göra upplevelsen mest lyckad?" Om du till exempel har ett utvalt sortiment av sex produkter eller färre bör din samlingssida visa upp var och en av dessa produkter och lägga till lite sammanhang innan du går in på de detaljerade produktsidorna.

Om du däremot har ett lager med dussintals, hundratals eller till och med tusentals produkter bör du designa en webbplats med mer avancerad produktfiltrering. Det hjälper till att säkerställa att någon som landar på en samlingssida kan begränsa resultaten till de produkter som är mest relevanta.

5. Lägg till praktiska platshållare

Eftersom en web mockup är en förhandsgranskning av hur din webbplats så småningom kommer att se ut är det möjligt att du fortfarande genererar innehåll för webbplatsen medan arbetet pågår. Om så är fallet kan du använda en praktisk platshållare.

Även om bilderna och texten som används i modellen är tillfälliga bör de vara så nära slutmålet som möjligt. På så sätt, när du förhandsgranskar modellerna, får du verkligen en känsla av den avsedda riktningen för webbplatsen. Till exempel: istället för att använda "lorem ipsum"-platshållartext kan du utarbeta lite exempeltext som är varumärkesanpassad.

6. Få feedback

När din web mockup är klar är det dags att presentera den för intressenter och få feedback. Den största fördelen med att skapa en mockup är att du kan göra ändringar utan att ändra kod, så använd detta tillfälle för att säkerställa att alla intressenter är nöjda med modellen innan den sätts i produktion.

Verktyg för en web mockup

Det finns många designverktyg du kan använda för att skapa en web mockup, men några av de mest populära inkluderar:

Sketch

Sketch är en webbdesign-app som möjliggör snabb iteration. Skapad 2010 specifikt för UI-design. Sketch kan skapa modeller samt interaktiva prototyper. Ett standardabonnemang börjar på 12 dollar (cirka 110 kronor) per månad.

Figma

Figma är ett designverktyg som möjliggör samarbete i realtid. Om du har flera personer som arbetar med en web mockup samtidigt kan Figma vara ett bra alternativ. Du kan registrera dig för Figma gratis, men om du vill använda alla dess funktioner börjar abonnemangen på 15 dollar (cirka 110 kronor) per månad.

Adobe XD

Designers som arbetar med hela Adobes designsvit (appar som Photoshop, Illustrator, InDesign och Lightroom) älskar Adobe XD tack vare dess smidiga integration med andra Adobe-applikationer. Adobe säljer inte längre XD som en fristående produkt, men du kan komma åt den via ett abonnemang på Adobe Creative Cloud för cirka 950 kronor per månad.