Design av nettsider: slik gjør du det – og feilene å unngå

Nettsidedesign handler om fire ting samtidig: struktur, visuell utforming, innhold og teknisk ytelse. En side ser profesjonell ut når disse henger sammen, ikke når den har flest effekter. De vanligste feilene oppstår når utseendet bestemmes før du har avgjort hva siden skal få besøkende til å gjøre. Forbeholdet: en liten bedrift trenger sjelden unikt design på alle sider.

Hva nettsidedesign faktisk er

De fleste tenker på farger, fonter og bilder når de hører «design av nettsider». Det er den synlige delen, men det er den minste delen av jobben. Et nettsidedesign er egentlig fire lag som må henge sammen, og de fleste problemene oppstår i overgangen mellom dem.

• Struktur: hvilke sider som finnes, hva de heter, hvordan de henger sammen og hva som er nivå én i menyen
• Visuell utforming: fargepalett, typografi, avstander, knappestiler, bildebehandling – reglene som gjør at siden ser ut som én ting
• Innhold: tekstene, bildene, produktinformasjonen og rekkefølgen budskapene kommer i
• Teknikk: hvordan designet oppfører seg på ulike skjermstørrelser, hvor raskt det laster, og om det kan brukes med tastatur og skjermleser

Når noen sier at en side «ser billig ut», er det sjelden fargevalget som er problemet. Det er som regel inkonsistente avstander, tekst som ligger for tett på kanten, bilder i ulik stil og knapper som ser forskjellige ut fra side til side. Design er i praksis et sett regler som følges konsekvent. Det er også derfor et middels vakkert design som følges strengt, slår et vakkert design som brytes på annenhver side.

Designet skal løse en oppgave. For et regnskapskontor er oppgaven som regel å få frem hvem dere hjelper og gjøre det enkelt å ta kontakt. For en nettbutikk er oppgaven å få folk fra forsiden til riktig produkt med færrest mulig steg. To sider som ser like ut, kan altså være henholdsvis vellykket og mislykket design, avhengig av oppgaven. Vi anbefaler at du skriver ned den oppgaven i én setning før du ser på et eneste designforslag.

Designstiler – og hva du gir opp med hver av dem

Det finnes ingen «riktig» stil, men det finnes stiler som passer dårlig til bestemte formål. Under er de fire retningene vi oftest ser hos norske SMB-er, og den prisen hver av dem faktisk har. Prisen er sjelden penger – den er noe du mister.

Den vanligste feilvurderingen her er å velge visuelt tung stil uten å ha bildene. En hotellside med profesjonelle bilder fra fotograf ser fantastisk ut. Den samme malen med mobilbilder tatt i grått vintervær ser verre ut enn en nøktern side ville gjort. Stilen din bør altså velges ut fra hvilket materiale du faktisk har eller vil betale for å skaffe.

Slik går du fram, steg for steg

Rekkefølgen betyr mer enn folk tror. Nesten alle designprosjekter som sporer av, har hoppet over steg to eller tre og gått rett på utseendet.

1. Bestem oppgaven: hva skal siden få besøkende til å gjøre, og hvem er de
2. Lag sidekartet: hvilke sider trengs, hva heter de, hva ligger i menyen
3. Skriv innholdet, eller i det minste råteksten til forsiden og de to viktigste undersidene
4. Skaff bildene – egne bilder av folk, lokaler og arbeid slår alltid stockbilder
5. Design forsiden og én underside først, og få dem godkjent før resten tegnes
6. Bygg siden, test på ekte mobiler, mål lastetid og gå gjennom tilgjengelighet
7. Publiser, og legg inn et fast tidspunkt for gjennomgang etter noen måneder

Domenet bør være avklart tidlig, ikke fordi det påvirker designet, men fordi det påvirker navnet på siden, e-postadressene og alt som skal trykkes. Du kan sjekke om domenet er ledig på få minutter og kjøpe det du lander på før du bruker penger på design. Trenger du å forstå hva som faktisk skjer teknisk når designet skal bli en fungerende side, går vi gjennom det i artikkelen om nettsideutvikling.

Så kommer valget som avgjør både budsjett og resultat: skal du bygge selv i en mal, eller sette bort designet? En gratis nettside eller rimelig malløsning er et fullt forsvarlig utgangspunkt for en enkeltpersonvirksomhet som først og fremst trenger å finnes på nett. Skal siden være en salgskanal, endrer regnestykket seg – og da handler det mer om å velge riktig webdesignbyrå enn om å velge riktig mal.

Feil 1: Designet starter med utseendet, ikke med oppgaven

Det typiske forløpet: noen finner tre sider de liker, sender dem til designeren og sier «sånn omtrent». Det virker fornuftig, fordi det er lett å peke på noe visuelt og vanskelig å beskrive en struktur. Problemet er at du kopierer løsningen på en annen bedrifts problem. En konsulentside med én tjeneste og en produsent med fire produktkategorier trenger fundamentalt ulik forside, selv om begge kan bruke samme fargepalett.

Kostnaden er at siden blir vakker og formålsløs. Besøkende skjønner ikke innen få sekunder hva dere gjør og hvem det er for, og forlater siden. Løsningen er å definere én hovedhandling per side og bygge hierarkiet rundt den: hovedoverskrift som sier hva dere gjør, underoverskrift som sier for hvem, og én tydelig knapp. Alt annet er støtte. Google beskriver selv dette som utgangspunktet for innhold som skal fungere for folk først, i veiledningen om nyttig innhold.

Feil 2: Mobilen designes til slutt

Designet lages i full bredde på en stor skjerm, godkjennes i det formatet, og «tilpasses mobil» på slutten. Det virker rasjonelt, fordi det er lettere å tegne på en stor flate. Men da har du allerede tatt beslutninger som ikke overlever: firespaltede seksjoner, tekst oppå bilder, tabeller som må skrolles sidelengs, og menyer med ni punkter som klapper sammen til en uleselig liste.

Ifølge Bring sin netthandelsrapport (2024) handler 82 % av nordmenn på nett månedlig, og helse og personlig pleie er blant de raskest voksende kategoriene.

Poenget er at mobilskjermen er der de fleste av disse møtene skjer. Vårt råd er å godkjenne mobilversjonen først, og se på desktop som en utvidelse av den. Test på en faktisk telefon, ikke bare i nettleserens utviklingsverktøy – trykkflater, tastatur som dekker skjemafelt og fett på skjermen finnes ikke i simulatoren.

Feil 3: Forsiden fylles opp fordi alle skal med

Salgsavdelingen vil ha kampanjen øverst, HR vil ha rekrutteringsbannere, ledelsen vil ha bærekraftsrapporten og noen vil ha nyhetsbrevet i en sprettoppboks. Hvert enkelt ønske er rimelig. Summen er en forside der ingenting er viktig, fordi alt er viktig.

Kostnaden er målbar i form av folk som skroller forbi det du faktisk tjener penger på. Et nyttig verktøy i den diskusjonen: for hvert element, spør om siden ville blitt dårligere uten det. Hvis svaret er nei eller «vet ikke», ut med det. Vi anbefaler å sette et tak på antall seksjoner på forsiden før designet starter, og la nye ønsker konkurrere om plassene i stedet for å legges til på bunnen.

Feil 4: Tunge bilder og effekter som gjør siden treg

Designet ser raskt ut i presentasjonen, fordi bildene ligger lokalt på designerens maskin. På en telefon i dårlig dekning er den samme forsiden en video på flere megabyte, seks skrifter, et chat-skript, et samtykkeskript og et sporingsskript som alle skal lastes før noe blir synlig.

Dette er et designvalg, ikke et utviklerproblem. Bakgrunnsvideo i toppen, karuseller med ti store bilder og skriftvarianter i fem vekter bestemmes i designfasen. web.dev sin gjennomgang av nettytelse går grundig gjennom hva som faktisk bremser en side, og det er verdt å lese før du godkjenner en tung forside. Vi ville prioritert bort bakgrunnsvideo i nesten alle tilfeller: den koster mye ytelse og gir sjelden noe tilbake ut over et førsteinntrykk de fleste allerede har skrollet forbi.

Feil 5: Estetikk foran lesbarhet og tilgjengelighet

Lysegrå tekst på hvit bakgrunn, tynn skrift i 14 piksler, knapper uten synlig kant, lenker i samme farge som brødteksten. Det ser rolig og moderne ut i et designverktøy på en kalibrert skjerm. På en telefon i sollys, eller for en person over femti, er det uleselig.

WCAG 2.2 fra W3C setter konkrete krav til blant annet kontrast, tastaturnavigasjon og tydelige skjemaetiketter. For norske virksomheter er dette dessuten et område der regelverket har blitt strengere over tid, og hvor det er lurt å avklare hva som gjelder for akkurat din type virksomhet. Uansett juridisk status: tilgjengelige valg gjør siden bedre for alle. Større trykkflater hjelper folk med skjelvende hender og folk på bussen like mye.

• Tekst med tydelig kontrast mot bakgrunnen, også på bilder og fargede felt
• Farge er aldri eneste signal – feilmeldinger og lenker må også skille seg ut på annen måte
• Alt kan nås med tastatur, og du ser hvor du er
• Bilder har alt-tekst som beskriver innholdet, ikke filnavnet
• Skjemafelt har synlige etiketter, ikke bare grå hjelpetekst inne i feltet

Feil 6: Design uten ekte innhold

Designet godkjennes med fyllstoff og pene stockbilder. Alle er fornøyde. Så skal den virkelige teksten inn, og overskriften som var på tre ord blir på elleve. Bildene av glade mennesker i et amerikansk kontorlandskap byttes med et bilde av verkstedet. Plutselig fungerer ikke layouten, og hele seksjoner må tegnes om – etter at budsjettet er brukt.

Dette er den dyreste feilen i listen, fordi den treffer sent. Den vanligste årsaken er at ingen har fått ansvaret for tekstene, og at de derfor blir liggende til slutt. Vårt råd er å ikke starte designfasen før forsiden og de to viktigste undersidene finnes som råtekst. Den teksten trenger ikke være ferdig språkvasket – den må bare ha riktig lengde og riktige poeng. Skal du bygge en hjemmeside for bedriften, er dette punktet der prosjektet enten går greit eller drar ut.

Feil 7: Ingen plan for hvem som skal vedlikeholde designet

Siden lanseres og ser bra ut. Et halvår senere har noen lagt inn en nyhet med en annen overskriftsstørrelse, en ansatt har lastet opp et bilde i feil format, og en tjenesteside har fått en knapp i en annen farge. Ingen enkeltendring er stor. Samlet gjør de at siden ser slurvete ut, og det er nettopp den slurvete følelsen folk tolker som lav troverdighet.

Løsningen er kjedelig og virker: skriv ned reglene. Hvilke overskriftsnivåer finnes, hvilke to knappetyper er lov, hvilket format og hvilken bildestil skal brukes, hvem har lov til å publisere. En side i et delt dokument holder for de fleste. Uten den siden vil designet forvitre uansett hvor mye du betalte for det.

Design og synlighet i søk

Design påvirker synlighet indirekte. Google sin SEO-startveiledning er tydelig på at innholdet og strukturen er det som gjør en side forståelig – tydelige overskriftsnivåer, beskrivende lenketekst, alt-tekst på bilder og en logisk sidestruktur er designvalg som også hjelper søkemotorer. Motsatt er en forside der hele budskapet ligger i et bilde eller en video, en side som knapt har innhold å bli funnet på.

I 2026 må du også regne med at en del av trafikken kommer via AI-svar. Googles AI Overviews og AI Mode henter fra de vanlige søkesystemene, det finnes en inkluderingsinnstilling i Search Console, og Search Console har en egen rapport for AI-flatene. Google har samtidig sagt at de ikke bruker llms.txt. Hva som konkret gjør at akkurat din side blir sitert i et AI-svar, er derimot omdiskutert. Vi lener mot at det viktigste er det samme som før: at siden faktisk svarer på et spørsmål, i tekst som kan leses. Påstander om at strukturerte data i seg selv gir plass i AI-svar, er ikke dokumentert.

Sjekklisten før du godkjenner et designforslag

Når du får et forslag på bordet, er det lett å svare på om du liker det. Det er et dårlig spørsmål. Disse er bedre:

• Kan en fremmed si hva dere gjør og for hvem, etter fem sekunder på forsiden på mobil?
• Hva er hovedhandlingen på denne siden, og ser jeg den uten å skrolle?
• Er forslaget vist med våre egne tekster og bilder, eller med fyllstoff?
• Hvor mange skrifter, skriftvekter og knappetyper er i bruk – og kan vi kutte noen?
• Hvordan ser en tom tilstand ut: en tjenesteside uten bilde, en nyhet uten bilde, et skjema med feilmelding?
• Hvem skal oppdatere dette om seks måneder, og klarer de det uten hjelp?

Sitter du med et forslag du er usikker på, eller en side som ser grei ut uten å gi henvendelser, er det som regel struktur og innhold som må sees på først. Det er den jobben vi gjør når vi designer og bygger nettsider – og vi går gjerne gjennom eksisterende design før du bestiller en ny.