Du kan blive bedre til at arbejde med webdesign og content design, hvis du læser denne artikel. Er du interesseret i moderne webdesign og webkommunikation, vil der være mange ord og sætninger i denne tekst, der fanger din interesse.
Artiklen er skrevet og designet med et skarpt fokus på læsere med interesse for webdesign. Den er skrevet og designet til en bestemt målgruppe, der kigger efter bestemte ord.
Hvis teksten fanger din interesse og ser ud til at være interessant og relevant går du i gang med at læse – og får masser af viden og konkrete tips til design af websider, blogindlæg, nyhedsbreve, ebøger og andet indhold til inbound marketing.
- Du vil skimme teksten for at se, om der er interessante ord.
- Eller scanner teksten for at se, om du kan finde bestemte nøgleord.
Jeg har i øvrigt gjort mig umage med at skrive denne tekst på en helt særlig måde!
Ordene er placeret med omhu i sætningerne og fremhævet, så du hurtigt kan finde noget interessant – eller hoppe af og lægge en kabale eller et puslespil.
Denne artikel er skrevet, så du kan scanne
Når mange ens elementer er placeret ved siden af hinanden og alt er lige gyldigt, bliver det hele ofte ligegyldigt. Øjnene flakker rundt, når man ikke kan finde det interessante – i en tekst, på en side, i supermarkedet…
Mange af os giver hurtigt op, hvis det interessante og væsentlige ikke straks springer i øjnene. Derfor er det godt at designe, så tingene IKKE er ens.
Lange artikler bør brydes med overskrifter, billeder, citater, bokse så det vigtige springer i øjnene.
Du kan se hvorfor ved at studere billedet herunder.
- Find vinduet, hvor der sker noget spændende
Fandt du hurtigt dét, der var særligt interessant? Eller konkluderer du det samme som mig – at der ikke er noget. At det er 24 kedelige vinduer.
Forestil dig, at nogen havde placeret et menneske i et af vinduerne. Eller en sjov hund. Eller hvis et barn sad med fødderne dinglende ud over kanten. Så ville dét vindue få mere opmærksomhed end de andre.
Billedet viser et design, der ikke gør det tydeligt, hvor det spændende er: Det interessante, Det relevante. Det hele er lige gyldigt. Ligegyldigt. Uinteressant.
Flot webdesign er ofte dårligt design
Content design og webdesign skal ikke alene laves ud fra mavefornemmelse og æstetisk sans. Der er nogle få, meget enkle, men også meget afgørende principper, du skal sætte dig ind i, hvis du vil lave godt design. Altså smart design. Effektivt design.
Om design er godt eller kun pænt handler om objektive forhold. Eksempelvis om skriftstørrelsen er stor nok. Om den er tydelig og nem at læse. Om det interessante er nemt at finde…
Design efter love, der er næsten 100 år gamle
Gestaltlovene er en række principper (love), der beskriver, hvordan vi opfatter visuelle elementer. Hvordan vi skaber sammenhæng i det vi ser. Og hvordan vi får øje på det, der er interessant og relevant for os. Gestaltlovene er gamle, men særdeles vigtige i dag, hvor vi konstant bombarderes med information, som vi skal sortere i.
Selv moderne principper for godt webdesign er baseret på gestaltlovene om:
- Figur og Baggrund
- Nærhed
- Lighed
- Lukkethed
- Forbundethed
Loven om figur og baggrund
Hvis flere elementer er ens, har vi svært ved at vælge og keder os hurtigt.
Hvis baggrunden på et website larmer mere end forgrunden, vil brugeren også have svært ved at orientere sig.
Skab derfor god kontrast mellem vigtigt og mindre vigtigt, mellem forgrund og baggrund.
Gør altid det væsentligste mest tydeligt. Designer du sider til folk, der leder efter konkret information, skal du hjælpe dem ved at lave fremhævede navigationspunkter – sigende overskrifter i passende størrelse, fremhævede ord/sætninger, farvet baggrund etc.
Men sørg for at prioritere det rigtige og på den rigtige måde.
Brug ikke en meget urolig baggrund under tekst.
Loven om nærhed
Anbringer du noget tæt på hinanden, vil folk tro, det hører sammen.
Og omvendt – placeres det langt fra hinanden, hører det ikke sammen.
Ord, der står i toppen af en side på lige linje, opfatter vi som en menu.
Tekstmæssigt kan det give forvirring – og ufriviligt sjove resultater – hvis ord hører sammen, men ikke er placeret tæt nok på hinanden.
- Bedstemorboller
- Bedste mor boller
- Bedstemor boller
Hvad der naturligt hører sammen, skal du med andre ord sørge for står tæt på hinanden. Det gælder både enkelte ord, afsnit, billeder…
Ting, der skal adskilles, skal være omgivet af luft. Det, vi også kalder white space.
Loven om lighed
Loven om lighed minder en hel del om Loven om nærhed, men her er der primært fokus på, om elementerne ligner hinanden – ikke om de nødvendigvis er placeret i nærheden af hinanden.
Du kan skabe samhørighed ved at give elementer den samme størrelse, den samme farve, den samme form.
Vil du gøre det nemt for besøgende at forstå dit design og eksempelvis dine call-to-action-knapper, skal du give dem et gennemgående design. Lad være med at skifte farve, form, størrelse og placering bare fordi du synes, der skal variation til.
Giv købsknapper den farve, du har besluttet, de skal have. Endnu bedre: giv dem den farve, du har testet dig frem til er den optimale.
Når folk ser et figurer som disse, ser de som regel “to cirkler”, “tre hjerter” og “tre trekanter”. De ser ikke bare “Otte figurer”. Det kan du arbejde bevidst med for at skabe sammenhæng og overblik.
Loven om lukkethed
Loven om lukkethed handler om, at hvis elementer står i samme ramme – f.eks. i bokse med forskellig farve – så vil man regne dem for at høre sammen.
Det kan du udnytte ved aktivt at lave områder, der samler ting og dermed gør det tydeligere, at de hører sammen. Så gør du indholdet nemmere at overskue.
Loven om Forbundethed
Ved at bruge loven om forbundethed gør du det tydeligt – ved brug af streger, farver og symboler – at noget hører sammen.
Du kan blandt andet organisere indhold ved at samle det med en farvet baggrund. Er der tale om en lang side på et website, kan du eksempelvis dele den op i passende områder og give hver område en baggrundsfarve og/eller et baggrundsbillede.
Design, så dit indhold bliver interessant
Bruger du gestaltlovene aktivt, når du designer, kan du gøre dit indhold mere interessant og overskueligt, end hvis du udelukkende designer efter, hvad du synes er pænt. Brug hellere de objektive kriterier for, hvordan tingene virker.
Du kan – med gestaltlovende – gøre det nemt og lynhurtigt at scanne dit indhold og finde det interessante og relevante. Lykkes det for dig, skaber du et positivt indtryk.
Digitale tekster er ikke som tekst på papir
At designe digitale tekster er noget helt andet end at designe tekster til papir. De skal derfor også skrives anderledes. I mange tilfælde kan du med stor fordel glemme alt om at skrive med en rød, gennemgående tråd.
Vi hopper i tekster, når vi læser online. Derfor skal alle afsnit helst skrives, så de kan forståes uden at have læst foregående afsnit.
Skriv overskuelige afsnit. Ikke kun fordi det stadig er sværere at læse tekst på en skærm, men også fordi vi forventer, at tekst på skærm er hurtig at læse. Hurtig at overskue. Tekster på skærm skal derfor ikke præsenteres som i en bog, en brochure eller et brev.
Tag hensyn til, at vi læser på forskellige måder
Når vi læser online, har vi tre forskellige formål:
- Vi scanner for at finde konkret information, som helst skal springe i øjnene.
- Vi skimmer for at se, om teksten er interessant, relevant og værd at gå i gang med
- Vi skipper – springer afsnit over, der ser ud til ikke at være interessante.
- Vi læser – når vi fordyber os i noget meget interessant.
Tekster online skal derfor designes til forskellige læsevaner og til formålet med teksten.
Du skal vide, om du er i gang med at designe noget, der bliver læst, scannet, skimmet eller skippet. Og det er sjældent enten eller. Ofte starter vi med at skimme eller scanne, hvorefter vi skipper noget og læser andet.
Men som tommelfingerregel kan du regne med, at du skal designe på disse måder
- Design blogindlæg til fokuserede læsere, der fordyber sig,men fang dem, der skimmer og scanner
- Design salgssider til utålmodige læsere, der zapper ukoncentreret og uengageret
- Design informative sider til søgende læsere, der scanner efter konkret information
- Design interaktionssider (eksempelvis forside) til besøgende der skimmer og scanner
Udover at bruge gestaltlovene som noget helt fundamentalt, kan du også med fordel bruge de følgende principper:
1) Simplicity
Undgå at distrahere besøgende. Fjern alt, der udelukkende er med for at pynte. Alt, der ikke har nogen funktion. Spørg konstant dig selv: “Hvorfor er det her med?” Hvis svaret er: “Fordi det er pænt!” så fjern det.
Når du laver design, der skal skabe resultater, skal du gøre det, der er nyttigt. Og naturligvis må det også gerne være pænt og smart!
- Design dine sider, så besøgende kan finde rundt
- Design dine sider, så det væsentlige og interessante er nemt at få øje på
- Design, så dine sider er nemme at bruge og nemme at læse
Simplicity opnåes på følgende måder:
- Farver: brug max fem farver. Baggrundsfarve og tekst – ofte sort på hvidt. Brug derudover en farve til link – og brug den samme farve til alle link.
- Skrifttyper: brug max to forskellige i max tre forskellige størrelser.
- Grafiske løsninger: Brug dem ikke til at pynte men til at gøre det nemmere for brugeren at finde noget bestemt (ikoner, symboler) til at navigere i indholdet. Eller til udføre en bestemt opgave (knapper, pile).
2) Visuelt hierarki
Prioriter dit indhold. Ikke kun efter hvad DU synes er interessant og relevant, men også efter hvad du ved besøgende vil kigge efter. Fremhæv de ord og sætninger, der gør det nemt for besøgende at skimme, scanne og vælge.
Fremhæv det vigtige
Størst er sædvanligvis vigtigere – og mere interessant – end lille. Dog ikke altid.
Meget lille ved siden af meget stor kan også være interessant. Men størst er nemmest at få øje på.
Kontraster i størrelse gør det nemt at navigere i tekst.
Hvis din brødtekst er 16 px (og mindre er ofte noget skidt online), kan største overskrift være cirka 2.5 gange større
- Brødtekst: 16 px
- H1 40 px (brødtekst gange 2.5)
- H2 32 px (brødtekst gange 2)
- H3 24 px (brødtekst gange 1.5)
Størrelserne er minimumsstørrelser!
Du må meget gerne gøre det større og det er endda ofte kun en fordel.
Farver kan også bruges til at fremhæve
En enkelt afvigende farve – brugt ét sted på skærmbilledet – vil tiltrække opmærksomhed.
Det må gerne være en kontrastfarve (komplementærfarve)
Men brug ALDRIG farver på tekst, medmindre det er et link. Du irriterer folk, hvis du farver tekst, der ikke er et link til noget drønspændende. Understregning af tekst har samme effekt.
Visuelt hieraki handler meget om kontraster – om forskelle, som gerne må være særdeles tydelige:
- Stor/lille
- Mørk/lys
- Komplementærfarver
- Forskellige skrifttyper (sans og sans serif)
Ved at bruge visuelt hieraki, tiltrækker du besøgendes opmærksomhed til det, der er vigtigst.
Beslut dig for, hvad der er vigtigst og fremhæv dét.
Er der mange lige store elementer på et skærmbillede, har du ikke prioriteret, men tvært imod gjort det svært for besøgende at vælge.
Det er et godt udgangspunkt kun at arbejde med få valgmuligheder (under otte) og max tre niveauer, når du arbejder med størrelser:
- Niveau 1: Det vigtigste indhold. Det gælder både tekst og billeder. Beslut dig for, hvilken størrelse du vil bruge på niveau 1. Eksempelvis billeder 795 px brede og tekst
- Niveau 2: Brug det til at organisere indhold i sektioner eller grupper, der hører sammen. Du skal bruge en lidt mindre størrelse end til niveau 1, men stadig væsentligt større end niveau tre. Brug niveau 2 til at hjælpe folk med at navigere i indholdet og finde det interessante.
- Niveau 3: eksempelvis brødteksten i et tekstbaserede layout. Det kan være lange tekster (eks. blogindlæg) eller korte. Tekst på niveau tre er den mindste størrelse, men den skal stadig være nem at læse.
Brug kun to typer skrift
En type til overskrift og en anden til brødtekst og andre typer tekst. Eksempelvis sans til overskrifter og sans serif til brødtekst. Vil du bruge en tredie skrift, så brug den eksempelvis til navigation eller citater.
- Sans – med fødder. Eksempelvis Times New Roman
- Sans serif – uden fødder. Eksempelvis Arial, Helvetica, Verdana
Vælg altid den mest letlæselige skrifttype til de mindste skrifttyper – eksempelvis brødteksten
- Brug serif-tekst til brødtekst og små skrifttyper
- Brug evt. Sans serif til overskrifter
Vælg dine skrifttyper, før du begynder at designe sider – og hold dig konsekvent til de skrifttyper, du har valgt.
Eksempel på billedstørrelser til tre niveauer:
- Niveau 1 – fuldbredde billeder – 1080-1280 px
- Niveau 2 – blogindlæg – 700-795 px
- Niveau 3 – ikoner og små billeder – 510 px
Brug billeder til at fremhæve det vigtige, til at fremme forståelse, til at vække opmærksomhed, til at navigere i indhold, til at skabe følelser og stemninger.
Sørg for, at billederne er tydelige, skarpe og relevante for indholdet.
Lad være med at bruge dårlige billeder – uskarpe billeder, dårlige motiver etc. Er billederne værd at bruge, så gør dem store.
Billeder skal også have den rette størrelse. Et portræt kan have størrelse som en tændstikæske. Det kan et billede med masser af detaljer ikke.
Husk, at formålet med design er at kommunikere og eventuelt få besøgende til at udføre noget bestemt. Gerne på en måde, som brugeren synes er nem, hurtig, naturlig, behagelig eller ligefrem sjov.
3) Skab ro med whitespace
Whitespace er luft. Rolige flader uden tekst.
Det behøver ikke være hvidt. En ensartet flade i et billede kan også fungere som white space.
Luft omkring elementer er med til at forstærke det visuelle hieraki.
Ting der er placeret tæt på hinanden opfattes som hørende sammen. Effekten kan forstærkes med white space.
Brug store og gode billeder.
Har du mange små billeder – eller mange elemeter i det hele taget – skaber det et uoverskueligt kaos. Sørg for, at dine billeder har en passende størrelse. Det samme gælder dine tekster. Naturligvis kan tingene blive overdrevent og unødvendigt store, men vær også opmærksom på, at mange små elementer – uden whitespace – skaber et rodet indtryk og gør det svært at vælge.
Er det svært at vælge, vil det som regel betyde, at folk vælger dig helt fra. De giver op, forsvinder og vender ikke tilbage.
Inddel delementer i et visuelt hieraki og lad være med at pakke alt for mange elementer sammen på et skærmbillede.
Fjern information, der ikke er relevant for brugeren og beslutningsprocessen.
Se eksempler på kunst, lavet med whitespace
4) Enkel og overskuelig navigation
Gode navigationsmuligheder på dit website er altafgørende. Og god navigation handler ikke kun om at have en menu.
Navigation skal ikke kun gøre det nemt for en besøgende at finde, hvad vedkommende leder efter, men også gerne friste til at se indhold, vedkommende ikke leder efter, men finder interessant, når det dukker op. (Læs om serendipity)
Det ideelle webdesign gør det hurtigt og nemt for besøgende finde rundt på dit website – komme fra A til B med så få klik som muligt. Uden at skulle lede. Uden at gå forgæves.
Et par tip til god navigation:
- Gør din primære menu meget enkel, overskuelig og med så få punkter som muligt. Max. 5-7 på hvert niveau.
- Placer den primære menu i toppen af siden på alle sider
- Hav en søgefunktion på dit website, hvis du har meget indhold
- Hav helst ikke mere end to niveauer (undermenuer) i din menu. Menupunkter i 3. niveau bliver sjældent set.
- Brug link forskellige steder i indhold til at friste besøgende til at læse mere og til at dem fremad på deres købsrejse.
5) Brug en konsekvent gennemgående stil
Træf nogle designmæssige valg på forhånd – før du går i gang med at designe – og brug dine valg konsekvent. Brug gennemgående skrifttyper, farver etc.
Lav eksempelvis et mood board, hvor du registrerer, hvordan ting skal se ud. Hvilke skrifttyper og i hvilket størrelser. Hvordan skal faktabokse se ud. Citater. Testimonials etc.
At træffe nogle valg på forhånd og følge dem giver et bedre og lettere forståeligt design. Det gør det også betydeligt hurtigere at designe indholdet, når du ikke konstant sidder og overvejer, hvad der er pænt.
Du behøver naturligvis ikke designe alle sider, så de ligner hinanden på en prik, men brug en gennemgående stil til forskellige typer sider og skab variation i detaljerne.
En konsekvent designstil gør det nemmere og hurtigere for besøgende at finde rundt og forstå dit indhold.
Brug ikke samme farve til gratis og til køb
Bruger du grøn til købsknapper og pink til at downloade gratis materiale, vil besøgende hurtigt forstå princippet. Byt ikke om på de farver, du har valgt. (Grøn og pink er tilfældige farver. Det er ikke forslag til, at du skal bruge netop de farver!)
Bryder du princippet og bytter om på farverne, risikerer du at forvirre og irritere.
Send altså entydige signaler – og brug dem konsekvent.
6) Tilgængelighed
Sørg for, at dit website er brugbart på både computer, tablet og smartphone.
Det er meget sandsynligt, at over 50% af besøgende på dit website kommer via smartphone. Design derfor først og fremmest til smartphone.
Bruger du et såkaldt responsivt design, skal du være meget opmærksom på, hvordan du placerer de forskellige elementer, så de dukker op i rigtig rækkefølge på både computer, tablet og smartphone.
Design ikke kun til computer
En smarthone er god til at vise, om dit webdesign er optimalt – om indholdet præsenteres optimalt. Er indholdet overskueligt på smartphone, er det også overskueligt på en computer.
Er skrifttyperne så store, at det er nemt at læse dit indhold på en smartphone, er det også nemt at læse på en computer.
Tjek, om der er tilpas stor kontrast mellem lyse og mørke farver? Ellers er det måske svært at læse dit indhold på en smartphione udendørs i dagslys.
Sort på hvidt er nemt at læse. Lysegrå skrift på hvidt er svær at læse.
Kan dine billeder ses på smartphone?
Design dine sider, så de består af elementer, der hver især helst ikke fylder mere end et skærmbillede på en smartphone, der vender på højkant.
Din side må gerne bestå af mange elementer – en meget lang side er ok! Men alle enkelte elementer (tekstbokse, tekstafsnit, ,billeder etc.) skal gerne kunne overskues på en smartphone.
7) Overhold konventioner
Der er en lang række konventioner, som internet-brugere har vænnet sig så meget til, at du irriterer og forvirrer dem, hvis du ikke følger dem:
- Farvet tekst er et link
- Understreget tekst er et link
- Hav et logo i toppen af siden – til venstre eller i midten
- Logo linker til forsiden
- Link åbner i samme vindue
- Kontaktoplysninger i toppen af siden samt i footer (bunden)
Lad dig ikke friste til at bryde konventionerne i et forsøg på at lave et anderledes og unikt design.
Noget af det dummest du kan gøre er at snyde folk til at tro, at teksten er link til noget spændende.
Lige så slemt er det, når eksempelvis et billede helt uventet viser sig at linke til noget. Eksempelvis til en større version af samme billede.
8) Tillidsvækkende
Vil du sælge noget til nogen, skal du skabe tillid.
Sørg for, at folk ikke skal have besvær med at finde relevant og tillidsvækkende information.
Sørg for, at de ikke farer vild.
Gør det nemt at finde information om dig, nemt at få en fornemmelse af hvem du er. Skjul ikke dit portrætfoto og dine kontaktoplysninger.
Selvom du måske foretrækker at blive kontatet via mail, bør du ikke undlade at oplyse dit telefonnummer. Noter hellere nummeret med en opfordring til hellere at sende mail. Vis folk tillid, hvis du har rent mel i posen og gerne vil skabe tillid til dig.
Gem heller ikke priser væk.
8) Bruger-centreret og resultatorienteret
Design dine sider med fokus på besøgendes interesser og behov – og med udgangspunkt i, hvordan besøgende rent faktisk reagerer på dit website.
Forestil dig, at du er en af dine besøgende – en potentiel kunde. Lever dit website op til dine ønsker? Frister det til at læse og se mere, end du oprindeligt kom efter. Giver det grund til at komme igen en anden gang.
Men design også med fokus på, hvad du vil opnå. Både på overordnet niveau – med din business, dit indhold, dine sider, dine indlæg. Men også gerne helt ned på makro-niveau. Skærmbillede for skærmbillede,
Test dine sider
Studér trafikken til dit website. Hold øje med, hvad der fungerer og ikke fungerer. Test igen. Lær af dine fejl. Brug tallene til at forbedre dit design.
Fede iagttagelser samlet på eet sted. Tak for det.