Designprincipper til webdesign – 11 gode råd 9 min.

Når man snakker webdesign har det altid været forskellige trends og modefænomener. Sådan vil det helt sikkert altid være. Men uanset hvilken stil eller tendens man vælger at følge, er der designprincipper til webdesign som er værd at følge.

Den gode online kommunikation udspringer af et letforståeligt hierarki på det overordnede niveau såsom undersider, og hele vejen ned til delelementer som f.eks. tekst og billeder. Hierarkiet er vigtigt for at brugeren er helt med på hvad der er i fokus, når de besøger din hjemmeside. De fleste besøgende i dag skimmer kun din hjemmeside, og derfor er det blevet endnu vigtigere med et skarpt hierarki. Dette hierarki kan du skabe vha. forskellige designprincipper. I dette indlæg kigger vi på hvordan man kan anvende dem inden for webdesign, med digitypes.dk som eksempel.

Vi bruger i dette blogindlæg begrebet “UI” flere steder, det er en forkortelse for “User Interface” der på dansk betyder “brugerflade“.

1. Størrelse og skalering

Størrelse og skalering omfavner det visuelle hierarki som er essentielt for ethvert design og kompositionens delelementer. Det kan være alt fra tekststørrelser til billedstørrelse eller måske selve navigationen på hjemmesiden, i form af menu og knapper der skal gøres store eller små. Det hele handler om budskabet og den rute du ønsker den besøgende skal på når de besøger hjemmesiden.

Herunder har vi demonstreret et design med afbalanceret skalering jvf. den ønskede rute og fokus, samt dens respektive modsætning hvor skaleringen er helt ensartet.

2. Kontrast og farve

Farver og kontrast er en uundgåelig del af et webdesign, og hvis dette princip bruges rigtig kan det være med til at skabe den samlede helhed i oplevelsen af designet. Farver og kontrast kan bruges til at fremhæve eller nedtone elementer alt efter hvilken farve der er tale om og på hvilken farvebaggrund. Dvs. farver i kombination kan understøtte det visuelle hierarki og gøre dit budskab tydeligere. Med den rette balance mellem varme og kolde farver brugt i for- og baggrund kan du understøtte et stærkt visuelt hierarki.

Du kan læse vores blogindlæg, Farvecirkel og Farveteori, og blive klogere på hvordan man kan sammensætte farver og hvad det har af beydning.

3. Typografisk hierarki

Hierarki som er et gennemgående tema for design, gør sig i den grad også gældende når det kommer til de typografiske valg på en hjemmeside. Her skal der vælges skrifttype, skriftstørrelser, linje- og bogstavafstand samt farver og kontrast til hver enkelt niveau i det typografiske hierarki.

Dvs. der skal laves en klar graduering af hvordan en overskrift ser ud? Hvordan en underoverskrift ser ud? Måske flere niveauer af underoverskrifter? Hvordan ser brødtekster ud? Hvordan ser linktekster ud? Hvordan ser knaptekster ud?

Hvert niveau af typografiske elementer har forskellige formål på en hjemmeside.

• Overskriften siger noget generelt om den kategori af viden du kan finde på lige netop den hjemmeside og måske dens undersider.
• Underoverskrifter er til for at skabe opmærksomhed med få ord i en sætning, der bliver fremhævet som blikfang fra den besøgende. De er også med til at gøre tekster skimmevenlige.
• Brødtekster er her hvor den besøgende kan få flere detaljer om et specifikt område, som går ind under den overordnede kategori (overskrift og underoverskrifter).
• Links og knapper er en essentiel del af en hjemmeside. De kan vises som brødtekst, overskrifts link, eller en knap som rent basalt set er et almindeligt link der er blevet stylet med CSS (modsat knapper lavet som billeder, der dermed ikke er typografiske).

Nedenfor Ser du 2 eksempler med forskellige UI’er. På hver har vi demonstreret hvordan et godt typografiske hierarki ser ud, samt hvordan typografi ser ud uden et klart hierarki. Her bliver det tydeligt at uden typografisk hierarki smelter oplevelsen af tekstelementer sammen, og det er svært for øjet at udvælge et klart fokus.

4. Afstand / padding

Med afstand skaber du plads til at dit budskab kan stå klart frem. Den helt rette padding / afstand skaber balance i det overordnede udtryk på UI’et. Når der anvendes for lidt afstand kan elementerne og grupperingerne opfattes som uoverskuelige eller rodede, uden en klar adskilles for øjet af, hvad der hører sammen med en afbalanceret afstand til de andre elementer i hjemmesidedesignet.

Herunder kan du se eksempler på hvad afstand gør i et hjemmesidedesign, og for de elementer designet består af.

5. Nærhed og gruppering

Med nærhed skaber du gruppering og en samlet forståelse af forskellige UI elementer. Det kan være et billede, en overskrift og brødtekster som hænger sammen. For at skabe forståelsen for hjernen og øjet, er det nødvendigt at de er placeret tæt sammen i forhold til andre elementer i designet.

Generelt set består hjemmesidedesign af grupperinger som man scroller ned over, eller på anden vis navigerer sig gennem. Hvis ikke og afstanden er for stor mellem elementerne som hører sammen og beskriver hinanden, kan det opfattes som de svæver og vil væk, eller skaber ubalance i det overordnede udtryk. Et godt hjemmeside design præsenterer klynger af informationer (overskrifter, billeder, grafer, tal) som skal lede intuitivt videre på hjemmesiden.

6. White / negative space

White space princippet understøttes i den grad af afstandsprincippet (beskrevet tidligere i indlægget). Her kigger man på baggrundsområdet og bruger det aktivt til at skabe så meget plads at budskabet kan stå frem alene. I de minimalistiske og eksklusive hjemmesidedesigns anvendes negativ space princippet rigtig meget og giver et klart budskab til den besøgende. Vi er store fans af White space i webdesign hos Digitypes.

7. Justering / arrangering

En gruppering af elementer skal justeres ens for at skabe en sammenhængende oplevelse af delelementer i UI’et. Det gælder grafikker, ikoner og tekster der beskriver hinanden. Justeringen af tekstelementer har 3 grundlæggende retninger: venstre, centeret, højre.

Det er vigtigt at dine grupperede UI elementer giver et sammenhængende udtryk, og her er justering et stærkt værktøj til at give den gode og letforståelige brugeroplevelse.

8. Gentagelse

I et webdesign er genkendelse en vigtig del af det at få brugeren til at føle at der er en sammenhæng og kontinuerlighed i måden navigation og information er præsenteret på. Det betyder at overskrifter har én type styling, og underoverskrifter og brødtekster har hver deres styling. Knapper og links er stylet ens i UI’et så besøgende hurtig forstår hvilke elementer i UI’et der er klikbare. Bevar den røde tråd.

9. Balance

Et godt webdesign giver en oplevelse af balance ud fra de elementer der er med til at udgøre designoplevelsen. Her drejer det sig om overskrifter, tekster, billeder og grafikker. Placering, gruppering og arrangering af disse er afgørende for at skabe et afbalanceret udtryk. Justering og arrangering kigger på de enkelte designelementer hvor balance mere handler om det overordnede.

10. Ledende linjer / Retning

Når det kommer til webdesigns kan ledende linjer anvendes på rigtig mange måder. Det kan være i form af en lille pil på knapper, eller “usynlige” linjer som opstår ved positioner og arrangeres af designets delelementer. Retningen på på ledende linjer kan enten henlede direkte til et specifikt element eller mere overordnet for at lægge op til at scrolle længere ned på siden. Når det kommer til knapper og brug af pile eller lignende vil man oftest pege mod højre, da vi i vesten læser fra venstre mod højre og indholdet på knappen henleder til den næste underside i brugerrejsen.

11. Gitter struktur

Når det drejer som om webdesign gør et gitter sig meget gældende for at indramme hjemmesidens overordnede udtryk og ikke mindst dens delelementer. Et godt gitter kan det gøre det nemmere for din besøgende at skanne dit indhold via gitteres linjer og derved mere brugervenligt og umiddelbart at forstå.

Konklusion på designprincipper til webdesign

Følger du disse ovenstående principper når du laver design til din hjemmeside, vil du være godt på vej til at skabe en god brugerflade og dermed en god brugeroplevelse for din målgruppe. Og gør du det, bliver det meget nemmere for dit budskab at nå igennem på den måde du ønsker det.