Sådan laver du et mockup af hjemmeside

I 2014 grundlagde Sara Mote bureauet MOTE sammen med Rembrant Van der Mijnsbrugge. De specialiserer sig i e-handel og hjælper brands i alle faser af deres udvikling, lige fra strategi og brandidentitet til design, udvikling og markedsføring med fokus på langsigtet vækst. Gennem mine 15 år med webdesign til e-handel har Sara udviklet strategier for alt fra mindre, uafhængige brands til Fortune 500-virksomheder. Sara glæder sig til at dele de erfaringer, tips og webdesign-råd, hun har samlet gennem årene her.

Det er forholdsvis nemt at redigere et færdiglavet hjemmesidetema. Hvis du fx vil se, hvordan din webshop ser ud med fire produkter pr. række i stedet for to, kan du hurtigt forhåndsvise ændringen. Men med en specialbygget hjemmeside kan ændringer i design og layout hurtigt blive både tidskrævende og dyre, når først udviklingen er gået i gang. Derfor laver designere ofte et mockup af hjemmeside, før de går videre til selve udviklingen.

I denne artikel lærer du mere om website-mockups, de mest populære værktøjer og de vigtigste ting, du bør kende, når du skal lave dit eget hjemmeside-mockup.

Hvad er et website-mockup?

Et website-mockup er en statisk visuel forhåndsvisning af, hvordan en hjemmeside kommer til at se ud. Et hjemmeside-mockup giver et realistisk billede af sidens design, layout og visuelle stil, før hjemmesiden bliver bygget og gjort interaktiv. Webdesignere bruger hjemmeside-mockups til at afprøve forskellige designidéer og layoutmuligheder, inden udviklingen går i gang. Når først hjemmesiden er kodet færdig, er det ofte langt mere besværligt at lave ændringer. Derfor kan et detaljeret website-mockup spare både tid og penge i designprocessen.

Website-mockups vs. wireframes vs. prototyper

• Wireframes
• Mockups
• Prototyper

Wireframes, mockups og prototyper er alle forskellige måder at visualisere et hjemmeside-design på. Her får du et overblik over, hvornår de forskellige værktøjer giver mest mening at bruge:

Wireframes

Wireframes er simple skitser eller diagrammer, der viser strukturen og layoutet på en hjemmeside uden farver, billeder eller andre visuelle designelementer. Du kan tænke på en wireframe som den grundlæggende skitse til din hjemmesides struktur og layout.

En wireframe kan være så simpel som en håndtegnet skitse på papir, hvilket gør den til et praktisk værktøj for både designere og virksomhedsejere, der vil visualisere idéer tidligt i processen. Wireframes er især nyttige, hvis du arbejder med en hjemmeside eller webshop, der har avancerede funktioner eller interaktive elementer. De hjælper med at fastlægge struktur, navigation og funktionalitet, før du går videre med det visuelle design og udviklingen.

Selv ved mindre webshops kan wireframes hjælpe med at skabe et bedre overblik over din salgstragt, brugeroplevelsen og den kunderejse, du ønsker at bygge op. Fordi wireframes er så enkle, gør de det også lettere for alle involverede at blive enige om retningen, før selve designarbejdet går i gang.

Mockups

Mockups er mere detaljerede og viser, hvordan hjemmesiden forventes at se ud, når designet er færdigt. I modsætning til wireframes inkluderer et hjemmeside-mockup både farver, typografi, billeder, branding og andre visuelle elementer.

Et hjemmeside-mockup giver en realistisk forhåndsvisning af det færdige design, men uden funktionalitet og interaktive elementer. Derfor er mockups særligt nyttige ved specialdesignede hjemmesider, hvor du ønsker at teste og justere layout og design, før udviklingen starter.

Prototyper

Prototyper er interaktive versioner af et hjemmeside-design, som giver en mere realistisk oplevelse af, hvordan siden kommer til at fungere i praksis. Her kan man ofte klikke rundt mellem sider og teste forskellige funktioner, før hjemmesiden bliver udviklet færdig.

Hvis du arbejder med avancerede funktioner eller komplekse brugeroplevelser, kan en prototype være en stor fordel. Ved mindre projekter vil et mockup af hjemmeside dog ofte være nok, før du går videre til udviklingsfasen.

Sådan laver du et website-mockup

1. Beslut, hvordan brandet skal præsenteres
2. Skab en tydelig brugerrejse
3. Saml dine brandelementer
4. Design skabeloner til hver sidetype
5. Tilføj relevante pladsholdere
6. Få feedback

Uanset om du selv designer din hjemmeside eller arbejder sammen med en designer, er der nogle grundlæggende ting, du bør have styr på gennem hele designprocessen.

1. Beslut, hvordan brandet skal præsenteres

Det første skridt, når du skal lave et mockup af hjemmeside, er at tænke over, hvordan dit brand skal fremstå online. Hvis du arbejder sammen med en designer, kan det være en god idé at starte med et kreativt brief. Her kan du samle information om brandet, målgruppen, visuel stil og inspiration.

Det er let at fokusere på funktioner og tekniske detaljer med det samme, men prøv først at zoome ud og kig på helheden. Tænk over, hvilken oplevelse og historie dit hjemmeside-design skal formidle til besøgende.

Måske vil du fx have brugerne til at blive længere tid på forsiden. Forsiden er ofte det første møde med brandet og samtidig den side, hvor mange besøgende hurtigt klikker videre. I stedet for kun at fokusere på konverteringer og funktioner kan du derfor spørge dig selv: Hvordan skaber vi en stærkere forbindelse til dem, der besøger siden?

Nogle gange kan løsningen være overraskende simpel. En kort introduktion til brandet øverst på forsiden kan være nok til at skabe mere personlighed og tillid. Hvis bæredygtighed, kvalitet eller inklusion er en vigtig del af dit brand, kan forsiden også være et oplagt sted at fremhæve det.

2. Skab en tydelig brugerrejse

En hjemmeside bør være bygget op, så indhold og sider naturligt leder brugeren videre gennem sitet. Når nogen lander på forsiden, skal de hurtigt kunne forstå, hvem du er, og hvad du tilbyder. Derefter skal designet hjælpe dem videre til de relevante produkter eller informationer.

På en klassisk webshop starter brugerrejsen typisk på forsiden, hvor brandet bliver introduceret. Herfra klikker brugeren videre til kategorisider og produktsider, hvor informationerne bliver mere detaljerede undervejs. Til sidst skal vejen til indkøbskurven og betalingsprocessen føles nem og intuitiv.

Når du laver et hjemmeside-mockup, er det derfor vigtigt at tænke over, hvordan hver side hænger sammen med den næste. Et godt mockup af hjemmeside handler ikke kun om det visuelle design, men også om at skabe en logisk og brugervenlig oplevelse.

3. Saml dine brandelementer

Når du har styr på retningen for hjemmesiden, er næste skridt at samle de visuelle elementer, der skal bruges i designet.

Hvis du allerede har brandretningslinjer, kan du tage udgangspunkt i dem. Ellers bør du vælge typografi, farver, grafik og andre visuelle elementer, før du begynder at lave dit mockup af hjemmeside. De valg har stor betydning for det samlede udtryk og layout.

Skrifttyper, afstand mellem elementer og opbygningen af designets gitterstruktur er med til at definere oplevelsen af hjemmesiden. Derfor er det en fordel at have de vigtigste designelementer på plads tidligt i processen, så dit hjemmeside-mockup bliver mere realistisk.

4. Design skabeloner til hver sidetype

Når du laver et hjemmeside-mockup, behøver du ikke designe hver enkelt side fra bunden. I stedet laver man typisk skabeloner til de vigtigste sidetyper, fx forsiden, kategorisider og produktsider.

Mens du designer skabelonerne, bør du hele tiden tænke over brugeroplevelsen. Hvis du fx sælger få nøje udvalgte produkter, kan det give mening at fremhæve hvert produkt direkte på kategorisiden med ekstra information og billeder.

Har du derimod en stor webshop med mange produkter, bliver filtrering og navigation langt vigtigere. Her skal dit mockup-design gøre det nemt for brugerne hurtigt at finde frem til de mest relevante produkter.

5. Tilføj relevante pladsholdere

Et hjemmeside-mockup er en visuel forhåndsvisning af den færdige hjemmeside, også selvom alt indhold endnu ikke er klar. Derfor kan det være nødvendigt at bruge pladsholdere til billeder og tekst undervejs i processen.

Selvom indholdet kun er midlertidigt, bør det stadig ligne det endelige resultat så meget som muligt. På den måde får du en mere realistisk fornemmelse af, hvordan hjemmesiden kommer til at se ud.

I stedet for standardtekst som “lorem ipsum” kan du fx bruge midlertidig tekst, der matcher brandets tone og stil. Det gør dit hjemmeside-mockup langt mere brugbart, når designet skal vurderes og godkendes.

6. Få feedback

Når dit mockup af hjemmeside er klar, er det vigtigt at indsamle feedback fra relevante personer, før udviklingen går i gang.

En af de største fordele ved hjemmeside-mockups er, at designændringer kan laves hurtigt uden at ændre i kode eller funktionalitet. Brug derfor feedbackfasen til at sikre, at både design, layout og brugeroplevelse fungerer, som de skal, inden hjemmesiden sendes videre til udvikling.

Værktøjer til hjemmeside-mockups

Der findes mange værktøjer, du kan bruge til at lave et mockup af hjemmeside, men nogle platforme er særligt populære blandt webdesignere og Shopify-butikker:

Sketch

Sketch er et populært værktøj til webdesign og UI-design, som gør det nemt at arbejde hurtigt med layout, designudkast og prototyper. Programmet blev lanceret i 2010 og bruges stadig af mange designere til både hjemmeside-mockups og interaktive prototyper. Et standardabonnement starter fra 12 USD om måneden (ca. 85 kr.).

Figma

Figma er et af de mest populære værktøjer til hjemmeside-mockups og digitalt design. Platformen gør det muligt at samarbejde i realtid, hvilket er en stor fordel, hvis flere personer arbejder på det samme hjemmeside-design. Figma tilbyder en gratis version, mens de betalte abonnementer starter fra 15 USD om måneden (ca. 105 kr.).

Adobe XD

Adobe XD er især populært blandt designere, der allerede arbejder med programmer som Photoshop, Illustrator og InDesign. Værktøjet gør det nemt at skabe både mockups og klikbare prototyper med tæt integration til resten af Adobe Creative Cloud. Adobe XD sælges ikke længere som et separat program, men kan stadig være tilgængeligt via visse Adobe Creative Cloud-abonnementer.