1. Beslut, hvad designet skal hjælpe kunden med
Begynd med en situation, ikke en farve. En potentiel kunde besøger måske din hjemmeside for at finde ud af, om du løser en bestemt opgave. En eksisterende kunde skal måske finde et telefonnummer. Skriv de vigtigste situationer ned, og vælg den, som forsiden især skal hjælpe med. Det giver jer noget konkret at bedømme designforslag ud fra.
Et tænkt eksempel: Et rådgivningsfirma har tre serviceområder, men kunderne kender ikke firmaets interne fagudtryk. Her er den første opgave at gøre forskellene forståelige. Et stort stemningsbillede kan være relevant, men det må ikke skubbe forklaringen og vejen til de tre områder så langt ned, at kunden overser dem. Designet skal både skabe en identitet og give plads til svaret.
Vælg dernæst to eller tre egenskaber, hjemmesiden skal udtrykke. Ord som rolig, direkte og grundig kan bruges, hvis I forklarer dem. Rolig kan betyde få samtidige fremhævninger. Direkte kan betyde klare overskrifter og synlige kontaktmuligheder. Grundig kan betyde konkrete forklaringer og billeder fra arbejdet. Uden den oversættelse bliver ordene let en smagsdiskussion.
Skriv også, hvad I vil undgå. Det kan være generiske billeder af håndtryk, tekst oven på urolige billeder eller effekter, der forsinker adgangen til indholdet. En fravalgt retning kan være lige så nyttig som en favorit. Den gør det lettere at forstå, hvorfor et flot forslag alligevel ikke passer til virksomhedens hverdag.
Få de centrale personer til at godkende denne korte ramme, før detaljerne vælges. Aftal, hvem der træffer den endelige beslutning. Ellers risikerer designet at blive en samling af forskellige personers yndlingsfarver. Vores artikel om fem principper for godt webdesign giver et supplerende overblik over struktur og tydelighed.
2. Brug din identitet og dine referencer som udgangspunkt
Saml det, virksomheden allerede har: logo, farvekoder, skrifttyper, billeder, præsentationer og eventuelle designregler. Markér, hvad der er besluttet, hvad der blot er blevet en vane, og hvad I savner. Et logo er et vigtigt udgangspunkt, men det fortæller ikke i sig selv, hvordan en formular, en serviceside eller en mobilmenu skal se ud.
Hvis identiteten er udviklet til trykte materialer, skal den afprøves på skærm. En skrifttype, der er flot på en plakat, skal også fungere i en længere forklaring. En lys logofarve kan måske bruges som baggrund, selv om den ikke fungerer som lille tekst på hvidt. Bevar genkendeligheden ved at tildele elementerne egnede opgaver frem for at bruge dem ens overalt.
Find nogle få referencer, og skriv ved hver af dem, hvad I vil lære. Det kan være en tydelig præsentation af services, en bestemt billedstil eller en enkel opbygning af cases. Notér også det, der ikke passer. En reference til en international modebutik er eksempelvis ikke automatisk en god model for et lokalt rådgivningsfirma med få billeder og lange forklaringer.
Lav højst et par tydeligt forskellige retninger til den første vurdering. Brug samme overskrift og samme serviceindhold i dem, så I sammenligner designvalg og ikke kvaliteten af teksterne. Hvis det ene forslag har professionelle fotos og det andet har tomme felter, bliver sammenligningen skæv. Mangler materialer, skal det stå klart som en opgave i projektet.
Du kan følge metoden i brug hjemmesider som inspiration uden at kopiere dem. Har virksomheden allerede en identitet, viser guiden til visuel identitet på hjemmesiden, hvordan materialerne omsættes til regler for sidens elementer.
3. Giv farverne faste opgaver
Start med roller: baggrund, almindelig tekst, sekundær tekst, primær handling og statusbeskeder. Vælg derefter farver til rollerne. Det er lettere at vedligeholde en hjemmeside, når samme type handling ser ens ud på tværs af sider, end når hvert nyt afsnit får sin egen knapfarve. Paletten skal kunne bruges med indhold, ikke kun vises som flotte cirkler.
En enkel retning kan bestå af neutrale flader, mørk tekst og én tydelig accent til de vigtigste handlinger. Det er en arbejdsmetode, ikke en universel regel om antal farver. En webshop med mange produktkategorier kan have andre behov. Spørgsmålet er, om farverne hjælper kunden med at forstå forskelle, eller om de blot gør det sværere at vide, hvad der er vigtigst.
Teksten skal være let at skelne fra baggrunden. Lys grå tekst på hvidt kan fx være svær at læse, selv om det ser elegant ud. Bed din designer måle forskellen mellem farverne, også kaldet kontrasten. Vejledningen om tekstkontrast beskriver, hvordan den kontrolleres.
Prøv knapperne med både mus og tastatur. De må gerne skifte farve, når du peger på dem eller vælger dem med Tab-tasten, men teksten skal stadig kunne læses. Har siden både lyst og mørkt tema, skal du gennemgå tekst, billeder og knapper i begge udgaver.
I artiklen om farver til hjemmesiden får du en konkret fremgangsmåde og en tabel, du kan bruge til at fordele rollerne. Vælg paletten på et udsnit af en rigtig side, så du ser farverne sammen med billeder og længere tekst.
4. Vælg skrift med dine egne tekster
Prøv skrifttyper med virksomhedens rigtige ord. Brug navnet, en lang serviceoverskrift, et afsnit om en ydelse, en pris og en kontaktknap. Husk danske tegn. En skrift kan virke overbevisende i en kort engelsk eksempeloverskrift og blive besværlig, når den skal vise et langt dansk ord på en telefon.
Gør det tydeligt, hvad der er sidens titel, hvad der starter et nyt afsnit, og hvad der er almindelig tekst. Du kan ofte bruge den samme skrifttype og variere størrelse og tykkelse. Læseren skal hurtigt kunne finde det relevante afsnit uden at læse hele siden.
Se på linjelængde, linjeafstand og mellemrum mellem afsnit sammen med selve skriften. En tæt tekstblok bliver ikke nødvendigvis behagelig at læse ved blot at vælge en anden font. Bedøm en hel serviceside, ikke kun forsiden. Det er ofte på de indholdstunge sider, at valget skal bevise sin værdi.
Se også siden, mens den åbner. Er teksten synlig med det samme, eller skifter den udseende og får knapper til at hoppe? Det kan skyldes, at skrifttypen stadig bliver hentet. Bed udvikleren kontrollere det med hjælp fra vejledningen om hurtig og stabil visning af skrifter.
Brug guiden til skrifttyper på hjemmesider til at opstille en sammenlignelig prøve. Godkend først valget, når du har set almindelig tekst, knapper og lange overskrifter på både lille og stor skærm.
5. Vælg billeder, der forklarer noget relevant
Spørg ved hvert billede, hvad kunden skal forstå bedre. Et portræt kan vise, hvem man møder. Et billede fra en arbejdsproces kan forklare, hvordan en ydelse udføres. Et produktfoto kan vise detaljer, som teksten ikke beskriver godt alene. Et dekorativt billede har en anden opgave og bør ikke fremstå som dokumentation for jeres arbejde.
Egne fotos er især relevante, når motivet er jeres mennesker, lokaler, produkter eller konkrete projekter. Stockfotos kan være en praktisk mulighed til mere generel stemning eller illustration, men de bør ikke præsenteres, som om de viser en virkelig kunde eller medarbejder. Det er ofte fornuftigt at kombinere kilder frem for at vælge én løsning til alle motiver.
Lav en motivliste, før I bestiller en fotograf eller køber billeder. Skriv, hvor billedet skal bruges, hvilken beskæring der er nødvendig, og om det også skal fungere på mobil. Et bredt foto med en person helt ude i kanten kan være svært at bruge i et smalt kort. Få derfor prøvet de faktiske formater, mens der stadig kan vælges andre billeder.
Nogle besøgende får siden læst op. Et billede med vigtig information har derfor brug for en kort beskrivelse, kaldet alt-tekst. Ren pynt kan springes over. Beskriv fx, hvad et diagram viser, i stedet for blot at skrive “diagram”. Vejledningen til billedbeskrivelser hjælper med at vælge, hvad der skal beskrives.
I egne billeder eller stockfotos finder du en model til at vælge motiv, kilde og dokumentation. Brug listen til at prioritere de billeder, der faktisk kræver adgang til jeres virksomhed, og undgå at bruge hele budgettet på dekorative elementer før de vigtige motiver.
6. Lad bevægelse have en tydelig opgave
En kort animation kan vise, at en menu åbner, eller at en knap reagerer. En overgang kan gøre et skift mellem tilstande lettere at følge. Men bevægelse er ikke automatisk en forbedring. Hvis kunden skal vente på, at overskriften bliver skrevet færdig, før den kan læses, bør I overveje, om effekten står i vejen for opgaven.
Del bevægelse op i feedback, forklaring og dekoration. Feedback viser en reaktion på kundens handling. Forklaring viser en sammenhæng, som ellers er svær at forstå. Dekoration skaber stemning. Kategorierne gør det lettere at prioritere, når tidsplan, hastighed eller tilgængelighed kræver, at noget forenkles. Dekoration skal kunne begrundes lige så konkret som andre designvalg.
Bed også om at se siden med færre bevægelser. Nogle besøgende finder store effekter ubehagelige, og de skal stadig kunne bruge menuen, læse teksten og kontakte dig. Baggrunden er forklaret i vejledningen om at kunne slå bevægelseseffekter fra.
En effekt på en kontaktknap kan eksempelvis være en farvefyldning og en pil, der glider ind. Knappens formål skal være tydeligt før effekten, og linket skal også fungere med tastatur og på en touchskærm. Beslutningen handler altså om mere end, hvor flot animationen ser ud, når en designer demonstrerer den med en mus.
Læs hvornår animationer hjælper og forstyrrer for en konkret kontrol af automatiske effekter, hover og alternative visninger. Bed om at se løsningen både med og uden bevægelse, før den godkendes.
7. Afprøv retningen på rigtige sider
Saml valgene i en klikbar prøve eller en fungerende side. Afprøv mindst forsiden, en indholdstung serviceside og kontaktmuligheden. Brug rigtige overskrifter, realistiske tekstmængder og de billeder, I faktisk kan få. Et design, der kun fungerer med korte eksempeltekster, kan skabe ekstra arbejde, når resten af hjemmesiden skal fyldes ud.
Giv et par personer uden for projektet en konkret opgave: Find den relevante ydelse, forklar hvad virksomheden tilbyder, og vis hvordan du vil tage kontakt. Bed dem fortælle, hvad de er i tvivl om. Undgå kun at spørge, om de kan lide farverne. Deres observationer er input til designarbejdet, ikke et statistisk bevis for en bestemt forbedring.
Kontrollér mobilvisning, længere tekst og forstørrelse. Se efter knapper, der bliver klemt, overskrifter, som får mærkelige brud, og billeder, der mister deres vigtigste motiv. Prøv en side med meget lidt indhold og en med meget. På den måde undersøger du reglerne bag designet frem for kun det pæne eksempel.
Samle feedback i tre grupper: noget der forhindrer en opgave, noget der skaber tvivl, og noget der mest handler om præference. Ret den første gruppe først. Hvis to personer foretrækker hver sin farve, kan I vende tilbage til den oprindelige ramme og vurdere, hvilken retning der bedst understøtter den. Det er bedre end at lade den seneste kommentar afgøre hele udtrykket.
8. Saml beslutningerne, så designet kan bruges videre
Det færdige resultat skal kunne gentages på næste serviceside og næste blogindlæg. Gem derfor ikke kun et skærmbillede af forsiden. Saml regler, materialer og konkrete eksempler i et kort dokument, som både redaktør og udvikler kan forstå. Notér også beslutninger, der bevidst afviger fra den oprindelige identitet.
| Beslutning | Det skal være afklaret | Sådan kan den kontrolleres |
|---|---|---|
| Retning | Kundens vigtigste opgave og ønsket udtryk | Kan en ny læser finde ydelsen og næste skridt? |
| Farver | Roller og tilladte kombinationer | Er tekst, knapper og tilstande afprøvet? |
| Skrift | Familie, vægte og hierarki | Virker rigtige tekster på mobil og ved forstørrelse? |
| Billeder | Motiv, format og dokumentation | Viser billedet det rigtige uden misvisende beskæring? |
| Bevægelse | Formål og alternativ | Kan opgaven løses uden effekten? |
| Vedligeholdelse | Materialer og ansvarlig | Kan næste side laves uden at opfinde reglerne igen? |
En godkendelse bør knyttes til denne konkrete prøve og de aftalte regler. Skriv, hvad der er valgt, hvad der stadig mangler, og hvem der følger op. Så bliver designet en brugbar del af virksomhedens hjemmeside frem for en samling enkeltstående præferencer.
Hvis du vil have hjælp til at omsætte retningen til en løsning, kan du læse om Designets arbejde med hjemmesider. Tag gerne en kort beskrivelse af kundens opgave og et par kommenterede referencer med til samtalen. Det giver et konkret udgangspunkt for at tale om design, indhold og omfang.
