Farver III – ikke altid Nielsen-blå

Denne artikel er fra 2008 og tidligere publiceret på det nu nedlagte EMU Designværkstedet.
Indholdet kan forekomme bedaget og links og andet smart kan ikke forventes at virke, ligesom billeder og illustrationer kan mangle
Jeg har forsøgt at redigere mindst muligt, men blot opdateret markup til nutiden

Af Michael Hammel, webmanager i Dansk Cyklist Forbund

15/10 2008

Resumé

Når det kommer til farver på nettet, er det som om den dybe tallerken skal genopfindes hver gang: Vi starter med Adam og Eva i farveteoriens dyb og bliver voldsomt kloge på symbolik, tekniske, fysiske og metafysiske sammenhænge, men vi når sjældent op til overfladen og får sat ord på den praktiske anvendelse: Hvordan bruger man farver i praksis? Hvordan opfinder man en farvepalet til sit webprojekt, hvordan undgår man, at farverne skriger til hinanden og himlen, og hvordan forhindrer man, at links bliver “usynlige” for den almindelige bruger, når nu man vover at skippe den konventionelle Nielsen-linkblå?

Indhold

 

Nielsen-blå?

Usability-guruen Jacob Nielsen plæderer for, at udformningen af links bør følge konventionerne for webdesign; understreget og i farven blå (også kendt som #0000cc).

Har man nu en anden – og mere designorienteret – tilgang til udformningen af websites end Nielsen, er det oplagt, at linkfarverne bliver underlagt sitets overordnede farveudtryk. Blå links passer bare dårligt på et sart-lyserødt pigesite, og som linkfarve er sart lyserødt muligvis ikke tydelig nok.

Og det er så her ballet åbner, og alle indbydes og ingen har nogen at danse med.

 

Hvorfor overhovedet bruge farver?

De modigste designere tør lade være med at bruge farver. De lægger til gengæld vægt på, at kompositionen er markant nok.

Khoi Vihn, designer af New York Times’ website har skabt sit personlige website i skarpt sort/hvide kontraster. Enkelte billeder i indholdet er i farver, og de sort/hvide omgivelser skærper opmærksomheden på farverne i billedet. Muser man hen over links og knapper, lyser de op i klar orange – nærmest som en chok-effekt.

Fordi vi bruger masser af penge på skærme og skærmkort med millioner af farver, har vi svært ved at nøjes med design i sort/hvid. Den seriøse grund er, at designets komposition skal være 100 % i orden, hvis man vil undgå at anvende farver. Det er – kort sagt – nemmere at lave en visuel sammenhæng, hvis der er smurt godt med farvelade på den måske ikke så skarpe komposition.

I en designproces er det en god strategi at udvikle designet i sort/hvid, og vente med farverne, til alle er glade for struktur og layout. Det resulterer – for det første – i et bedre design, og – for det andet – er følelserne for farver meget mere udtalte, og noget alle har en mening om. Derfor vil en diskussion af et farvelagt design handle om alt andet end designet.

 

Og så alligevel – lad os få farver

Når du så har besluttet sig for, at der skal være farver på websiderne, er det en god idé at kortlægge dit behov.

En kortlægning består i at finde ud af, hvor mange elementer i designet som skal farves, og hvor mange farver der derfor som minimum skal indgå i paletten. Det er væsentligt at holde sig for øje, at denne diskussion hører til sent i selve designfasen – altså efter at du har kortlagt behov, mål, indholdstyper mv.

Grundlæggende er der dog altid en række standardelementer: sidefarve og vinduesbaggrund, tekstfarve, farve til rammer, farver til bokse og linier samt farver i menuer og links i teksten med meget mere. Farverne kan godt være ens, men hold øje med kontrasten. For få farver og for mange toner (udvaskede farver) giver et kedeligt og fladt design.

Links kræver lidt ekstra. Både fordi de er aktionsorienterede, og fordi de har fire eksistenser, som alle bør være tydelige og forskellige for brugeren:

  • Linket
  • Linket med musen over
  • Linket som er åbent (et andet vindue)
  • Linket som har været åbent (“brugt”)

Det “brugte” link er lidt af et sort får i den sammenhæng, da det ofte bliver glemt. Og her har Jacob Nielsen en pointe (http://www.useit.com/alertbox/20040510.html [https://web.archive.org/web/20090212210322/http://www.useit.com/alertbox/20040510.html]) i at fastholde konventionerne – til en vis grad – idet det er en god idé at farvelægge det “brugte” link for at undgå at brugerne går i ring.

 

Farvespil – farverne har et eget liv

Farvekontraster fremhæver hinanden.

Lidt af den rette blå, får den orange til at se mere frisk orange ud, og jo mere blåt, der omgiver orangen, des mere markant bliver farven.

Eksempel på farvekontrast 

Farvedominans

Farver har forskellige måder at fylde “i øjet”. Nogle farver er varme og påtrængende, og andre er kølige og tilbagetrukne.

Se følgende to “knapper”.

Eksempel på farvevalg

Samme tekst, samme skrift, samme skriftfarve, samme størrelse, og alligevel ser skriften i den blå knap ud til at være tydeligere.
Med dagens skærmteknologi bliver farvernes effekt tydeligere, da lcd-skærme har en tendens til at lade de varme farver flyde ud.

Skal du bruge rød, kan du med fordel vælge at “køle farven ned”, og gøre den mindre påtrængende, ved at tone den med et stænk sort (og tone den brunligt eller bordeaux).

Eksempel på tonet farvevalg

 

Undgå alt for klare farver

Tager du afsæt i noget materiale til en tryksag, er det en god idé at brække farverne en smule, altså at dæmpe farverne ved at “trække” dem mod en mere hvid eller mere mørk tone.

På en skærm bliver store flader i klare farver meget skingre. Til små elementer kan en stærk farve til gengæld være “lige i øjet”.
Det er vigtigt at være konsekvent. Vælger du at brække en farve, er det nødvendigt, at alle tilsynekomster af farven bliver erstattet med den nye farvetone.

 

Farvevalg – den første farve er den sværeste

Efter du har kortlagt behovet, er det tid til at finde en palet med den rette stil. Er det mexicansk eller skandinavisk stil, du går efter?

En hurtig løsning er at tage afsæt i “titelbilledet” – eller et billede med den rette stemning. Og så er det bare om at sørge for, at alle billeder følger stemningen, ellers kan du risikere, at arbejdet er spildt.

OriginalbilledetOriginalbilledet
Billedet reduceret til farveelementerBilledet reduceret til farveelementer

Billedet er reduceret fra dets 72 px/i til 8 px/i med “bilinear” i et billedbehandlingsprogram (så blandes farverne mindst muligt).

Så er det “bare” at vælge. Der er ingen grund til at vælge sort eller hvid (eller gråtoner, for den sags skyld). De er nemlig ikke farver, men neutrale kontraster og går derfor til alle farver.

Udvalgte farverUdvalgte farver
PalettenPaletten

En (efterårs-)palet af hovedfarver er fundet i billedet. De brune, blå og grønne er der ingen problemer i. De lilla er mere specielle, men kan lige pifte tingene lidt op.

Når alle farverne er valgt, er paletten klar, og alle elementerne kan blive farvet. Er du i tvivl om din gode smag er god nok, kan du få hjælp i en række gratis online værktøjer – Adobe Kuler (som kræver man logger ind, men ellers er gratis) og ColorScheme 2.0 (som er gratis).

I værktøjerne kan du, med afsæt i dit farvevalg, vælge mellem forskellige autoriserede farvesystemer og få styr på kontrasterne – og måske finde en farve, som frisker det hele lidt op.

Skærmbilled fra programmet  ...

Med udgangspunkt i farvekoden for den mørkebrune, og valget af trekant-kontraster (dvs. at farverne to og to kontrasteres af den tredje), har programmet valgt tre hovedfarver og yderligere 3 analoge (dvs. farver  som ligger meget tæt på hinanden – fx. gul-mørkegul-orange) til hver af disse. Man kan justere graderne i afstanden mellem farverne i en uendelighed – til farverne har den rette nuance og kontrast.

Eksempel på  ...Og så kan man røre det hele sammen, evt. justere farverne en smule:

 

Kontrast

Er designet færdigt og kunstfærdigt farvelagt, er det en god idé at kaste et blik på det i gråtoner, fx ved at printe det ud på en sort/hvid-printer.

Et kig på designet i sort/hvid vil afsløre, om du har skabt kontrast nok mellem de forskellige elementer. Er det muligt at skelne teksten fra baggrunden? Er farvekoderne tydelige nok, og kan man se linkene?
Selvom du måske har sat knald på farverne og kontrasterne, forsvinder forskellen måske, når du ser dit design uden farver – og så snakker vi ikke om farveblindhed! (Heldigvis har ColorScheme en testfunktion, hvor farverne kan prøves).

 

God smag er en træningssag

Tegner kan man blive – kolorist bliver man født til.
Eugene Delacroix (1798 –1863)

Evnen til at sammensætte den smagfulde farvepalet, eller til at finde den helt rigtige frække farve, der både skaber kontrast og identitet, men ikke ødelægger brugernes koncentration, kræver megen øvelse og en del selvtillid, og man skal ikke regne med, at første forsøg “sidder i skabet”.
Selvom Eugene Delacroix påstår det modsatte, er evnen til at sætte farver sammen og blikket for gode farver, noget der kan trænes, så man skal ikke lade sig slå ud, eller nøje med første forsøg, men vove pelsen og kaste sig ud i farveeksperimenter.

 

Kilder

Lars Blomgren Andersen: “Farver 1”, artikel til Designværkstedet 1998:
http://design.emu.dk/artikler/9800-farver1.html [https://web.archive.org/web/20090212210322/http://design.emu.dk/artikler/9800-farver1.html]

Lars Blomgren Andersen: Farver 2, artikel til Designværkstedet 1998:
http://design.emu.dk/artikler/9800-farver2.html [https://web.archive.org/web/20090212210322/http://design.emu.dk/artikler/9800-farver2.html]

Jacob Nielsen: “Guidelines for Visualizing Links”:
http://www.useit.com/alertbox/20040510.html [https://web.archive.org/web/20090212210322/http://www.useit.com/alertbox/20040510.html]

Khoi Vihns personlige website:
http://www.Subtraction.com [https://web.archive.org/web/20090212210322/http://www.subtraction.com/]

New York Times:
http://www.nytimes.com [https://web.archive.org/web/20090212210322/http://www.nytimes.com/]

Adobe Kuler:
http://kuler.adobe.com [https://web.archive.org/web/20090212210322/http://kuler.adobe.com/]
– Adobes farvepalet-generator. Farvepaletter kan importeres til Adobe-programmer, og man kan finde et væld af andre brugeres paletter.

ColorScheme2.0
http://www.wellstyled.com/tools/colorscheme2/index-en.html [https://web.archive.org/web/20090212210322/http://www.wellstyled.com/tools/colorscheme2/index-en.html]
– Online farvepalet-generator med mange gode faciliteter.

ColorScheme-paletten med den brune farve: http://tinyurl.com/6pdfl2 [https://web.archive.org/web/20090212210322/http://tinyurl.com/6pdfl2]

Lise Gotfredsen: “Billedets formsprog”, Gad 2005