Hjemmeside design
Et godt design gør det nemt for dine besøgende at finde rundt, forstå dit budskab og tage den næste handling. Her får du principperne bag godt design af hjemmesider — layout, typografi, farver, billeder og navigation — og konkrete måder at bruge dem på din egen side.
Hvad er godt hjemmeside design?
Design af en hjemmeside er ikke kun et spørgsmål om, hvad der er pænt. Det er summen af de valg, der afgør, om besøgende bliver — eller klikker videre. Otte ting er værd at have styr på:
Struktur og layout
Hvordan indholdet er ordnet, og hvad øjet møder først.
Typografi
Skrifttype, størrelse og linjeafstand afgør, om teksten bliver læst.
Farver
Skaber stemning, genkendelse og fremhæver det, der skal klikkes på.
Billeder
Fortæller på et sekund det, teksten bruger et afsnit på.
Navigation
Få, tydelige menupunkter, så ingen farer vild.
Hierarki og læsbarhed
Det vigtigste skal se vigtigst ud — resten må gerne fylde mindre.
Mobiloplevelse
De fleste besøg sker på telefonen. Designet skal virke der først.
Næste handling
Det skal være åbenlyst, hvad du gerne vil have folk til at gøre.
Forskellen på flot og velfungerende
En hjemmeside kan sagtens være smuk og alligevel være en dårlig hjemmeside. Forskellen ligger i, om designet hjælper den besøgende videre. Undersøgelser peger på, at folk bruger få sekunder på at afgøre, om de er landet det rigtige sted — og først derefter læser de videre.
Derfor skal designet svare på tre ting med det samme: Hvad er det her? Er det noget for mig? Og hvad skal jeg gøre nu? Det sidste kan være at kontakte, købe, booke, læse mere, se produkter eller få et tilbud — men det skal være ét tydeligt valg og ikke fem lige gode.
Ser flot ud
- Stort billede uden budskab
- "Velkommen til min hjemmeside"
- Mange menupunkter i to niveauer
- Fortæller hvad du gør
Fungerer godt
- Billede plus en overskrift, der siger hvad du tilbyder
- Konkret udbytte i toppen
- Under syv menupunkter
- Fortæller hvad den besøgende får
Hjemmeside layout
Layoutet er den rækkefølge og placering, indholdet får. Et godt hjemmeside layout arbejder med visuelt hierarki: det vigtigste er størst og ligger øverst, og resten falder naturligt nedenfor. Vi læser fra toppen og fra venstre, så det, der skal ses, skal ligge der, hvor øjet allerede er.
Whitespace — den tomme plads omkring elementerne — er ikke spildt plads. Det er den luft, der gør, at en overskrift bliver set, og at en knap ligner en knap. Del siden op i tydelige sektioner med ét formål hver, og lad hver sektion slutte med en naturlig vej videre.
- Ét hovedbudskab øverst — ikke tre konkurrerende
- Sektioner med hver sin opgave, i logisk rækkefølge
- Luft mellem elementerne, så siden kan skimmes
- Knapper og CTA'er placeret der, hvor beslutningen tages
- Genkendelig navigation samme sted på alle sider
Skal du i gang, er det nemmeste at starte fra et layout, der allerede virker. Se skabelonerne og vælg det, der ligger tættest på dit formål — du kan flytte rundt bagefter.
Typografi: skrifttypen definerer din hjemmeside
Skrifttypen er et af de mest undervurderede valg i design af hjemmesider. Den signalerer seriøsitet, ro, leg eller klasse, længe før nogen har læst et ord. En bedemand og en legetøjsbutik kan skrive præcis det samme og alligevel virke vidt forskelligt.
Rolig og klassisk
Serif — troværdighed, tradition
Ren og moderne
Sans serif — klarhed, enkelhed
Markant
Tung vægt — energi, opmærksomhed
- Brug højst to skrifttyper: én til overskrifter, én til brødtekst
- Brødtekst skal være stor nok til at læses på mobil uden at zoome
- God linjeafstand gør lange tekster overkommelige
- Hold kontrasten høj — lysegrå tekst på hvid bliver ikke læst
- Lad overskrifterne følge en fast rangorden ned gennem siden
Du vælger selv skrifttyper på din side under skrifttyper, og der er flere råd i 7 tips til valg af skrifttype.
Farver: hjemmesidens stemning
Farver afkodes hurtigere end tekst. De sætter stemningen, skaber genkendelse på tværs af logo, hjemmeside og tryksager, og de hjælper med at rangordne indholdet: den vigtigste knap får den stærkeste farve, resten træder tilbage.
- Vælg én hovedfarve, en neutral baggrund og én accentfarve til handlinger
- Brug accentfarven sparsomt — ellers holder den op med at betyde noget
- Sort, hvid og grå virker altid, men kan hurtigt blive anonymt
- Tjek at tekst og baggrund har nok kontrast
- Lad farverne hænge sammen med dit logo
Du sætter farverne på din hjemmeside under farver. Mangler du et logo at bygge paletten omkring, kan vi designe et logo til dig.
Billeder og visuelt indhold
Et billede fortæller på et øjeblik, hvad du laver, hvem du er, og hvor godt du gør det. Et uskarpt, skævt eller mørkt billede fortæller desværre lige så tydeligt det modsatte. Vis hellere få gode billeder end mange middelmådige.
- Vis dine egne produkter, dit arbejde og dig selv frem for anonyme stockfotos
- Store baggrundsbilleder skaber stemning — men vær varsom med tekst ovenpå urolige billeder
- Ensartet beskæring og lys får en side til at virke gennemarbejdet
- Komprimer billederne, så siden også er hurtig på mobil
Til galleri og portfolio kan du bruge fotoalbum og slideshow. Læs også om brug af baggrunde og find gratis billeder.
Mobil design
De fleste besøgende kommer fra telefonen, så designet skal først og fremmest fungere der. Alle skabeloner hos NemmeHjemmesider er responsive: indholdet flytter sig automatisk, så det passer til skærmen — men du skal stadig tjekke resultatet med egne øjne.
- Læsbar tekststørrelse uden at zoome
- Knapper, der er nemme at ramme med en finger
- Billeder i fornuftig størrelse, så siden loader hurtigt
- Enkel menu og kort vej til kontakt
- Ingen vandret scrolling
Læs mere om responsivt hjemmeside design.
Design, der hjælper folk videre
Sig tydeligt, hvad du vil have folk til at gøre. En knap med den rigtige tekst det rigtige sted er ofte det, der afgør, om et besøg bliver til en henvendelse. Formuleringen skal passe til branchen:
Se design i praksis
Den hurtigste vej til et godt design er at se, hvad der virker for andre. Referencerne viser rigtige hjemmesider bygget hos os, og skabelonerne giver dig et gennemtænkt udgangspunkt, du selv kan tilpasse.
Vil du hellere se den samlede løsning bag et professionelt udtryk, kan du læse om professionel hjemmeside — her på siden handler det om selve designet.
Hvad koster hjemmeside design?
Der er ikke én pris på design af hjemmesider — det afhænger af, hvor meget du selv laver, og hvor omfattende siden skal være. Disse forhold flytter prisen mest:
- Om du designer selv med en skabelon, eller får hjælp
- Hvor mange sider hjemmesiden skal have
- Om der skal laves specialdesign eller nyt logo
- Hvilke funktioner der skal med — webshop, booking, galleri
- Hvor meget indhold, tekst og billeder der skal produceres
Hos NemmeHjemmesider designer du selv oven på en færdig skabelon, så designet er en del af abonnementet — der kommer ingen separat designregning. Se aktuelle priser.
Har du fået et tilbud fra en anden leverandør, er det værd at spørge, hvad der er design, hvad der er opsætning, og hvad der er løbende drift. Det er tre forskellige ting.
Få en webdesignrapport på din side
Vil du have et par kritiske øjne på din nuværende hjemmeside, laver vi en webdesignrapport: en konkret gennemgang af formål, budskab, layout, farver, skrifttyper, billeder, troværdighed og call-to-action — med forslag, du selv kan gennemføre.
- Vi tager udgangspunkt i formålet med din hjemmeside
- Vi vurderer om budskab og visuelt udtryk hænger sammen
- Vi giver konkrete forslag til layout og design
- Du får rapporten på mail i PDF, og vi gennemgår hovedpunkterne på telefon
999 kr. ekskl. moms — intropris lige nu 99 kr.
Bestil eller hør mereDesignværktøjerne i din hjemmeside
Skrifttyper
Vælg skrift til overskrifter og brødtekst.
Farver
Sæt farvepaletten for hele siden.
Ikoner
Små grafiske elementer, der bryder teksten op.
Slideshow
Vis flere billeder i samme sektion.
Fotoalbum
Galleri til portfolio og produkter.
Teksteditor
Formatér tekst uden at rode layoutet.
Se hele listen under funktioner.
Ofte stillede spørgsmål om hjemmeside design
Kom i gang med dit eget design
Vælg en skabelon, der passer til formålet, og tilpas farver, skrifttyper og billeder, til det ligner dig.