Denne nettdesignguiden er en kortfattet oversikt over hva jeg har lært de siste 10 årene om hva som kreves for effektivt nettdesign.
Den gode nyheten: vi holder oss ikke bare til teori – jeg gir deg konkrete designtips som du kan implementere på nettstedet ditt i dag.
Vi tar for oss hvordan du gjør tekst så lesbar som mulig, bruker farger riktig, får bilder til å komme til sin rett, og skaper en god brukeropplevelse.
1. Viktigheten av godt nettdesign
Hvorfor er godt nettdesign viktig?
Godt nettdesign er superviktig for suksessen til nettstedet ditt. En studie som undersøkte hvorfor folk ikke stolte på nettsteder, viste at 94 % av kommentarene var designrelaterte. Bare 6 % hadde med innholdet å gjøre.
Et godt designet nettsted gir tillit hos leserne dine og skaper en bestemt atmosfære. I tillegg gjør godt design det enklere for besøkende å absorbere informasjonen på nettstedet ditt.
Omvendt vil dårlig design føre til at brukerne stoler mindre på nettstedet ditt og forlater sidene dine raskere. Fluktfrekvensen din vil skyte i været og konverteringene dine vil lide.
Prinsipper for godt nettdesign
Hold det enkelt
Enkelhet bør være det primære målet med nettdesign. Uansett hvor fristende det er å legge til pynt og effekter, tenk alltid på brukeren din.
Ikke la brukerne dine tenke
Når du designer nettstedet ditt, er det din jobb å fjerne alle spørsmålstegn fra besøkende. Dette kan du gjøre ved å sette opp en klar visuell hierarki, logisk navigasjon og konsekvens i designelementer.
Fokuser oppmerksomheten på de rette tingene
Bruk fargekontrast eller størrelseskontrast for å lede oppmerksomheten til besøkende til bestemte deler av nettstedet ditt.
Bruk mye hvitt rom
Nettstedet ditt er mye mer behagelig å bruke når du bruker mye hvitt rom mellom designelementer og tekst. Hvitt rom gir nettsidene en romslig følelse.
Originalitet er fint, men ikke gå for langt
Følg designregler som folk er kjent med. Brukere forventer en viss forutsigbarhet når de besøker et nettsted.
2. Tekst: skrifttyper, størrelse og lesbarhet
Skrifttyper og påvirkningen på din identitet
Ulike skrifttyper genererer ubevisst forskjellige følelser hos folk. Dette har direkte innvirkning på merkeidentiteten din. Hvis nettstedet ditt handler om yoga, vil du bringe frem en annen følelse enn med en forretningsblogg.
Slik velger du en skrifttype
Det finnes tusenvis av skrifttyper å velge mellom. For å forenkle valget:
- Tilknytning til merkevaren din. En vakker skrifttype gir lite hvis den ikke samsvarer med merkevaren din
- Tenk på publikummet ditt. Prøv å finne en balanse mellom personlig smak og hvem som besøker nettstedet ditt
- Lesbarhet > utseende. Unngå svært kunstneriske skrifttyper, uansett hvor elegante de ser ut
- Allsidighet. Hvordan ser skrifttypen ut i forskjellige størrelser og tykkelser?
Synes du det er vanskelig å velge en skrifttype? Se på Roboto, Lato eller Open Sans. Disse er nøytrale, passer til mange nettsteder og er gratis å bruke.
Bruk maksimalt to forskjellige skrifttyper: en for titler og en for vanlig tekst. Jo flere skrifttyper du velger, jo større er sjansen for at du svekker den visuelle balansen til nettstedet ditt.
Skriftstørrelse og skala
Jeg vil anbefale å velge minst en tekststørrelse på 16px, men enda bedre er 18px. Hvis du går mindre enn det, vil det påvirke lesbarheten til nettstedet ditt – spesielt for dine eldre besøkende.
Velg størrelsen på teksten og titlene dine ikke tilfeldig. Sørg for at størrelsene på titler, undertitler og tekst er modulært proporsjonert. Dette kan du enkelt gjøre ved hjelp av dette verktøyet.
Tekst farge og linjehøyde
Når det gjelder fargen på teksten din, bør du holde det trygt. Mørkegrå eller mørkeblå på en hvit bakgrunn fungerer best. Beksvart tekst er mer belastende for øynene enn en gråtone.
Ved å bruke tilstrekkelig linjehøyde, vil tekstene puste mer og bli lettere å lese. For en skriftstørrelse på 18px ville jeg brukt en linjehøyde på minst 1,8em.
Bredden på tekstkolonnen
Bredden på tekstkolonnen din har direkte innvirkning på lesbarheten. Forskning har vist at den mest behagelige leseteksten bør være mellom 480 og 700 piksler bred. Er tekstkolonnen bredere, må du flytte øynene for mye frem og tilbake.
3. Farger
Farge: enkelhet og konsistens vinner
Farge påvirker følelsene til besøkende og hjelper dem med å navigere enklere på nettstedet ditt. Forskning fra Adobe og University of Toronto viser at folk foretrekker enkle farger. I mange tilfeller ble bruken av 2 eller 3 forskjellige farger sett på som det mest tiltalende.
Hvordan lage en fargepalett
En fargepalett bestemmer utseendet til nettstedet ditt og gir visuell konsistens. Du kan dele det inn i tre kategorier:
Accent farger
Disse fargene brukes til å trekke oppmerksomhet, for eksempel for call-to-actions. Det er viktig at disse fargene skiller seg sterkt ut fra resten av nettstedet ditt.
Tekst farger
Du vil vanligvis velge et spektrum av gråtoner for dette. Disse kan være «grå grå», men også en varm eller kald nyanse.
Bakgrunnsfarger
Bakgrunnsfargene dine er vanligvis de lyseste fargene på nettstedet ditt. Vanligvis hvit eller lysegrå, men du kan også velge andre lyse farger.
Nyttige fargeverktøy
- Image Color Picker – Last opp bilder og sjekk hvilke farger som brukes
- Adobe Color Wheel – Design ditt eget fargepalett på få klikk
4. Bilder
Viktigheten av bilder
Hver nettside bør bruke bilder. I tillegg til at det gjør nettstedet ditt mer attraktivt, kan bilder også øke brukervennligheten.
Mennesker er visuelle skapninger. Besøkende vil lese innholdet ditt lenger når tekst blir avbrutt av bilder. Denne lengre lesetiden gir et positivt signal til Google.
Hvor finner du bilder?
Stock fotosider
Den enkleste måten å skaffe bilder på. Mine favorittsteder:
Ta bilder selv
Mer tidkrevende, men du får 100 % originale bilder som virkelig tilfører merverdi til nettstedet ditt.
Ta skjermbilder
For programvareveiledninger eller anmeldelser. Dette gjør innholdet ditt mye mer overbevisende og lettere å følge.
Oppgrader bildene dine med en kant
Kanter på bilder, som du ser her i denne artikkelen. Dette gjør at de skiller seg ut mot teksten din, spesielt for skjermbilder med mye hvitt.
5. Brukeropplevelse (UX)
Hva er brukeropplevelse?
Brukeropplevelse refererer til hvordan en bruker opplever og samhandler med et nettsted. En god UX sørger for at brukeren enkelt kan løse problemet de kom for.
UX er annerledes enn UI (brukergrensesnitt). UX er den overordnede opplevelsen, mens UI handler om hvordan nettstedet ditt ser ut og blir presentert.
Navigasjon
Meny
En godt strukturert meny kan gjøre navigeringen enkel eller vanskelig. Plasser menyen øverst på siden med logoen din på venstre side. I midten plasserer du de viktigste delene av nettstedet ditt.
Hjemmeside
For mange nettsteder er hjemmesiden den viktigste siden. Her viser du besøkende hva du gjør og hvorfor din virksomhet er verdt tiden.
Viktige elementer:
- Over bretten – Klargjør hva du gjør + call-to-action
- Sosialt bevis – Anmeldelser, attester eller kjente publikasjoner
- Mer detaljert beskrivelse – Konkret forklare hva du har å tilby
- Produktet/tjenesten din – Presentere det klart og tydelig
- Siste innhold – Vise at nettstedet ditt er oppdatert
Hastighet
Ingen liker trege nettsteder. Raske nettsteder konverterer bedre og rangerer høyere på Google.
Forskning viser at:
- Ladetid på 0-4 sekunder gir de beste konverteringsratene
- Konverteringsrater reduseres med 4,42 % per ekstra sekund ladetid
Størst påvirkning på WordPress hastighet:
- Webhotell – Uten god hosting forblir siden din treg: med en host som my.host vil nettsiden din alltid laste raskt
- Theme – Velg lette temaer som Kadence eller GeneratePress
- Bilder – Bruk WebP-format og lazy loading
- Plugins – Installer så få plugins som mulig
Test hastigheten din med PageSpeed Insights og GTmetrix.
Neste trinn
Godt webdesign kombinerer alle de ovennevnte elementene. Begynn med det grunnleggende – leselig tekst, enkle farger og rask lastetid. Legg deretter gradvis til mer avanserte elementer.
Det viktigste er at du begynner. Hver forbedring du gjør, uansett hvor liten, bidrar til en bedre brukeropplevelse og til slutt flere konverteringer.
Legg igjen en kommentar