lækkert digitalt design - morgeninspiration i kbh 09. maj 2017
TRANSCRIPT
Sådan
digitalt
design
Sådan bliver dit
digitale design
super lækkert
Agenda
▫ Hvad er godt design? – Martin Andersen
▫ Processen set fra oven – Laust Jørgensen
▫ Fra struktur til design – Martin Andersen
Hvad er godt
design?
Godt design skifter med tiden
Godt design skifter med tiden
Godt design skifter med tiden
Godt design skifter med tiden
Og der er trends
Og der er trends
Og der er trends
Hvad er godt design?
· Hvem er målgruppen
· Hvad er formålet
· Er det let at bruge
Hvem er målgruppen?
Hvem er målgruppen?
Hvad er formålet?
Hvad er formålet?
Er det let at bruge?
Godt design er det mest effektive
Hvordan gør vi hos
Peytz & Co?
Vi har en kreativ
proces
Processen set fra
oven
Why
▫ Strategi
▫ Målsætninger
▫ Målgruppe
▫ Teser
▫ Test
Hvornår er du en succes?
How
Timeline
1 2 3 4 5 6 7 8 9 14 1611
What
▫ Garanti
▫ Fleksibilitet
▫ Øje på målet
Watch out
▫ Stakeholders
▫ Projektorganisation
▫ Fleksibilitet <> budget
▫ Hvornår er du en succes?
PauseAlle strækker ben
Designprocessen
Designprocessen
Struktur
Struktur & IA
Personas - hvem designer vi til?
Struktur
36
Struktur
37
Struktur
38
Struktur & IA
Eksisterende eller ny struktur - hvad er udgangspunktet?
Struktur
39
Struktur & IA
Identificer nøgle-flows
· Hvilke brugerrejser er de vigtigste?
Struktur
40
Sidetyper
En sidetype er en indholdsskabelon
Det kan typisk være en forside, en landingside og en artikelside
Vi bruger dem til at få overblik over hvad vi efterfølgende skal bygge
Struktur
41
Struktur & IA
Omstrukturering og ændring af fokus
Struktur
Struktur & IA
Denne fase ender med:
· Opdateret struktur
· Hvad menuen indeholder
· Oversigt over sider/sidetyper
· Hvor vil vi lede brugerne på vej i forhold til vores målsætninger
Struktur
StrukturStrukturtip
Brugerne kan ikke overskue mere end 7 hovedmenupunkter
Skitser
Skitser & wireframes
Design starter her!
Skitser
InspirationSkitser
Wireframes
Ud fra strukturen tegner vi wireframes
· Fokus på prioritering af indholdet
· Fokus på brugerrejser
Skitser
48
Skitser & wireframes Skitser
49
Skitser & wireframes Skitser
Wireframes
Wireframes er en visualisering af websitet
· De beskriver sidernes opbygning
· Hvordan opfører sitet sig på forskellige skærme
· Hvordan er sitets elementer prioriteret
· Hvordan navigerer brugeren fra A til B
Skitser
Brugertest
Når wireframes er klar. Lav test!
Test sparer tid senere!
Skitser
52
UX Tip
Tommelfingerreglen
Skitser
Look & feel
DFI - Film-app til pædagogerLook &
feel
NøgleflowsLook &
feel
WireframesLook &
feel
Look &
feel
Look &
feel
Færdig app
Dansk JournalistforbundLook &
feel
61
Look &
feel
62
Look &
feel
63
Look &
feel
64
Look &
feel
65
Look &
feel
66
Look &
feel
67
Glyptoteket
Starter på baggrund af wireframes og designer med løbende feedback
fra kunden
Look &
feel
68
Look &
feel
69
Look &
feel
70
Look &
feel
71
Look &
feel
72
Look &
feel
73
Look &
feel
Designtip
Gruppér emner for bedre overskuelighed
Look &
feel
75
Gruppér emner for bedre
overskuelighed
Look &
feel
Prototype
Prototype
Hvad er en prototype?
Prototype
78
Prototype
Fordel at kunne se hvordan sitet vil opføre sig live
Prototype
PrototypePrototype
Her er det et godt tidspunkt til en brugertest
· Det kan gøres på et par timer
· Eller projektet kan gennemgås internt i organisationen
