Grundlæggende principper for harmonisk webdesign

Sonja Hoffmann Senest opdateret den 21.
7 Min.
Grundlæggende principper for webdesign
Senest opdateret den 21.

Som man siger, er der ingen ny chance for det første indtryk. Du går til en ukendt hjemmeside og inden for et par sekunder vil du bedømme, om denne side er "god" eller "dårlig". Især med dine egne kreationer, er det uendeligt vanskeligt at foretage en objektiv analyse. Heldigvis er der tidstestede designprincipper, som du kan følge. En oversigt.

Hvad er "god" webdesign?

Webdesign er ganske kompleks: det tager mere end blot et øje for god typografi og en følelse af en tiltalende visuel arrangement. Webdesign tilbyder en utrolig alsidig måde at udtrykke dig kreativt. Men samtidig giver det mindst lige så mange muligheder for at komme væk fra designprocessen. Især når du er dybt forankret i designprocessen, er det let at se skoven for træerne. Resultatet kan være et design, som vi finder "dårlig".

Vores bedømmelse er ofte intuitiv, så det er svært at forklare, hvorfor det samme designelement passer perfekt på en hjemmeside, mens det ser tabt og ude af sted på en anden.

Hvad gør en vellykket hjemmeside?

Gode hjemmesider giver oplysninger klart og effektivt, så brugerne intuitivt finde vej gennem webstedet. I de fleste tilfælde lykkes en brugerorienteret hjemmeside gennem et velafbalanceret samspil mellem typografi, interaktive elementer og en masse visuel finjustering. 

Og fordi dette ikke er kompliceret nok, vi er også begrænset af, hvad browsere af vores potentielle brugere kan repræsentere i første omgang. Hvis det er nødvendigt, de tekniske færdigheder af bygherren eller det værktøj, vi bruger til at skabe de respektive hjemmeside. 

Derudover bør du tage hensyn til aktuelle tendenser og også virksomhedens identitet af din kunde. Webdesign er dybest set summen af UX, UI og grafisk design, CI og de aktuelle tendenser under hensyntagen til de tekniske forhold.

Oprettelse af en webside er et temmelig stort projekt. Ikke underligt, at der normalt er et helt hold bag det. Ofte enkeltpersoner (og desværre hold) har tendens til at være mere opmærksomme på de områder, hvor de er særligt stærke. Mens andre områder får mindre – eller i ekstreme tilfælde slet ingen – opmærksomhed. Dette skaber en ubalance, der kan gøre dig finde en hjemmeside ringere og uharmonisk.

"God" webdesign er resultatet af en balance mellem de forskellige designområder og de tekniske forhold.

Da en detaljeret undersøgelse af alle områder ville gå ud over rammerne for denne artikel, I dag dedikerer jeg mig primært til visuelt design. 

Kontrast, blanktegn og farve

Kontrast er ofte kombineret med valget af de primære farver i designet samt mellemrum i sammensætningen. Men Whitespace betyder ikke nødvendigvis det rum, der er tilbage hvid. Den henviser snarere til mellemrummene mellem elementerne. Dette rum kaldes også "negativt rum" og kan stadig være farvet.

På grund af en masse blanktegn, en side normalt synes renere og klarere. Denne tilgang går også ofte hånd i hånd med Minimalisme. Det betyder konsekvent at fjerne alt fra det layout, der er unødvendigt og ikke bringer nogen mærkbar merværdi til designet. Det være sig tekst, dekorative elementer eller en strøm af cta'er.

Tip

Når du planlægger kontrast og farve, skal du være opmærksom på følgende: Svært at læse indhold kan få personer med synshandicap (f.eks. farvegenkendelse) til at holde op med at høre det.

Især med tendensen til at udfylde website overskrifter med store panoramabilleder, finder vi ofte tekst overlejringer, der er vanskelige at dechifrere.

Et vellykket eksempel på en masse blanktegn og kontrast

Grundlæggende principper for harmonisk webdesign
Grundlæggende principper for harmonisk webdesign

https://aiven.io/

Et svagt eksempel på kontrast

Her er et eksempel, der er et kontrastproblem, især i mobilversionen. Opfordringen til handling er helt nedsænket mod den rastløse baggrund.

hvorfor-ux-mislykkes
https://www.opitz-consulting.com/

Nogle gange er det ikke så let for designere at bortfiltrere de rigtige farver til et design. Heldigvis er der også mulige værktøjer, der lader os hurtigt teste forskellige kombinationer – før vi bruger meget tid på at skabe et dyrt layout.

farveteori: disse værktøjer hjælper dig med at vælge din farve

Farveværktøj til materialedesign

Farveværktøj til materialedesign Opretter low fidelity wireframes med to primære farver.

materiale-design-farve-værktøj

Adobe-farvehjul

Adobe-farvehjul hjælper dig ikke kun med at oprette forskellige farvepaletter, men udtrækker også de farvepaletter, du bruger, fra eksisterende designs. For nylig er dette også muligt fra farveforløb.

adobe-farvehjul

Når du vælger egnede farver, er det værd at se intensivt på kundens branding: Hvilke farvepaletter er allerede i brug? I hvilket omfang kan jeg afvige fra dette?

Det grundlæggende i farveteori er også uundgåelig: Ifølge din kundes respektive industri, en farve med den relevante psykologiske effekt kan vælges. Det er ikke tilfældigt, at blå ofte bruges i mere velrenommerede filialer - såsom forsikring, rådgivning og sammenligning hjemmesider. Blue har en tillidss inspirerende og beroligende effekt. Men man må ikke blive for generel her, fordi selv nuancer af samme farve kan fremkalde meget forskellige følelser.

Kender du 60-30-10 reglen?

Dette anbefales som en gylden regel for brugen af farvepaletter. Her er det anvendte princip: den vigtigste farve udgør omkring 60 procent af layoutet, en supplerende farve indeholder 30 procent og en tredje farvesæt yderligere højdepunkter med 10 procent. Dette arrangement har en særlig afbalanceret virkning på brugeren.

Symmetrisk eller asymmetrisk placering af designelementer

I deres artikel "Principperne for design og deres betydning" forfatter og designer Cameron Chapman forklarer hendes to vigtigste tilgange til balance i webdesign. Således, det adskiller indhold efter sin iøjnefaldende - det vil sige, om det er mere iøjnefaldende eller mindre fremtrædende. 

Derfor er følgende udfordring at arrangere indholdet på en sådan måde, at det giver en følelse af balance. Designbeslutningen kan bidrage til at "arrangere symmetrisk eller asymmetrisk".

Hvordan fungerer begge tilgange?

I den symmetriske tilgang, er elementer arrangeret sammen med en lignende berømthed. Den asymmetriske tilgang, på den anden side, ofte arrangerer mere fremtrædende og mindre iøjnefaldende indhold. 

Layoutet kan f.eks. Ved at gøre dette er elementerne klart adskilt fra hinanden, som det er tilfældet med Couro Azul sagen. Ofte er sådant indhold placeret lidt decentraliseret for at give det svagere element lidt mere plads og skabe en balance.

Couro Azu

Nul samme princip, men med en friere ordning, anvender det samme princip. Takket være den høje brug af Whitespace, det ser elegant og moderne.

Denne fremgangsmåde fungerer meget godt på større skærme (fra tabletstørrelse). Mindre enheder, såsom smartphones, på den anden side, drage fordel af klart adskilte, inter-arrangerede moduler.

Fastlæggelse og prioritering

Før vi begynder at designe en webside, skal det være klart defineret, hvilket budskab til at kommunikere. Klarhed i markedsføringskonceptet skaber ofte også klarhed i designlayoutet.

Når hovedbudskaberne er blevet fastlagt, er det vigtigt at fremhæve dem ved hjælp af farve og/eller typografi.

Du kan se, hvordan begge kan se kombineret i dette eksempel:

Cowboy
https://cowboy.com

Der er imidlertid mange måder at gennemføre den på. Fordi indhold kan fremhæves ikke kun af Fed typografi og Farve. Også gennem billeder - som med Jamie Olivers restaurant – og gennem et samspil mellem forskellige principper fokuserer du på udvalgt indhold.

Jamie Olivers restaurant

Proportion, samvær og hierarki

Indholdet af en side skal præsenteres på en sådan måde, at den giver mening i sit hierarki. Det vigtigste er at placere dig øverst. Med faldende betydning, bør du arbejde dig ned. Så du bør spørge dig selv: Hvilke oplysninger er vigtigst for den besøgende på mit websted? Hvad er kun yderligere oplysninger? 

Dette er også grunden til, at navigationsmenuen er øverst i de fleste tilfælde. Bortset fra at være en UI mønster, er det simpelthen et af de vigtigste aspekter af en side. Når alt kommer til alt, er menuen ikke andet end en oversigt over det centrale indhold, du tilbyder der. Så at sige, indholdet af din hjemmeside.

Visuelt hierarki: Det, der virkelig er vigtigt

Hierarkiet kan også oprettes ved hjælp af såkaldt bevægelse. Dermed arrangerer vi indholdet af siden på en sådan måde, at øjet er passeret igennem. Dette kan for eksempel opnås ved hjælp af former og arrangement. Denne Portefølje er et interessant eksempel på, hvordan sådan noget kan se ud:

Portefølje

Øjet styres gennem skærmen fra venstre mod højre. Punkt 01 har helt klart det største hierarki her – selv om alle elementer har samme størrelse og synes at være ækvivalente for øjeblikket. 

Andelen spiller også en rolle: elementer af samme størrelse, farve, form dybest set give os følelsen af at tilhøre sammen og har den samme funktion. Dette er især vigtigt for interaktive elementer.

Eksemplet ovenfor illustrerer, at et ensartet design i høj grad kan bidrage til visuel harmoni: 

  1. ensartede former anvendes til alle billeder,
  2. alle billeder harmoniseres i farver 
  3. I alt anvendes der kun to forskellige skrifttyper og størrelser, 
  4. for tastefejl og separatorer anvendes kun én farve,
  5. separatorerne er et tilbagevendende designelement – og de kombinerer visuelt billedet og de to overskrifter.

Grundlæggende principper i webdesign - Konklusion

På trods af alle de ovennævnte grundlæggende principper, er der regler, der skal brydes. Dette er den eneste måde at skabe et interessant, nyt design!

De tilgange, jeg kort har præsenteret her, er naturligvis ikke nye. Det er snarere variationer af videnskabelig og/eller psykologisk forskning, der er blevet overført til vores moderne kommunikationsmedier. Jeg personligt finder det vigtigt at kende disse teorier og metoder. Ofte gennemfører vi regler intuitivt alligevel, fordi vores kreative øje har "lært" det så meget.

Derudover er viden om forskellige tilgange inden for design med til at evaluere dine egne projekter. Ligner en tjekliste, du kan falde tilbage på, når du indser noget er ikke helt arbejder visuelt endnu. Ofte finder man ikke den nødvendige afstand til sit eget projekt for at vurdere det objektivt. 

De designprincipper, der er angivet her, er langt fra fuldstændige. Hvis du ønsker at dykke dybere ned i emnet, er du velkommen til at tage et kig på disse artikler og e-bøger: 

Hvad er din mening om designprincipper? Hvilke spørgsmål har du til Sonja? Brug kommentarfunktionen. Du ønsker at blive informeret om nye bidrag til webdesign og udvikling for agenturer og freelancere? Så følg os på KvidreFacebook eller via vores Nyhedsbrev.

Efter at have studeret spildesign og kreativ skrivning i grønne Auckland, Sonja Hoffmann har specialiseret sig i web- og appdesign og dets udvikling. Hendes fokus er på gamification og udforske brugernes motivation og dens erfaringer, kombineret med en passion og nysgerrighed for teknologiske tendenser.

Lignende artikler

Kommentarer til denne artikel

Skriv en kommentar

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er * Markeret