Farver, former og fonte på en hjemmeside

Episode 24

Tilbage i episode 19 fortalte jeg kort om de 3 F’er, Farver, former og fonte, i dag vil jeg går lidt mere i dybden med de forskellige designelementer.

Lidt om Emotionelle Kundetyper

Men inden vi gør det, vil jeg begynde et helt andet sted, nemlig ved dine kunder og klienter – og hvis du bygger hjemmesider for andre, dine kunders kunder.

Det kan virke underligt at starte med målgruppen, når vi skal tale om design af din hjemmeside. Grunden til det er meget kort – og måske lidt barskt – hvis hjemmesiden ikke er tiltalende overfor dem som skal købe eller bestille fra den – har du ingen konverteringer. Altså der er ingen der køber, booker tid eller tilmelder sig kurser og nyhedsbrev.

Derfor er det meget, meget vigtigt at den hjemmeside du bygger, tiltrækker kunder. Og hvordan kan du så vide, hvad der vil tiltrække kunder? En metode, som jeg selv benytter, er Emotionelle Kundetyper. Metoden giver mig bl.a. designfundamentet, når jeg bygger hjemmesider for andre – og mig selv.

Det skal ikke forstås som, at det er skabeloner jeg benytter, men de principper, som jeg har lært om de forskellige kundetyper, giver en forståelse for hvordan en hjemmeside bedst tager sig ud.

De Emotionelle Kundetyper er delt i 4 farver, Rød, Gul, Blå og Grøn. Farverne er en måde at inddele kunder på. Vi mennesker har alle farverne i os i forskellige grader, og de bliver så vækket, når vi er i et bestemt købshumør. Der er ikke tale om personlighedstyper, selvom man kan forledes til at tro det, især ved personer som er udpræget en af farverne.

Rød emotionel kundetype

Den røde er karakteriseret ved at de søger overraskelser og stimuli. Rødt købshumør vækkes af kedsomhed. Dvs. En rød hjemmeside, skal ikke være som alle andre. Det kan du skabe bl.a. med skrifttyper, der adskiller sig fra normen på en hjemmeside, uventet bevægelse og alternative retninger når du scroller. Med mindre at du selv har en meget stærk rød side, vil jeg fraråde at bygge røde hjemmesider, da din fornuftssans vil komme i store problemer med at skulle kunne håndtere det røde design.

Gul emotionel kundetype

Den næste farve er den gule. Her er det omsorg for andre, en selv og ønsket om en god relation i centrum. Overordnet er den gule blød og mild, dvs. Det skal en gul hjemmeside også være for at tiltrække gule kunder. Det betyder at de forskellige designelementer skal være mere runde og bløde – og give ro til den gule der altid har travlt med at være der for andre. Man kommer ofte i gult købshumør pga. En form for følelsesmæssig ubalance.

Blå emotionel kundetype

Ser vi på den blå kundetype, så er der her tale om ønsket om perfektion og ønsket om at deres køb kan få dem videre og sikre succes. En blå hjemmeside skal derfor udstråle eksklusivitet og professionalisme. Ikke noget hjemmelavet her. Designelementerne på en blå hjemmeside skal understøtte dette og må derfor gerne være kantede og opadstræbende. Det blå købshumør bliver bl.a. aktiveret af følelsen af at være fastlåst.

Grøn emotionel kundetype

Den sidste kundetype er de grønne. De er også lastmovers, modsat den røde, der er jo ikke nogen grund til at springe ud i at købe noget, der er uprøvet. Grønne er altså grundige og velovervejede i deres købsbeslutninger, derfor skal en grøn hjemmeside understøtte deres behov for information, så de i søgning efter det helt rigtige kan finde svar på din hjemmeside. Pga. Deres tankegang, er de også yderst loyale kunder. Det er ofte utryghed der vækker det grønne købshumør.

Nu er der styr på målgruppen og deres forskellige behov, så lad os dykke ned i farver, former og fonte.

Som udgangspunkt vil jeg anbefale, at du allerhøjst vælger 3 af hver, med mindre, du har haft en grafiker inde over eller du selv er grafiker, på den måde kan du undgå at hjemmesiden kommer til at ligne en uigennemtænkt farvelade. Det samme gælder former og fonte. Selvom jeg nævner 3, så kan 1-2 ofte være nok. Især når vi taler om fonte og former.

Hvis vi starter med at kigge på farverne.

Farver

Farver har stor betydning for, hvordan en hjemmeside opleves af de besøgende. Når du ændrer på baggrundsfarven, farven på knapper, links og overskrifter, så ændrer du hele hjemmesidens udtryk. Det betyder at med næsten et pennestrøg kan hjemmesidens generelle udtryk ændres fra varm og indbydende til kold og businessagtig. Naturligvis kræver det at du også ændrer på former og fonte for at forvandlingen bliver fuldendt.

Som nævnt tidligere, er det meget, meget vigtigt at der er styr på målgruppen INDEN farverne – og i øvrigt de øvrige designelementer – vælges. Hvad er det for et signal du ønsker, der skal sendes til de potentielle kunder og klienter?

Når du vælger farverne, så er min anbefaling – højst tre forskellige. Du kan godt have nuancer af farverne så du har flere, blot brug dem med omtanke. I min palette er en blågrå, en beige og en tegl/orange. Den beige har jeg i 3 andre nuancer som kan bruges efter behov. Den blågrå harmonerer godt med beige og den orange er en kontrast, som til at fremhæve fx tekster. Dvs. Overordnet har jeg to farver der harmonerer og en kontrastfarve.

Når DU skal vælge farver, kan du evt. Kigge på Canva eller Adobe Color.

Til hjælp når jeg arbejder med mine kunders hjemmesider, bruger jeg den farvepalette som Institut for Kundetyper udgiver hvert år. Jeg har lagt links til de fire farvepaletter nederst på siden.

Det næste designelement er

Former

Hvis du undrer dig over, hvad jeg mener med former, så er det fx hjørnernes afrunding på knapper og billeder, overgangen mellem forskellige afsnit på hjemmesiden, om de er kantede eller i bølger.

Ligesom med farverne, kan en ændring i om der er runde hjørner eller ej på knapper gøre en kæmpe forskel på, hvilket udtryk hjemmesiden får.

Når du skal vælge, så tænk på skarpe hjørner er knapt så imødekommende som runde hjørner. Meget runde hjørner kan få et næste pudeagtigtudtryk, hvor letrundede hjørner virker mere seriøst ligesom de skarpe dog uden at man “kan skære sig”.

Et sted du også kan have former, er der hvor forskellige afsnit adskilles på en side på hjemmesiden. Mange bruger forskellige farvede felter. Overgangen mellem den almindelige baggrund og det farvede felt, kan være en ret linje, bølger, kanter osv. Arbejder du med den type overgange, skal du være opmærksom på konsistensen med din øvrige valg. Det nytter ikke at du et sted har bølger og et andet sted skarpe kanter. Som med knapper og billeder, er det med til at give hjemmesiden sit samlede udtryk.

Ligesom med farverne, vil jeg anbefale at du ensretter dit design, dvs. Der skal fx ikke være nogle billeder med afrundede hjørner, hvis de øvrige ikke er det.

Nu er vi nået til det sidste F, som er

Fonte eller skrifttyper

Mange undervurderer, hvor vigtigt det er at vælge de helt rigtige skrifttyper til hjemmesiden og i det hele taget din grafiske identitet.

Skrifttyper sender signaler på nøjagtig samme måde som farver og former. Times new roman er den skrifttype der minder om maskinskrivningsskrift og den virker gammeldags, hvor andre skrifttyper er mere elegante og andre igen mere personlige, som hvis de var skrevet i hånden. Her kan formen på skrifttyperne spille ind i hvordan det generelle designmæssige udtryk bliver opfattet. Er den fx rund og blød, eller kantet og opadstræbende?

Hvis du ønsker en anderledes skrifttype på en hjemmeside, vil jeg anbefale, at du kun bruger den til overskrifterne. Ellers risikerer du, at man ikke kan læse teksten.

Derfor kan bare ét skift af skrifttype kan gøre en stor forskel. Du behøver ikke ændre både brødtekst og overskrifter – ofte vil en ny skrifttype til overskriften være nok til at skabe andet udtryk., især hvis du vil sikre dig at man kan læse teksten.

Prøv at google font paring for inspiration til skrifttyper, som passer sammen. Canva har et tilsvarende værktøj.

Det var alle tre F’er. Jeg vil inden vi slutter give dig et par vigtige råd, der kan gøre dit liv meget nemmere, når du arbejder med hjemmesiden.

Fordele ved at en designmanual

Hvis du nu tænker, at du ønsker at ændre i designet på en hjemmeside, så burde det være ret nemt at ændre, især hvis du har lavet din opsætning af de tre F’er i dit tema eller sidebygger. Har du ikke det, er det et kæmpe arbejde at skulle lave ændringer. Så skal du nemlig ind i ALLE tekst felter og tilpasse teksten, finde alle knapper for at justere hjørnedesigns mv.

Er du i den situation, vil jeg anbefale at du først laver dine indstillinger centralt i enten dit tema eller sidebygger, alt efter hvad du benytter til at styre designet og så skal du bagefter ind på ALLE sider i alle felter og nulstille designet. På den måde burde det nye – og centralt-indstillede design slå igennem. Og hvis du nu om fx et år ønsker at justere farven på dine overskrifter, så vil det faktum at du har lavet al design centralt gøre det nemt, sikkert og hurtigt at lave dine ændringer.

Derudover vil jeg anbefale at du laver en designmanual. I laver du en beskrivelse af dine designelementer, fx at hjørner på knapper har en hjørneradius på 25 px. Hjørneradius er hvor runde hjørnerne er. Skriv også farvekoderne i dokumentet. Det skal du for at sikre, du at du ikke fx har 5 forskellige grønne nuancer på hjemmesiden.

Det samme gælder med skrifttyper og størrelser.

Inspiration til dine valg, eller hvis du laver hjemmeside for en kunde, så kundens valg – kan være fra andre firmaer, der har samme målgruppe, men som ikke nødvendigvis sælger det samme som dig eller din kunde. Naturligvis kan du også kigge på direkte konkurrenter, sørg blot for ikke at ende med at kopiere deres hjemmesider. Inspiration er i orden. Kopiering er ulovligt.

Sammenfatning

Nu er vi nået til vejs ende.

Først hørte du de 4 emotionelle kundetyper, er en del af designprocessen. Da hjemmesider – efter min mening – skal bygges efter kundernes behov og ønsker. Det er dem der i sidste ende skal bruge hjemmesiderne.

Dernæst talte jeg om at du som ikke-grafiker, skal undgå at få en hjemmeside der ligner en farvelade og derfor i gåseøjne nøjes med 3 af hvert af de 3 F-er, nemlig Farver, Former og Fonte. Og ofte kan 2 være nok.

Tilsidst anbefalede jeg, at du indstiller al design på hjemmesiden centralt enten i dit tema eller i din sidebygger. Derudover kan du gøre det nemmere at fastholde et ensartet design, ved at oprette en designmanual. Det gælder uanset om du arbejder med din egen hjemmeside eller du arbejder med andres hjemmesider.