Webdesign: Fra idé til ferdig nettside

Viktige elementer i moderne webdesign

Noen ting betyr mer enn alt annet i et godt webdesign. For å lære mer om hvordan vi i Mementor jobber med disse elementene, kan du se siden vår om webdesign.

Her er de viktigste:

Tilpasning til alle enheter

Dette kaller vi responsivt webdesign, og det er viktig. Nettsiden din bør se bra ut og fungere godt uansett om folk bruker mobil, nettbrett eller datamaskin. Vil du vite hvordan vi som digitalt markedsføringsbyrå kan hjelpe deg med responsivt design, kan du kontakte oss.

• Bruk fleksible bilder som endrer størrelse uten å bli uklare
• Lag menyer som fungerer like bra på mobil som på PC
• Test nettsiden din på mange forskjellige skjermer

Enkel å bruke

Besøkende skal finne det de leter etter uten problemer. Tenk enkelt og ryddig. For flere tips, besøk vår SEO for nybegynnere-guide for å sikre at brukervennligheten og synligheten håndteres optimalt.

• Lag en meny som er lett å forstå og bruke
• Sørg for at viktig informasjon er lett å finne
• Bruk knapper og lenker som er store nok til å klikke på, selv på mobil

Rask å laste

Folk er utålmodige på nett. En treg nettside kan få besøkende til å forsvinne fort. Slik gjør du siden raskere:

• Komprimer bilder så de tar mindre plass
• Bruk rask hosting for nettsiden din
• Fjern ting du ikke trenger, som gamle plugins eller ubrukt kode
• Sjekk Core Web Vitals i PageSpeed Insights. INP måler hvor raskt siden reagerer når folk klikker

Tilgjengelig for alle

Lag nettsider som alle kan bruke, også folk med nedsatt syn, hørsel eller motorikk. Det er både riktig og lovpålagt: norske nettsteder rettet mot allmennheten skal oppfylle krav fra WCAG-standarden, og EUs tilgjengelighetsdirektiv skjerper kravene for bedrifter som selger i EU.

• Bruk farger med god kontrast, slik at teksten er lett å lese for alle
• Legg til alt-tekst på bilder for folk som bruker skjermleser
• Sørg for at hele nettsiden kan brukes med tastatur, ikke bare mus

Hele regelverket forklarer vi i guiden om tekst til tale og universell utforming.

Smart oppsett

Bruk størrelser, farger og plassering lurt for å lede folks blikk dit du vil. Dette kaller vi visuelt hierarki. Noen triks:

• Gjør de viktigste tingene størst eller mest fargerike
• Bruk tomrom (også kalt «white space») for å skape fokus
• Grupper ting som hører sammen

Trender i webdesign

Nå som vi har dekket det grunnleggende, ser vi på noen aktuelle trender:

Små, morsomme animasjoner

Disse gir liv til siden din og gjør den mer interessant. Men ikke overdriv. Noen ideer:

• La knapper endre seg litt når man holder musa over dem
• Bruk små animasjoner for å vise at noe laster
• La elementer på siden bevege seg litt når man scroller

Mørk modus

La folk velge mellom lys og mørk bakgrunn. Det er både stilig og bra for øynene. Tenk på dette:

• Lag to fargepaletter, en for lys og en for mørk modus
• Sørg for at tekst er lett å lese i begge modi
• Gi brukerne en enkel måte å bytte mellom lys og mørk

Uvanlige oppsett

Prøv noe annerledes for å fange oppmerksomheten. Men husk at det fortsatt må være brukervennlig:

• Eksperimenter med skjeve linjer eller uvanlige former
• Prøv å plassere ting på uventede steder på siden
• Lek med hvordan du presenterer informasjon

Fortell en historie

La designet ditt fortelle noe om bedriften din. Det skaper en god forbindelse med besøkende:

• Bruk bilder og tekst som viser bedriftens reise
• Lag en tidslinje som viser viktige hendelser
• Bruk farger og design som gjenspeiler bedriftens verdier

Miljøvennlig design

Nettsider kan også være bra for miljøet. Prøv å lage sider som bruker mindre energi:

• Velg et raskt og strømgjerrig webhotell. Vi drifter nettsider på norske servere gjennom driftsavtalene våre
• Reduser mengden data som må lastes
• Tenk på om du virkelig trenger alle de store bildene og videoene

Verktøy og teknologi for god webdesign

Her er verktøyene vi selv bruker og anbefaler:

Populære designverktøy

Figma er i dag standardverktøyet for webdesign. Her er hvorfor:

• De lar deg lage interaktive prototyper
• Du kan enkelt samarbeide med andre designere
• De har mange nyttige plugins som gjør jobben enklere

Kodebiblioteker

React, Vue.js og Angular gjør det lettere å lage nettsider som fungerer bra. Her er fordelene:

• De gjør det enklere å lage komplekse, interaktive nettsider
• Du kan gjenbruke kode, som sparer tid
• De har store fellesskap av utviklere som kan hjelpe hvis du står fast

Systemer for å styre innhold

Hos Mementor bygger vi de fleste nettsider i WordPress, og nettbutikker med WooCommerce. For kunder med spesielle behov bygger vi også løsninger fra bunnen med eget publiseringssystem, slik vi gjorde for Stas Artist med nettbutikk, Vipps og Klarna. Se flere eksempler under kundehistoriene våre.

WordPress

• Svært populært og lett å bruke
• Massevis av temaer og plugins tilgjengelig
• Bra for alt fra små blogger til store nettbutikker

Webflow

• Gir deg mye kreativ frihet i designet
• Lett å lage animasjoner og interaktive elementer
• Bra for designere som vil ha full kontroll uten å kode

Shopify

• Spesiallaget for nettbutikker
• Har innebygde verktøy for salg og markedsføring
• Lett å sette opp og bruke, selv for nybegynnere

AI i webdesign

AI-verktøy kan nå lage utkast til hele nettsider på minutter. Det er nyttig til skisser og idéarbeid, men resultatet ser ofte likt ut som alle andres. Slik bruker du AI smart:

• Bruk AI til utkast, fargeforslag og tekstidéer
• La en designer forme uttrykket, slik at siden ligner deg og ikke en mal
• Kvalitetssikre alt: AI-generert innhold og design skal gjennom menneskelig kontroll før publisering

Verktøy for å teste

Bruk programmer som Hotjar for å se hvordan folk bruker nettsiden din:

• Se hvor folk klikker mest på siden din
• Finn ut hvor langt ned folk scroller
• Få tilbakemeldinger direkte fra brukerne

Slik blir nettsiden synlig i Google og AI-svar

Få søkemotorene til å like siden din. Se mer utfyllende informasjon om SEO-optimalisering her. Her er noen viktige tips:

Lag gode overskrifter og beskrivelser

Skriv noe som fanger folks interesse og som Google liker. Hvis du er usikker på hvordan, kan vår guide til søkemotoroptimaliserte tekster gi deg noen gode ideer.

• Bruk nøkkelord, men ikke overdriv
• Hold titler under 60 tegn og beskrivelser under 160 tegn
• Gjør det interessant. Tenk på hva som ville fått deg til å klikke

Bruk overskrifter riktig

Organiser innholdet ditt smart med H1, H2, H3 osv:

• Bruk bare én H1 per side. Dette er hovedoverskriften
• Bruk H2 for hovedseksjoner og H3 for underseksjoner
• Sørg for at strukturen gir mening og er lett å følge

Gjør bilder søkevennlige

Gi bilder gode navn og beskrivelser som forteller hva de viser. Vår lokal SEO-guide kan gi mer innsikt i hvordan bilder kan optimaliseres for søk.

• Bruk beskrivende filnavn (f.eks. «rod-eple-på-tre.jpg» i stedet for «IMG12345.jpg»)
• Legg til «alt text» som beskriver bildet for folk som ikke kan se det
• Komprimer bildene så de laster raskt, men behold kvaliteten

Tenk mobil først

Lag nettsiden for mobil først, det er slik Google ser på siden din:

• Sørg for at alt innhold er tilgjengelig og lett å bruke på mobil
• Sjekk at knapper og lenker er store nok til å klikke på med fingre
• Test nettsiden grundig på forskjellige mobilenheter

Bruk strukturerte data

Dette hjelper Google å forstå innholdet ditt bedre:

• Legg til schema markup for å gi ekstra informasjon om innholdet ditt
• Bruk strukturerte data for ting som produkter, anmeldelser og arrangementer
• Test strukturerte data med Googles testverktøy for å være sikker på at det fungerer

Bygg for AI-svar samtidig

Stadig flere finner bedrifter gjennom ChatGPT og Googles AI-svar i stedet for vanlige søketreff. At SEO og webdesign hører sammen er derfor ikke lenger valgfritt. Et godt strukturert webdesign er halve jobben:

• Tydelige overskrifter og korte avsnitt gjør innholdet enkelt å sitere
• FAQ-seksjoner med schema svarer direkte på det folk spør om
• Semantisk HTML hjelper både skjermlesere og AI-modeller å forstå siden

Dette kalles AEO. Les mer i guiden vår om AEO-optimalisering.

Slik får du folk til å gjøre det du ønsker på nettsiden

La designet ditt jobbe for deg. Her er noen smarte triks:

Lag gode knapper

Lag knapper som folk har lyst til å klikke på:

• Bruk farger som skiller seg ut fra resten av siden
• Skriv tydelig hva som skjer når man klikker (f.eks. «Start gratis prøveperiode» i stedet for bare «Klikk her»)
• Plasser knappene der folk naturlig vil lete etter dem

Test ulike design

Prøv forskjellige ting for å se hva som fungerer best:

• Lag to versjoner av samme side og se hvilken som gir best resultater
• Test forskjellige farger, tekst og plasseringer for knapper
• Spør brukerne dine hva de synes. Meningen deres er verdt mye

Bruk luft i designet

Gi innholdet ditt plass til å puste. Det gjør siden lettere å lese og forstå:

• Ikke prøv å presse for mye inn på én side
• Bruk mellomrom for å skille forskjellige seksjoner
• La viktige elementer stå alene så de virkelig skiller seg ut

Vis at folk kan stole på deg

Vis fram gode tilbakemeldinger fra kunder og bevis på at du er til å stole på:

• Legg til kundeomtaler på forsiden
• Vis fram priser eller utmerkelser du har fått
• Inkluder logoer til kjente kunder eller partnere

Tilpass opplevelsen

Gjør nettsiden litt forskjellig for ulike besøkende basert på hva de liker:

• Vis produktanbefalinger basert på hva folk har sett på før
• Endre innholdet basert på hvor folk kommer fra (f.eks. forskjellige land)
• La faste kunder få se spesialtilbud eller eksklusive ting

Webdesign handler om mer enn å lage noe som ser fint ut. Det er en blanding av kreativitet og smart tenkning. Med disse tipsene kan du lage nettsider som både ser bra ut og gir gode resultater. En godt laget nettside jobber for deg hele døgnet.

Noen siste tanker

Når du jobber med webdesign, er det lurt å huske på noen viktige ting:

Hold det enkelt

Noen ganger er det fristende å legge til masse kule funksjoner og effekter. Men ofte er det best å holde ting enkelt:

• Fokuser på det viktigste budskapet ditt
• Fjern alt som ikke har en klar hensikt
• Husk at folk ofte har dårlig tid når de er på nett

Tenk på brukerne dine

Det er lett å bli for opptatt av hva du selv liker. Men det viktigste er hva brukerne dine trenger:

• Spør kundene dine hva de vil ha
• Se på hvordan folk faktisk bruker nettsiden din
• Vær åpen for å endre ting som ikke fungerer bra

Oppdater jevnlig

En nettside er aldri helt ferdig. Den trenger stadig litt stell og pleie:

• Sjekk jevnlig at alle lenker og funksjoner virker
• Oppdater innholdet så det alltid er relevant
• Følg med på nye trender og teknologier

Skap en samlet opplevelse

Nettsiden din bør passe sammen med resten av merkevaren din:

• Bruk de samme fargene og fontene som i logoen din
• Sørg for at tonen i teksten matcher bedriftens personlighet
• Lag en opplevelse som føles konsistent, enten folk er på nettsiden din, i butikken din eller snakker med kundeservice

Skal du i gang med ny nettside? Vi designer og bygger nettsider som gir resultater, enten som fast prosjektpris eller som webdesign som løpende tjeneste. Se webdesign-tjenesten vår eller be om en gratis vurdering.

Ofte stilte spørsmål