Webinar slides

1. Datum: 3 maart 2016 Spreker: Marnix Bras
Webinar Rapid Prototyping

2. Inhoudsopgave
Is design een truc?
What is… What if… What wows… What works !
Prototyping tools
Samenvatting
Vragen en meer informatie
Evaluatie

3. Marnix Bras
uitvinder
architectuur
design
user experience

4. Is design een truc

5. Is design een truc

6. User Experience design
Hier gaat design thinking over in het
verzinnen van de oplossing
• onderzoek
• brainstorm
• schetsen
• storyboard
• persona’s (doelgroep)
• draadmodellen
• usability testen

7. Design is een methode
Geen black magic
Maar eenvoudige
stappen

8. Ontwar de knoop
What is
> Research
What if
> Concepting
What wows
> Prototyping
What works
> testing

9. What is
Elke goede website of app begint met
een research:
• wat is het probleem dat ik wil
oplossen?
• wat is de ervaring die de bezoeker
met krijgen
• is er data?
• observeer en beschrijf
• verzamel gerelateerde ideeën
• bepaal je publiek

10. What if
Verbeelding leidt tot concepten
• Brainstormen
• Schetsen
• Wireframing

11. Brainstorm
Brainstorms
• elk goed idee krijgt ruimte door
eerst 9 andere toe te laten
• visualiseer
• associeer
• http://personalexcellence.co/blog/br
ainstorming-techniques/

12. Lotus Blossom
Meer tips o.a. op :
• http://personalexcellence.co/blog/brainstorming-techniques/

13. Schetsen
Verbeeld ideeën
• gebruik geen gum
• gebruik lekker stevige lijnen
• gebruik slechts enkele kleuren
• maak meerdere varianten

14. Schetsen
Gebruik mock-ups als kader
• Maar laat je niet inkaderen
• Maak ook schetsen van de app of
website in gebruik

15. Wireframing
Draadmodellen
• pen en papier
• paper prototyping
• low-fi
• uitwerking
• klikmodel

16. Wireframing (2)
Pen en papier
• van schets naar draadmodel
• gebruik templates
• pas op voor details

17. Wireframing (3)
Paper prototyping
• Knip en plak de losse design
elementen
• Schuif en animeer
• Test het op een gebruiker

18. Wireframing (4)
Low fi
• Balsamique
• Powerpoint
• Indesign

19. Wireframing (5)
Uitwerking:
• grafisch design
• “kleur” de elementen in
• let op Gestalt principes
• volg de webstandaarden (of juist
niet)
• gebruik mentale modellen

20. Wireframing (5)
Uitwerking:
• grafisch design
• “kleur” de elementen in
• let op Gestalt principes
• volg de webstandaarden (of juist
niet)
• gebruik mentale modellen

21. Wireframing (6)
Klikmodel
• interactief wireframe
• wel of geen detaillering
• tools:
• Balsamique
• Axure
• Invision
• Mockflow
• Adobe Comp
• Codepen (html)

22. What wows
Kijk naar de wow-factor
• bouwen
• aanscherpen
• evalueren

23. What works
Verbeelding leidt tot concepten
• experimenteren
• testen
• implementeren

24. What works (2)
Implementeren
• AB test
• Pilot

25. Tools
Wireframing
• Balsamique
• Axure
• Visio
• Omnigraffle
• Invision app
• HTML (bijv met codepen)
• Pen en papier
• http://www.creativebloq.com/wirefra
mes/top-wireframing-tools-11121302

26. Samenvatting
Is design een truc? > een methode
What is… > research, data, observatie, doelgroep
What if… > Brainstormen, Schetsen, Wireframing
What wows… > bouwen, aanscherpen, evalueren
What works ! > experimenteren, testen, implementeren
Prototyping tools > voor en nadelen

27. Vragen en meer informatie
Vragen van deelnemers
Meer informatie:
Marnix Bras
Senior User Experience Design Consultant
Capgemini Netherlands | Utrecht
www.capgemini.com/dcx
www.linkedin.com/in/marnixbras

28. Evaluatie
Dank voor deelname aan dit webinar.
Er staat in het tabblad een evaluatie voor u klaar. Wij
zouden het erg waarderen als u ons uw feedback
geeft door deze 4 korte vragen in te vullen.