Webdesign proces: fra brief til godkendt design

Indhold

1. Designbriefen: det, designeren skal vide
2. Referencer og moodboard
3. Kick-off: ét møde, de rigtige folk
4. Sitemap og indhold før design
5. Wireframes: rækkefølge før udseende
6. Visuelt design af forsiden og nøgleskabelonerne
7. Feedbackrunder: hvor mange, og hvordan
8. Godkendelse: hvad "godkendt" betyder
Faldgruberne, der koster flest uger
Hvor lang tid det tager
Tjekliste
Kilder

Webdesign-processen er den del af et hjemmesideprojekt, hvor I går fra en brief til et godkendt design: brief, kick-off, sitemap og indhold, wireframes, visuelt design af forsiden og de vigtigste sidetyper, feedbackrunder og til sidst en godkendelse, som udvikleren bygger efter. Jeres vigtigste bidrag er ikke at have smag. Det er at give en klar brief, levere rigtigt indhold i tide, give feedback med én stemme og have én person, der kan sige ja.

Her er designfasen trin for trin, med det, I skal bidrage med i hvert, eksempler på spørgsmål til briefen, hvordan I giver feedback, der kan bruges, og de faldgruber, der koster flest uger. Hele projektet fra idé til lancering står under sådan får I en hjemmeside, og det, I skal have klar, før I går i gang, under forberedelse til en ny hjemmeside.

Tidslinje med syv trin fra brief, moodboard, kick-off, sitemap og indhold, wireframes og visuelt design til godkendt, med jeres bidrag under hvert trin og en pil for feedbackrunder over det visuelle design. — Designfasen i syv trin, med det I bidrager med under hvert. Rettelser er billige til venstre og dyre til højre. Illustration i fuld størrelse.

1. Designbriefen: det, designeren skal vide

Briefen er det dokument, designet bliver vurderet op imod. Uden den bliver hver feedbackrunde en diskussion om smag. Med den kan I spørge: Løser det her det, vi skrev? Den behøver ikke være lang. To sider er nok, hvis de svarer på de rigtige spørgsmål:

Hvem skal siden overbevise? Ikke “alle”, men fx “indkøbere i mellemstore produktionsvirksomheder, der sammenligner tre leverandører”.
Hvad skal de gøre? Ringe, skrive, bestille en demo, købe. Én primær handling.
Hvad er galt med den nuværende side? Konkret: “Kunderne ringer og spørger om priser, der står på siden” siger mere end “den er gammeldags”.
Hvad skal folk tænke om jer efter fem sekunder? Tre til fem ord: fx “erfarne, nede på jorden, hurtige”.
Hvem er jeres konkurrenter, og hvordan skal I se anderledes ud?
Hvad ligger fast? Logo, farver, skrifttyper, billedstil, krav fra en designmanual.
Hvilke sidetyper findes der? Forside, ydelsesside, case, artikel, kontakt, produktside.
Hvem godkender? Navnet på den person, der har det sidste ord.

Svarene på de første to kender I fra forberedelsen. De sidste seks er dem, der gør briefen til en designbrief.

2. Referencer og moodboard

Ord som “moderne” og “lækker” betyder noget forskelligt for alle. Derfor skal I vise i stedet for at beskrive. Find nogle få sider, I kan lide, og skriv for hver én sætning om, hvad det præcis er: luften mellem afsnittene, billederne af rigtige medarbejdere, at prisen står øverst. Det er detaljen, designeren kan bruge, ikke siden som helhed.

Ud fra jeres referencer og briefen kan designeren lave et moodboard: en samling af farver, typografi, billedstil og eksempler, der viser retningen. Nielsen Norman Group beskriver, at moodboards hjælper med at skabe enighed om det visuelle udtryk, før designeren begynder på prototyper. Det er billigt at sige nej til et moodboard og dyrt at sige nej til en færdig forside. Er I i tvivl mellem to retninger, så sig det nu.

3. Kick-off: ét møde, de rigtige folk

Kick-off-mødet er der, hvor briefen bliver til en fælles forståelse. Det skal tage halvanden til to timer og have dem med, der skal leve med siden: den, der godkender, en fra salg eller kundeservice, der ved, hvad kunderne spørger om, og den, der skal skrive eller redigere indhold. En god kick-off dækker:

Gennemgang af briefen, så I og designeren er enige om problemet, før nogen taler om løsninger.
Kunderne: hvem de er, hvad de spørger om, hvad der får dem til at vælge jer.
Referencerne og moodboardet: hvad der virker, og hvorfor.
Sidelisten og hvilke sidetyper, der skal designes.
Hvem der godkender, hvordan feedback gives, og hvor mange runder der er.
Datoer for skitser, feedback og godkendelse, sat i kalenderen med det samme.

Det første punkt er det vigtigste. Nielsen Norman Group peger på, at feedback på design kun bliver brugbar, når der er enighed om det problem, designet skal løse. Ellers bliver den subjektiv.

4. Sitemap og indhold før design

Før der tegnes noget, skal det ligge fast, hvilke sider der er, og hvad der skal stå på dem. Sitemappet afgør menuen, og indholdet afgør, hvor meget plads hver sektion skal have. Hvordan strukturen bygges, står under hjemmesidens opbygning.

Det betyder ikke, at al tekst skal være færdigskrevet. Men overskrifterne, de vigtigste afsnit og antallet af ydelser, cases og medarbejdere skal være kendt. Et design lavet til tre ydelser holder ikke til elleve. Nielsen Norman Group er ret skarpe her: Fyldtekst som lorem ipsum låser layoutet fast efter indhold, der ikke findes, og de anbefaler kun at bruge den, hvis I er nødt til det, og kun i de tidligste, grove skitser.

5. Wireframes: rækkefølge før udseende

Wireframes er grå skitser af de vigtigste sider: kasser, overskrifter og knapper, ingen farver. Her skal I vurdere én ting: Står tingene i den rækkefølge, en kunde har brug for dem? Kommer prisen, før man skal kontakte jer? Er der et bevis tæt på knappen? Det er ikke tidspunktet at diskutere farver. Hvad wireframes og prototyper er, og hvordan I læser dem, står under wireframes og prototyper.

6. Visuelt design af forsiden og nøgleskabelonerne

Nu kommer farver, typografi, billeder og detaljer på. Designeren laver ikke alle sider, men forsiden og de skabeloner, resten bygges af: typisk en ydelsesside, en case- eller artikelside og kontakt, og for en webshop en kategori- og produktside. Når skabelonerne er godkendt, er resten varianter.

Bed om at se hver skabelon i både computer- og mobilversion. Hos os ser og godkender kunden en skitse af forsiden og de vigtigste sidetyper, før der skrives en linje kode, så alle rettelser sker, mens de er billige.

7. Feedbackrunder: hvor mange, og hvordan

Aftal antallet på forhånd. Efter vores erfaring er to runder nok for de fleste virksomhedssider, når briefen er god: én, hvor retningen justeres, og én til detaljer. Behøver I fem, er det sjældent designet, der er problemet, men briefen eller antallet af mennesker, der giver feedback.

Feedback, der kan bruges, har tre kendetegn:

Den beskriver problemet, ikke løsningen. UK-regeringens designteam Design102 anbefaler at beskrive problemet, fx at tekstboksene ser trange ud, og lade designeren løse det. “Gør logoet større” er en løsning; “vi er bange for, at folk ikke kan se, hvem vi er” er problemet, og der kan være bedre svar på det.
Den er knyttet til briefen. “Det virker ikke erfarent nok” kan designeren arbejde med. “Jeg kan ikke lide grøn” kan designeren ikke, medmindre I forklarer hvorfor.
Den kommer med én stemme. Saml alle kommentarer hos én person, som fjerner modsigelser, før de sendes. Design102 anbefaler også én fast kontaktperson og ét aftalt format, så intet bliver væk mellem mails og kommentarer i PDF’er.

I stedet for	Skriv
Gør knappen rød.	Jeg lagde ikke mærke til knappen, før jeg ledte efter den.
Flyt cases op.	Vores kunder vil se beviser, før de læser om ydelserne.
Det er for kedeligt.	Briefen siger “nede på jorden”, men det her virker mere formelt end os.
Kan vi prøve noget helt andet?	Moodboardet ramte, men forsiden mistede den varme, billederne havde.

Kommer der et konkret løsningsforslag alligevel, er det ikke spildt. Nielsen Norman Group råder designere til at spørge “hvad?” og “hvorfor?”, fordi problemet bag et dårligt forslag kan være vigtigt. I sparer bare en runde ved selv at sige problemet med det samme.

8. Godkendelse: hvad “godkendt” betyder

Når I godkender designet, siger I: Det her er det, der skal bygges. Det betyder tre ting i praksis. Layout, farver, typografi og komponenter ligger fast, og udvikleren bygger efter dem. Tekst og billeder kan stadig skiftes, så længe de passer ind i skabelonerne. Og nye sidetyper, nye funktioner eller en ny retning efter godkendelsen er en ændring, der koster tid og typisk penge, fordi noget af det byggede skal laves om.

Godkend derfor skriftligt, gerne i en kort mail, der nævner, hvilke skabeloner og hvilken version det gælder, og godkend først, når I har set mobilversionen.

Faldgruberne, der koster flest uger

Design by committee. Seks personer giver hver deres feedback direkte til designeren, og resultatet bliver et kompromis, ingen er glade for. Én person samler og beslutter.
Kun desktop godkendt. Designet ser godt ud på den store skærm til mødet, men ingen har set det på en telefon. I Danmark kommer over en tredjedel af sidevisningerne fra mobil. Åbn skitserne på jeres egen telefon, før I godkender.
Lorem ipsum helt til godkendelse. Den rigtige tekst kan sagtens være tre gange så lang som fyldteksten, og så knækker layoutet. Godkend med rigtige overskrifter og så meget rigtig tekst som muligt.
Sider, der kommer til sent. En webshop, en jobside med ansøgning eller en kundeportal, der dukker op efter godkendelsen, er ikke en lille tilføjelse. Den skal designes og prissættes for sig.
Ny beslutningstager midt i forløbet. Direktøren ser designet første gang i runde tre. Involver den, der har det sidste ord, fra kick-off.

Hvor lang tid det tager

For en almindelig virksomhedsside tager designfasen typisk en til tre uger. Selve designarbejdet er sjældent det, der trækker ud; det er ventetiden på svar og indhold. Hver feedbackrunde, der tager en uge at samle internt, flytter lanceringen en uge. Sæt derfor datoer for jeres feedback i kalenderen ved kick-off, og hold dem. Hos os ligger designskitsen inden for den samlede levering på 14–21 dage for en Basic-hjemmeside, med den samme kontaktperson hele vejen.

Tjekliste

Briefen svarer på målgruppe, handling, problem, ønsket indtryk, konkurrenter og det, der ligger fast.
Referencer med én sætning om, hvad I præcis kan lide ved hver.
Kick-off med beslutningstageren og en, der kender kunderne.
Sitemap og antal sider, ydelser og cases er kendt, før der tegnes.
Rigtige overskrifter og hovedtekst i skitserne, ikke lorem ipsum.
Antal feedbackrunder og datoer er aftalt.
Feedback beskriver problemer, er knyttet til briefen og kommer med én stemme.
Alle skabeloner er set og godkendt på mobil.
Godkendelsen er skriftlig og nævner version og skabeloner.

Er de ni på plads, bliver designfasen den korteste del af projektet i stedet for den længste. Se, hvordan vi arbejder med webdesign og UX/UI, og hvordan design og struktur hænger sammen under UX og UI design.