20 Designprincipper - Wisler Reklame

20 Designprincipper
Til brug i grafisk design, multimediedesign, interaktionsdesign,
webdesign, usability og visuel kommunikation
Forfatter: Ian Wisler-Poulsen
Forlag: Grafisk Litteratur

20 Designprincipper
Til brug i grafisk design, multimediedesign, interaktionsdesign,
webdesign, usability og visuel kommunikation
© Grafisk Litteratur 2012
1. udgave, 1. oplag 2012
Forfatter: Ian Wisler-Poulsen
Tryk: BookPrint A/S, 9230 Svenstrup
Bogen er sat med Frutiger Condensed
ISBN 978-87-91171-75-8
Forlaget Grafisk Litteratur ApS
Vennemindevej 45 A
2100 København Ø.
Tlf. 70 20 92 02
www.grafisk-litteratur.dk
boger@grafisk-litteratur.dk
Alle rettigheder forbeholdes.
Kopiering af denne bog må kun finde sted
på institutioner, der har indgået aftale
med COPY-DAN, og kun inden for de
i aftalen nævnte rammer.
Undtaget herfra er korte uddrag
til anmeldelser.
Mange mennesker har været med til at gøre denne udgivelse mulig. Jeg vil gerne takke Louise Harder Fischer,
Ole Gregersen, Maria Keinicke Davidsen, Kathrine Amalie Roswall og Klaus Bjerager, som alle har været med
til at gennemlæse manuskript, diskutere indhold og skrive anmeldelser. Herudover vil jeg gerne takke Jesper
Hinchely for udarbejdelse af forordet. Og endelig vil jeg takke Mary Badalian for fantastisk foto-arbejde.
Tusind tak for hjælpen, alle sammen – I har ydet et fantastisk bidrag til produktionen af denne bog!
Forord af Jesper Hinchely 6
Indledning 8
1. Billeder 12
2. Det gyldne snit 22
3. Enkelhed 28
4. Ensartethed 34
5. Farver 40
6. Figurdannelse 48
7. Fleksibilitet og brugbarhed 54
8. Genkendelighed 60
9. Gentagne eksponeringer 68
10. Grids 72
11. Grupper 78
12. Hierarki 82
13. Input og output 86
14. Kontrast 90
15. Linjer 96
16. Luft 100
17. Lukkethed 104
18. Nærhed 110
19. Æstetik og brugbarhed 116
20. 80/20 120
Øvelse 1-6 124
Register 136
Kilder 140

Indledning
At designe er en proces, som ofte handler om at formgive og/eller organisere elementer:
Nogle elementer er vigtigere end andre, nogle elementer hører sammen, og andre har
ikke noget med hinanden at gøre. Der er elementer, som skal være lette at finde, og
andre elementer skal opleves i en bestemt rækkefølge. Årsagen er, at vi helst skal kunne
anvende eller betjene designet på den tiltænkte måde og med så lidt forklaring som
overhovedet muligt.
Godt design er intuitivt anvendeligt. Ofte bemærker vi slet ikke, hvor godt designet er.
Det er netop, fordi vi helt automatisk forstår, hvordan vi skal bruge det. Andre gange er
designet dårligt og gør, at vi ikke kan finde ud af at anvende det. I mange tilfælde er
problemet ikke, at det pågældende objekt mangler funktionalitet – altså kan udføre den
opgave, som er hensigten. Det handler simpelthen om, at vi som brugere ikke kan finde
ud af at betjene designet, fordi elementerne i designet er formgivet og/eller organiseret
på en uhensigtmæssig og uigennemskuelig måde.
På modsatte side ses et udkast til en fjernbetjening til et tv med indbygget dvd. Man kan
finde og gennemskue de forskellige knapper og funktioner, men designet kan optimeres.
Det første, vi bør gøre, er at ”dissekere” designet – skille det ad. På den måde kan vi
blive mere specifikke omkring fejl og indsnævre problemer. Og disse fejl og problemer
kan vi så udbedre ved at tilrette og følge konkrete principper for design. Et princip er en
”grundregel”, og det er disse grundregler, som denne bog handler om.
Selvom en fjernbetjening ikke virker udpræget kompleks, er der mange elementer, som
skal formgives og organiseres, så vi forstår dem. Det kan hurtigt blive en omfattende
affære, og her er det vigtigt netop at kunne skille designet ad og forholde sig til
principperne. På næste opslag viser jeg et mere fundamentalt eksempel.
2 3
8 9
1
TXT
Pro
-
Vol
+
Vol
-
Pro
+
5
7
9
1-
4
6
8
0
2-
Indledning

1
2
3
Ved flere lejligheder har jeg vist ovenstående tre figurer til studerende (én figur ad
gangen) og spurgt dem, hvilke elementer der hører sammen. Ved den øverste figur (1)
er alle enige om, at det er elementerne til højre, der hører sammen. Begrundelsen er, at
de er placeret tættest på hinanden (designprincippet om nærhed). Ved den midterste
figur (2) er alle ligeledes enige om, at det er elementerne til venstre, der hører sammen.
Begrundelsen er, at de har en ”kasse” omkring sig (designprincippet om lukkethed). Med
hensyn til den nederste figur (3), opstår der imidlertid tøven, usikkerhed og uenighed.
Årsagen er, at de to designprincipper (nærhed og lukkethed) arbejder imod hinanden.
Som designer er det afgørende, at vi kender designprincipperne – ikke blot for at anvende
dem enkeltvis, men for at sikre, at vi får dem til at arbejde sammen og supplere hinanden
fremfor at modarbejde hinanden!
Denne bog er en introduktionsbog med 20 nøje udvalgte designprincipper. Der findes
mange flere designprincipper, men meningen med denne bog er at vise få, specifikke
principper fremfor mange principper, der i flere tilfælde ligner hinanden.
10 11
Indledning
Bogen henvender sig primært til multimediedesignere og grafiske designere, men den kan
anvendes af alle, som bekæftiger sig med visuel kommunikation, usability og/eller design
af brugergrænseflader. I mit eget virke har jeg haft stor gavn af at bruge designprincipperne
i forhold til forklaring over for kunder, hvor spændet af produkter har strakt sig
fra design af websites, webshops og software til powerpoints og visuelle identiteter. Det
handler om specifikt at kunne forklare, hvad der virker logisk for øjet.
I bogen bliver hvert designprincip forklaret på én side, og herefter er der 2-8 sider med
visuelle eksempler. Da omdrejningspunktet for bogen er visuel kommunikation, er der
lagt stor vægt på mængden af visuelle eksempler, som hver især er suppleret med korte
tekster. Hvis man vil vide mere, kan jeg anbefale bøgerne fra kildeoversigten bagerst i
bogen. Flere steder i bogen er der desuden noter. Noterne har reference til specifikke
henvisninger, og disse findes ligeledes bagerst i bogen sammen med kilderne.
På grund af den massive påvirkning fra det engelske sprog i kommunikation, og fordi
mange uddannelsesinstitutioner har internationale studieretninger, er hver beskrivelse af
principperne forsynet med den engelske betegnelse for det pågældende princip.
Som sagt kan flere af principperne supplere hinanden. Derfor er der ved hvert princip en
opremsning af relaterede principper. Idéen med bogen er dog at gennemgå dem enkeltvis.
Der er ikke noget hierarki i designprincipperne, så deres placering i bogen er udelukkende
foretaget ud fra en alfabetisk rækkefølge. Det er således ikke meningen, at bogen skal
læses i et lineært forløb fra første til sidste side. Bogen er tænkt som et opslagsværk.
Rigtig god arbejdslyst!

#4
Designprincippet om:
Ensartethed
Ensartede elementer har en større relation
end ikke-ensartede elementer
Den engelske betegnelse: Similarity
Relaterede designprincipper: Grupper
#4 Ensartethed
Vi oplever, at elementer med fælles karaktertræk har en stærkere relation til hinanden
end elementer, der ikke har fælles karaktertræk. I en gruppe af elementer, hvor et udvalg
af elementerne har fælles karaktertræk, vil disse elementer opleves sammenhørende,
selvom de ikke nødvendigvis er placeret i nærheden af hinanden.
Fælles karaktertræk kan være: form, farve og størrelse, men det kan også være skrifttyper,
dekoration, placering og meget andet. Form og farve betragtes som de stærkeste
parametre i forhold til princippet om ensartethed. Princippet er stærkest, hvis man
begrænser mængden af variation. For eksempel vil ensartetheden mellem røde cirkler
være stærkere, hvis der samlet set kun er røde cirkler og blå trekanter – frem for hvis flere
farver og forskellige former er repræsenteret (se eksempel på næste side).
Komplekse og usammenhængende elementer kan grupperes ved at tilføre de enkelte
elementer ensartethed. Det kan kan være forskellige punkter i en website-menu. Punkterne
er som udgangspunkt forskellige (forskellige ord), men ved at tilføre dem ens typografi,
størrelse, placering og den samme indbyrdes afstand vil de opleves som én samlet enhed.
Hvis ensartetheden er stor nok, kan vi endda folde en undermenu ud inden i menuen,
og menuen vil stadig opleves som en samlet gruppe, fordi de enkelte menupunkter er
ensartede (se eksempel med McDonald’s website længere fremme i dette kapitel!).
Som en følge af den stærkere relation mellem ensartede elementer kommer grupper
af ensartede elementer til at virke mere strukturerede, organiserede og i det hele taget
stærkere end ikke-ensartede elementer. Dette er blandt andet en af grundene til at bære
uniform (både i en virksomhed, som et sportshold eller et korps). Den britiske hær indførte
i 1700-tallet uniformer i stærke røde og blå farver for at skræmme fjenden, men også for
at styrke sammenholdet mellem soldaterne. På grund af udviklingen med kraftigere og
mere præcise skydevåben gik man imidlertid bort fra de farvestrålende uniformer og over
til camouflage i begyndelsen af 1900-tallet.
Dette princip kaldes også ”Loven om lighed” [4:1].
34 35

I bunden af VW’s website er der en menu med fem punkter (de fem billeder). De har
samme størrelse, de er placeret lige tæt på hinanden, de indeholder alle biler, og de har
alle en kort titel i samme størrelse, placeret nederst i venstre hjørne. På den måde
kommer de fem menupunkter til at fremstå sammenhørende og ligeværdige.
Effekten af ensartethed er størst, når variationen af elementerne er mindst.
Hvilket af de to fodboldhold er stærkest? Ud over at de ensartede trøjer og shorts
styrker sammenholdet på et sportshold både udadtil og indadtil, har de den åbenlyse
fordel, at man kan se, hvilket hold spillerne tilhører, og skelne dem fra hinanden.
36 37

På trods af at de to personer på billedet
har meget forskelligt tøj på, kan man se,
at de hører sammen, fordi slipset har den
samme stærke farve som kjolen. Ensartetheden
opleves stærkere, fordi den
røde farve er den eneste markante farve.
Der er således ikke andre farver, som
forstyrrer ensartetheden, og det røde slips
står i stærk kontrast til den hvide skjorte
og det mørke jakkesæt.
Her ses tre af de få fysiske knapper, der
findes på en iPhone 4. Den øverste slår
lyden fra, og de øvrige to knapper skruer
henholdsvis op og ned for lyden. Der er
samme afstand mellem knapperne, men
fordi udformningen af de to nederste er
ens, oplever vi, at de har en større relation
til hinanden end til den sidste knap.
© www.snapitnow.co.uk
#4 Ensartethed
I menuen på McDonald’s website hjælper
ensartetheden til at forstå hierarkiet. På
trods af at der er en undermenu, som er
foldet ud midt i menuen, genkendes de
overordnede menupunkter, fordi de har
samme størrelse, horisontale placering og
hvide baggrund. I undermenuen er det det
samme, som gør sig gældende, og fordi
et af punkterne skiller sig ud (med en gul
baggrund), indikeres det, hvilken underside
man befinder sig på.
Bilproducenter placerer typisk deres mærke forrest på bilens motorhjelm eller på bilens
køler. Ud over selve mærket har BMW imidlertid også sikret genkendelse af deres biler
ved konsekvent at have det ensartede og karakteristiske, to-delte kølergitter på deres biler.
38 39

#18
Designprincippet om:
Nærhed
Elementer, der er tættere på hinanden, har en større relation
end elementer, der er længere fra hinanden
Den engelske betegnelse: Proximity
Relaterede designprincipper: Grupper, Lukkethed
#18 Nærhed
Jo tættere elementer placeres på hinanden, desto større er deres indbyrdes relation.
Og jo længere væk elementer er fra hinanden, desto mindre er deres indbyrdes relation.
Afstanden mellem elementer er et udtryk for deres tilhørsforhold.
Afstand og tilhørsforhold mellem elementerne er desuden relativ. Det vil sige, at
tilhørsforholdet for et element til et andet element afhænger af, om afstanden til øvrige
elementer er større eller mindre.
Når vi skal udarbejde et design, skal vi sørge for, at elementer, som er relaterede, bliver
placeret tæt på hinanden. Hvis afstanden ikke prioriteres, risikerer vi, at brugeren ikke
kan gennemskue vores design og forstå de enkelte elementers indbyrdes forhold. Det kan
være et billede, der hører sammen med en tekst, en overskrift, der hører sammen med et
afsnit, eller knapper, der hører sammen i en menu på et website.
Princippet fungerer desuden på forskellige niveauer, så ud over at vi kan foretage en
overordnet opdeling i grupper ved brug af afstand, kan vi også påvirke de enkelte
elementer i gruppen ved at tilføre eller reducere afstand. Elementer med ens indbyrdes
forhold i en gruppe bør placeres således, at afstanden imellem dem er ens, ellers vil det
opleves som om, nogle af elementernes forhold er stærkere end andres.
Jo mindre afstand, desto større relation. Derfor kan man forstærke relationen yderligere
ved at lade elementerne røre hinanden, gå ind over hinanden eller helt ligge oven på
hinanden. På den måde vil elementerne have en tendens til at smelte sammen og blive
opfattet som en samlet, lukket form. Dette kaldes forbundethed (læs mere under
princippet om lukkethed).
Designprincippet om nærhed er tæt forbundet til princippet om grupper.
110 111

Kontakten til at tænde og slukke bordlamper
sidder ofte på selve lampen eller
ledningen. Det virker logisk. Men de
fleste har sikkert prøvet at opleve forvirring,
når de skulle tænde lyset i loftet i et
rum, hvor kontakterne sad ved døren, og
der var flere kontakter i samme panel. De
enkelte kontakter sidder lige langt væk fra
den funktion, som de udfører. Det er derfor
svært at gennemskue, hvilken kontakt der
har størst relation til lyset i loftet.
På komfuret kan det være svært at
gennemskue, hvilken knap, der hører til
hvilken kogeplade, fordi afstanden mellem
flere af knapperne og den pågældende
kogeplade er ens. Derfor er det nødvendigt
med en illustration ved hver knap, som
kan forklare os, hvilken kogeplade den
hører til. Til gengæld bevirker samlingen af
knapperne, at det er lettere og hurtigere
at overskue hele komfuret. For eksempel
hvis vi skal tjekke, om alle kogeplader er
slukket, og vi undgår at skulle røre ved
noget for tæt på kogepladerne, som ellers
kunne resultere i, at vi brændte os på
kogepladen.
De to billeder er ens, bortset fra at den ene person er flyttet længere væk fra den
anden på det nederste billede. Deres indbyrdes relation opleves derfor som mindre.
112 113

I de fleste browsere er frem- og tilbageknappen placeret tæt ved siden af hinanden.
I dette tilfælde sidder de så tæt, at de rører hinanden (forbundethed) og derved
illustrerer en meget stærk relation til hinanden.
Selvom der er relativt langt mellem menu-punkterne i hovedmenuen på HTC’s website,
er den let at identificere, fordi der er større afstand til andre elementer. Grupperingen
af menuens elementer forstærkes ved brug af princippet om linjer og ensartethed.
I bomærket for Sct. Joseph Søstrenes
Skole er fiskene placeret med en ensartet
afstand imellem de enkelte fisk for at
illustrere, at deres indbyrdes forhold
er lige.
På cd-afspillere, dvd-afspillere osv. ses det
ofte, at knappen til at åbne (”Open/Eject”)
er placeret tættest ved skuffen, som kører
ud. Afstanden mellem knappen og den
funktion, som knappen udføre, er lille,
fordi de har en stærk relation.
#18 Nærhed
114 115

20 Designprincipper
At designe handler typisk om at formgive og organisere elementer. Om det er design af et logo, et visitkort,
en brugergrænseflade til et website eller en applikation, er det afgørende, at brugeren forstår delelementernes
betydning og deres indbyrdes relation: Nogle elementer er vigtigere end andre, nogle elementer hører sammen,
og andre elementer skal ses i en bestemt rækkefølge. Ved at følge principperne i denne bog bliver
designeren i højere grad i stand til at udforme et design, som brugeren intuitivt forstår.
Bogen gennemgår 20 designprincipper. Hvert princip bliver forklaret på en side, og herefter er der 2-8 sider
med visuelle eksempler og supplerende tekst for det pågældende designprincip. Af designprincipper kan
nævnes: Nærhed, ensartethed, genkendelighed, grupper, figurdannelse, kontrast, lukkethed og enkelhed.
Bogen henvender sig primært til multimediedesignere og grafiske designere, men den kan anvendes af alle,
som beskæftiger sig med visuel kommunikation, usability eller design af brugergrænseflader.
Anmeldelser:
„En “visual walk-through” af 20 udvalgte principper, der anvendes, når man succesfuldt designer grænseflader og
sælger budskaber visuelt. Bogen er fyldt med gode og illustrative eksempler, så læseren sikkert føres ind i design
både som tankegang og håndværk. Øvelserne har denne dobbelthed, at man reflekterer, samtidig med at man
udfører. Jeg kan varmt anbefale bogen til multimediedesignere og web-udviklere – og alle andre, der interesserer
sig for at lave bedre visuelt design efter principper, der bygger på viden fra perception- og kognitionsteorien.”
Louise Harder Fischer, forfatter, kursusholder og ekstern lektor, CBS,
tidl. studierektor på Multimediedesigner, KEA
„Arbejdet med at forbedre produkters usability tager ofte udgangspunkt i brugen af designprincipper. Ian giver
her en enkel, praksisorienteret og ligefrem introduktion. Det er bare at gå i gang!”
Ole Gregersen, usability specialist, FDM travel, og ekstern lektor, IT-Universitetet
„I mit arbejde som arkitekt beskæftiger jeg mig dagligt med designprincipper. “20 designprincipper” redegør for
en række relevante principper og underbygger dem med letforståelige eksempler. Det er en yderst relevant bog
for alle, der arbejder med design og formgivning.”
Maria Keinicke Davidsen, arkitekt, Keinicke & Overgaard Arkitekter
„Som it-studerende beskæftiger jeg mig blandt andet med at udtænke og designe brugergrænseflader.
Denne bog er en letlæselig introduktion til 20 designprincipper, som optimerer en designløsnings
brugervenlighed og æstetiske kvalitet.”
Kathrine Amalie Roswall, kandidatstuderende, IT-Universitetet
Grafisk Litteratur
Tlf. 70 20 92 02
www.grafisk-litteratur.dk
Bogen støtter
Red Barnet
ISBN 978-87-91171-75-8