Sådan arbejder du metodisk med at udvikle et website til glæde for både dig og dine brugere. Processen er udviklet og forfinet gennem år og har leveret +100 succesrige websites - flere af dem har vundet priser for "bedste danske site". Disse slides er fra en morgeninspiration hos Peytz & Co den 23/2 2016, hvor kreativ direktør Laust Jørgensen gennemgik processen. Se flere morgeninspirationer her: http://peytz.dk/events

1. Udvikle et
website

2. Designprocessen

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

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

5. Jump on any time

6. 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?

7. 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.

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

9. 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?

10. Udfyldt Content Inventory

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

12. 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?

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

14. 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

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

16. 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

17. 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.

18. Struktur & flows
• 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’

19. Struktur & 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)

20. 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

21. 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.

22. 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

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

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

25. 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.

26. 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.

27. 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

28. Selve
processen

29. Processen

30. Kreativ direktør
Laust Jørgensen
lj@peytz.dk