Slik lager du en nettside mockup

I 2014 grunnla jeg MOTE-byrået sammen med Rembrant Van der Mijnsbrugge. Vi spesialiserer oss på e-handel og samarbeider med kunder i alle faser av merkevarebyggingen, fra innledende markedsstrategi og merkevareidentitet til design, utvikling og markedsføring, alltid med fokus på bærekraftig vekst. Gjennom mine 15 år med erfaring innen e-handelswebdesign har jeg formet strategiene til kunder som spenner fra uavhengige merker til Fortune 500-selskaper. Jeg gleder meg til å dele tipsene og rådene om webutvikling som jeg har samlet gjennom karrieren.

Å redigere et ferdiglaget nettstedtema er enkelt. Vil du for eksempel se hvordan nettstedet ditt vil se ut med fire produkter per rad sammenlignet med to produkter per rad, kan du forhåndsvise det på sekunder. Men på et fullstendig tilpasset nettsted kan endringer i koden være tidkrevende og kostbare. Derfor lager designere nettside mockuper før de går videre til utviklingsfasen.

I denne artikkelen lærer du mer om nettside mockuper, samt verktøyene og beste praksis for å lage din egen nettside mockup.

Hva er en nettside mockup?

En nettside mockup er en statisk visuell forhåndsvisning av hvordan et nettsted vil se ut. Den gir et inntrykk av designet og oppsettet på nettstedet, men har ennå ikke backend-koden som vil gjøre det interaktivt og klart for publisering. Webdesignere bruker nettside mockuper for å utforske ulike designalternativer før de leverer designet videre til utvikling for koding. Når et nettsted først er bygget i kode, er det vanskeligere å justere, så en høyoppløselig nettside mockup (en som er så nær det endelige produktet som mulig) kan spare tid og penger.

Nettside mockuper vs. wireframes vs. prototyper

• Wireframes
• Modeller
• Prototyper

Wireframes, modeller og prototyper er alle forskjellige måter å visualisere en designidé på. Her er når du skal bruke hver av dem:

Wireframes

Wireframes er diagrammer som viser layouten og strukturen til et nettsted uten designelementer. Du kan tenke på en wireframe som en blåkopi for ditt nettstedsdesign.

En wireframe kan være en enkel håndtegnet skisse, og er derfor et nyttig verktøy for de som ønsker å få visualisert visjonen sin. Wireframes kan også hjelpe designere som jobber med nettsteder med nye eller svært interaktive elementer. Wireframes lar deg nemlig bestemme den grunnleggende strukturen og funksjonaliteten til nettstedet før du blir fanget opp i design og kode.

Selv om du bygger et enklere e-handelsnettsted, kan en wireframe hjelpe deg med å befeste den overordnede salgstrakten og kundeopplevelsen du ønsker å skape. Siden wireframes er så enkle, er det en utmerket måte å få alle på samme side før designarbeidet begynner.

Modeller

Modeller er detaljerte, statiske representasjoner som illustrerer den tiltenkte nettstedlayouten, med merkevarevalgene på plass. I motsetning til wireframes inkluderer modeller kunstnerisk retning, typografi og bruk av farge.

Modeller gir en realistisk forhåndsvisning av hvordan det endelige nettstedet vil se ut for en bruker, men de er ennå ikke interaktive. Modeller er uunnværlige når du bygger et tilpasset nettsted, fordi de lar deg gjøre endringer i designet før kodingen begynner.

Prototyper

Prototyper er det mest høyoppløselige alternativet for å forhåndsvise et nettsted. Dette er interaktive modeller som bruker forhåndsvisningslenker for å simulere brukeropplevelsen og gjøre nettstedsdesignet mer levende.

For prosjekter som krever testing av forskjellige interaktive elementer før utvikling, kan en prototype være svært nyttig. For enklere prosjekter kan du gå direkte fra en modell til utvikling.

Hvordan lage en nettside mockup

1. Bestem hvordan merket skal presenteres
2. Lag en lineær fortelling
3. Samle merkeelementer
4. Design maler for hver sidetype
5. Legg til meningsfulle plassholdere
6. Få tilbakemelding

Enten du designer noe selv eller jobber med en designer, er de grunnleggende elementene å vurdere når du går gjennom designprosessen de samme.

1. Bestem hvordan merket skal presenteres

Det første trinnet i å designe et nettsted er å ta et skritt tilbake og tenke på hvordan du skal presentere merket. Hvis du jobber med en designer, kan du starte prosessen med en kreativ gjennomgang. Det gir dem innsikt i merket ditt, målgruppen din og inspirasjonen din.

Det er naturlig å ville fokusere på spesifikke funksjoner, men før du blir revet med av tekniske detaljer, prøv å zoome ut først: Tenk på den overordnede historien du ønsker å fortelle med nettstedets layout.

For eksempel kan du starte med et mål om å oppmuntre brukere til å bruke mer tid på hjemmesiden din. Hjemmesiden er ofte det første kontaktpunktet for et merke. Den har også en tendens til å ha de høyeste avvisningsratene. Men i stedet for å starte fra et funksjons- eller konverteringsoptimaliseringsperspektiv, spør deg selv: "Hvordan etablerer vi en dypere forbindelse med hjemmesidebesøkende?"

Løsningen kan være så enkel som å skrive en kort introduksjon til merket ditt øverst på siden. Hvis dine merkevareverdier er kjernen i virksomheten din, er dette en flott mulighet til å vise frem disse verdiene rett på hjemmesiden. For eksempel kan det å demonstrere verdier som bærekraft eller inkludering resonere med målgruppen din og holde dem på nettstedet ditt lenger.

2. Lag en lineær fortelling

Nettstedet ditt bør følge en lineær fortelling, noe som betyr at hver seksjon og side flyter logisk og bygger på den neste. En vellykket fortelling sikrer at når noen kommer til hjemmesiden din, får de et tydelig inntrykk av merket ditt og produkttilbudene dine. Når de beveger seg videre gjennom nettstedet, bør du tilby flere detaljer og funksjoner som hjelper dem å finne de riktige produktene.

I et tradisjonelt e-handelsnettsted er den lineære fortellingen salgstrakten: En bruker kommer til hjemmesiden, som introduserer merket ditt. Derfra finner de produktsamlingssidene dine, som går mer i detalj enn hjemmesiden og viser den viktigste informasjonen først, med sekundær og tertiær informasjon innen rekkevidde. I en vellykket fortellerflyt velger brukeren deretter produkter, går til handlekurvsiden og fullfører til slutt betalingsprosessen.

3. Samle merkeelementer

Når du har tenkt på hvordan du ønsker å forme fortellingen for nettstedet, samle merkeelementene som skal brukes i designet.

Hvis du har retningslinjer for merkevaren, kan du dele disse med designeren din (eller bruke dem selv). Hvis ikke, må du bestemme deg for merkeelementer som typografi, grafikk og farger før du lager en modell. Nettstedets rutenettlayout vil være basert på linjehøydene og bokstavavstanden til merkeskriftene dine, så det er viktig å bestemme seg for disse merkeelementene før du tegner opp nettside mockupen. Når du har et rutenettlayout på plass, kan du lage modeller ved hjelp av designressursene og den kreative briefen din.

4. Design maler for hver sidetype

Når du designer en nettside mockup, lager du ikke en modell for hver enkelt nettside. I stedet lager du modellmaler for forskjellige typer sider, som en samlingssidemal og en produktsidemal.

Når du designer hver av disse malene, ta et skritt tilbake og spør: "Hva er det som vil gjøre opplevelsen best mulig?" Hvis du for eksempel har et nøye utvalgt sortiment på seks produkter eller færre, bør samlingssiden vise alle disse produktene og legge til litt kontekst før du går videre til de detaljerte produktsidene.

Hvis du derimot har et produktutvalg på dusinvis, hundrevis eller til og med tusenvis av produkter, bør du designe et nettsted med mer avansert produktfiltrering. Det vil bidra til at de som kommer til en samlingsside, kan begrense resultatene til de produktene som er mest relevante for dem.

5. Legg til meningsfulle plassholdere

Siden en modell er en forhåndsvisning av hvordan nettstedet ditt til slutt vil se ut, er det mulig at du fortsatt lager innhold til nettstedet mens du jobber med modellen. Hvis det er tilfellet, kan du bruke en meningsfull plassholder.

Selv om bildene og teksten som brukes i modellen er midlertidige, bør de være så nær det endelige resultatet som mulig. Slik får du, når du forhåndsviser modellene, en god følelse av den tiltenkte retningen for nettstedet. I stedet for å bruke «lorem ipsum»-plassholdertekst kan du for eksempel utarbeide eksempeltekst som er tilpasset merkevaren.

6. Få tilbakemelding

Når modellen din er klar, er det på tide å presentere den for interessenter og få tilbakemelding. Hovedfordelen med å lage en nettside mockup er at du kan gjøre endringer uten å endre kode, så bruk denne muligheten til å sikre at alle interessenter er trygge på modellen før den lanseres.

Verktøy for nettside mockuper

Det finnes mange designverktøy du kan bruke til å lage en nettside mockup, men noen av de mest populære inkluderer:

Sketch

Sketch er en webdesignapp som lar deg iterere raskt. Laget i 2010 spesifikt for UI-design, kan Sketch lage modeller så vel som interaktive prototyper. Et standardabonnement starter på $12 per måned.

Figma

Figma er et designverktøy som støtter sanntidssamarbeid. Hvis du har flere personer som jobber med en modell samtidig, kan Figma være et godt alternativ. Du kan registrere deg gratis, men hvis du vil bruke alle funksjonene, starter planene på $15 per måned.

Adobe XD

Designere som jobber i hele Adobe-designpakken (med apper som Photoshop, Illustrator, InDesign og Lightroom) elsker Adobe XD for den sømløse integrasjonen med andre Adobe-applikasjoner. Adobe selger ikke lenger XD som et frittstående produkt, men du kan få tilgang til det gjennom et abonnement på Adobe Creative Cloud for $59,99 per måned.