sådan arbejder du dit digitale design sikkert i mål
TRANSCRIPT
![Page 1: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/1.jpg)
Digitalt design
![Page 2: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/2.jpg)
Vejen til succes
![Page 3: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/3.jpg)
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)
![Page 4: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/4.jpg)
Faldgruberne
![Page 5: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/5.jpg)
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
![Page 6: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/6.jpg)
Designprocessen
![Page 7: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/7.jpg)
ProcessenOptimeret til at være resultatorienteret, skabe solid content strategi og udnytte moderne frontend muligheder på tværs af platforme
![Page 8: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/8.jpg)
• Foranalyse og Koncept • Informationsarkitektur, struktur og skitser• Visuel identitet / Look and feel• HTML
Forløbet
![Page 9: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/9.jpg)
Jump on any time
![Page 10: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/10.jpg)
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?
![Page 11: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/11.jpg)
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.
![Page 12: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/12.jpg)
TrafikanalyseEt solidt analytisk fundament for arbejdet, der kommer
![Page 13: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/13.jpg)
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?
![Page 14: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/14.jpg)
SEO-analyseEn SEO-analyse, som fokuserer på relevante søgeord
![Page 15: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/15.jpg)
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
![Page 16: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/16.jpg)
Content InventoryI Content Inventory skal alt eksisterede indhold identificeres og kortlægges
![Page 17: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/17.jpg)
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?
![Page 18: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/18.jpg)
Udfyldt Content Inventory
![Page 19: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/19.jpg)
KonceptHer genbesøger vi konceptet og sikrer at ambitionen matcher datagrundlaget
![Page 20: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/20.jpg)
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
![Page 21: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/21.jpg)
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.
![Page 22: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/22.jpg)
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’
![Page 23: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/23.jpg)
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)
![Page 24: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/24.jpg)
Eksempel på sideprioriteringArtikelside
1. 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
![Page 25: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/25.jpg)
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.
![Page 26: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/26.jpg)
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
![Page 27: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/27.jpg)
Eksempel på greybox-skitse
• Eksempel på artikel vist på desktop deviceEksempel på artikel vist på mobilt device
![Page 28: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/28.jpg)
Designoplæg
OPEN SANSABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅabcdefghijklmnopqrstuvwxyzæøå0123456789!?({/=+#%&@})
MONTSERRATABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅabcdefghijklmnopqrstuvwxyzæøå0123456789!?({/=+#%&@})
GEORIGAABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅabcdefghijklmnopqrstuvwxyzæøå0123456789!?({/=+#%&@})
![Page 29: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/29.jpg)
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.
![Page 30: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/30.jpg)
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.
![Page 31: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/31.jpg)
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
![Page 32: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/32.jpg)
Selveprocessen
![Page 33: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/33.jpg)
Processen
Processen
![Page 34: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/34.jpg)
Vejen til succes
![Page 35: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/35.jpg)
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)
![Page 36: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/36.jpg)
Faldgruberne
![Page 37: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/37.jpg)
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
![Page 38: Sådan arbejder du dit digitale design sikkert i mål](https://reader034.vdocuments.site/reader034/viewer/2022052313/5877d4231a28abaa6c8b4c37/html5/thumbnails/38.jpg)
Kreativ direktørLaust Jø[email protected] 0101