Udvikle et website

Designprocessen

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

• Foranalyse og Koncept • Informationsarkitektur, struktur og skitser• Visuel identitet / Look and feel• HTML

Forløbet

Jump on any time

KonceptDenne 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?

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.

Content InventoryI Content Inventory skal alt eksisterede indhold identificeres og kortlægges

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?

Udfyldt Content Inventory

TrafikanalyseEt solidt analytisk fundament for arbejdet, der kommer

TrafikanalyseTrafikanalysen 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?

SEO-analyseEn SEO-analyse, som fokuserer på relevante søgeord

SEO-analyseEn 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

KonceptHer genbesøger vi konceptet og sikrer at ambitionen matcher datagrundlaget

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

Struktur & flowsDenne 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.

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’

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)

Eksempel på sideprioriteringArtikelside1. Overskrift2. Tilmelding til nyhedsupdate på mail3. Billede4. Forfatter5. Dato for seneste redigering6. Manchettekst7. Teaser for mest populære artikel8. Brødtekst9. Artiklerbånd med lign. emner

Brugergrænseflade& skitserSkal 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.

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

Eksempel på greybox-skitse

Eksempel på artikel vist på desktop deviceEksempel på artikel vist på mobilt device

Designoplæg

OPEN SANSABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅabcdefghijklmnopqrstuvwxyzæøå0123456789!?({/=+#%&@})

MONTSERRATABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅabcdefghijklmnopqrstuvwxyzæøå0123456789!?({/=+#%&@})

GEORIGAABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅabcdefghijklmnopqrstuvwxyzæøå0123456789!?({/=+#%&@})

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

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.

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

Selveprocessen

Processen

Processen

Kreativ direktørLaust Jørgensenlj@peytz.dk