Digitalt design handler om at ramme målet rent på mobilen, tabletten og skrivebordsskærmen. Og det handler om at gøre brugerne glade, så de gør, som du ønsker. For at lykkes med dit design anbefaler vi at gå igennem nogle processer i en bestemt rækkefølge, og på vores morgeninspiration den 31/3 gennemgik Kreativ Direktør Laust Jørgensen denne designproces. Se alle slides her.

1. Digitalt
design

2. Vejen til succes

3. Vejen til succes
• Du skal vide, hvornår du er en succes
• Du skal vide, hvem du taler til
• Design er ikke pynt - det skal løse en opgave
• Det tager tid at styre baglandet
• Start godt og småt (MVP)

4. Faldgruberne

5. Faldgruberne
• Jo flere stop, des mere spildtid
• Debat om design uden mål er spild af tid
• Baglandet melder tilbage efter deadline
• Holdet bliver føst sat når projektet er i gang

6. Designprocessen

7. Processen
Optimeret til at være
resultatorienteret, skabe solid
content strategi og udnytte
moderne frontend muligheder
på tværs af platforme

8. • Foranalyse og Koncept
• Informationsarkitektur, struktur og skitser
• Visuel identitet / Look and feel
• HTML
Forløbet

9. Jump on any time

10. Koncept
Denne fase skal afklare konceptet for
sitet. Her fastlægges, hvilket koncept
/hvilke koncepter, der skal ligge til grund
for sitet, ligesom der arbejdes med sitets
overordnede målsætninger.
Hvilke resultater skal sitet levere?

11. Koncept
• Koncept og målsætningsmæssigt kick-off
• Målsætninger
• Behov
• Rammer og begrænsninger
• Målgruppeoverblik: Målgruppetyper og vigtigste use-
cases per målgruppe.
• Oversigt over samspillet med andre kanaler.

12. Trafikanalyse
Et solidt analytisk fundament for
arbejdet, der kommer

13. Trafikanalyse
Trafikanalysen giver indsigt i brugernes konkrete adfærd
på det eksisterende site. Vi kigger på trafiktallene for at
forstå de besøgendes adfærdsmønstre:
• Hvilke sider besøges oftest?
• Hvilke sider forlades efter kort tid?
• Hvordan bevæger brugerne sig rundt på det
eksisterende site?
• Hvilke kilder kommer de besøgende fra
• Hvilke digitale devices benytter de?

14. SEO-analyse
En SEO-analyse, som fokuserer på
relevante søgeord

15. SEO-analyse
En høj ranking (placering) på søgemaskinernes
resultatsider er essentiel for antallet af besøg på sitet.
SEO-analysen fokuserer på at finde de relevante
søgeord, der kan ranke højt. Vi udarbejder en:
• Bruttoliste af søgetermer, som er relevante for sitet
• Måler hvordan sitet ranker på disse termer i dag
• Vurderer, baseret på konkurrencen på
søgetermerne, hvilke skal optimeres og på hvilken
måde

16. Content
Inventory
I Content Inventory skal alt eksisterede
indhold identificeres og kortlægges

17. Content Inventory
• Hvilket eller hvilke sites ligger det på i dag?
• + Hvilke grupper eller specialforeninger er det relevant for?
• + Hvor nødvendigt er det?
• + Hvilken kvalitet har det?
• + Er det opdateret?
• + Hvem er ansvarlig for opdateringen?
• + Hvor ressourcekrævende er det at vedligeholde?
• + Hvor meget bliver det læst og af hvor mange?

18. Udfyldt Content Inventory

19. Koncept
Her genbesøger vi konceptet og sikrer at
ambitionen matcher datagrundlaget

20. Content strategi
• Hvilke indholdstyper skal der være
• Hvilke særlige features skal der være
• Hvor mange ressourcer kræver de forskellige
indholdstyper at fremstille og vedligeholde
• Hvilke indholdstyper og features forventes at være
mest effektive i forhold til at opnå målsætningerne for
sitet

21. Struktur & flows
Denne proces forbereder overgangen til at
arbejde med konkret design til et konkret system.
Indholdet skal struktureres og systematiseres,
således det kommende brugergrænsefladedesign
tager afsæt i det konkrete indhold.

22. Struktur
• Sitetræ og navigation: Hvordan skal indholdet på
sitet struktureres og efter hvilke principper? Hvilket
navigationsprincip skal man anvende på hhv. mobil
og desktop?
• Overblik over hvor mange sidetyper sitet forventes at
bestå af
• Elementprioritering: prioritering af alle sidetypers
indhold for brug i ’progressive enhancement’

23. Flows
• Beskrivelse af nøgleflows for sitets understøttelse af
brugeropgaverne, og hvordan disse understøtter
sitets målsætninger
• Oplistning af målsætning(er) per sidetype (anvendes
til at prioritere elementerne på siden)

24. Eksempel på sideprioritering
Artikelside
1. Overskrift
2. Tilmelding til nyhedsupdate på mail
3. Billede
4. Forfatter
5. Dato for seneste redigering
6. Manchettekst
7. Teaser for mest populære artikel
8. Brødtekst
9. Artiklerbånd med lign. emner

25. Brugergrænseflade
& skitser
Skal etablere principper for layoutet af tjenesten, så der dannes et
overblik over tjenestens visuelle elementer.
Arbejdet her bygger videre på eventuelle skitser produceret i
konceptfasen, men sigter på at etablere systematisk opbyggede
brugergrænseflader.

26. Brugergrænseflade & skitser
• Simple skitser af alle sidetyper indholdselementer – typisk
udformet som ’greyboxes’
• Overordnede layoutprincipper på tværs af sidetyper - både
mobil og desktop, visualiseret i form af småskitser af
sideopbygning. Anvendes ikke ved helt simpel navigation
• Simple skitser af nøgle indholdselementer
• Analyse af brug af eksisterende CMS funktionalitet i
tjenesten

27. Eksempel på greybox-skitse
• Eksempel på artikel vist på desktop deviceEksempel på artikel vist på mobilt device

28. Designoplæg
OPEN SANS
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ
abcdefghijklmnopqrstuvwxyzæøå
0123456789!?({/=+#%&@})
MONTSERRAT
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ
abcdefghijklmnopqrstuvwxyzæøå
0123456789!?({/=+#%&@})
GEORIGA
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ
abcdefghijklmnopqrstuvwxyzæøå
0123456789!?({/=+#%&@})

29. Prototype
Når designprocessen for alvor går i gang leverer
vi alt til kunden i HTML, fordi det er i HTML at det
interaktive og responsive site kan vurderes på
tværs af platforme.
HTMLen i denne proces er ikke nødvendigvis den
HTML som vi endeligt bruger. Denne proces er en
design-proces og ikke en udviklingsproces.

30. HTML prototype
• Når designprocessen for alvor går i gang leverer vi
alt til kunden i HTML, fordi det er i HTML at det
interaktive og responsive site kan vurderes på tværs
af platforme.
• HTMLen i denne proces er ikke nødvendigvis den
HTML som vi endeligt bruger. Denne proces er en
design-proces og ikke en udviklingsproces.

31. HTML prototype
• Indsamling af billedmateriale og realistisk tekst-
content
• Udarbejdelse af første grundside
• Første iteration på første grundside
• Styleguide efter et par sider
• Alle sidetyper produceres færdig
• Løbende test og justering

32. Selve
processen

33. Processen

34. Vejen til succes

35. Vejen til succes
• Du skal vide, hvornår du er en succes
• Du skal vide, hvem du taler til
• Design er ikke pynt - det skal løse en opgave
• Det tager tid at styre baglandet
• Start godt og småt (MVP)

36. Faldgruberne

37. Faldgruberne
• Jo flere stop, des mere spildtid
• Debat om design uden mål er spild af tid
• Baglandet melder tilbage efter deadline
• Holdet bliver føst sat når projektet er i gang

38. Kreativ direktør
Laust Jørgensen
lj@peytz.dk
7220 0101