PROTOTYPING &
INTERACTION DESIGN
van idee naar testbaar concept
LUC MOERS
Even voorstellen…
WAT GAAN WE DOEN
•

Introductie User Centered Design	

•

•

Een aantal UCD principes om je prototype vanuit op te bouwen	...
INTERACTION DESIGN
Wat is het eigenlijk?
INTERACTION DESIGN
Bedenken en ontwerpen van de gebruikerservaring van
interactieve producten
USER CENTERED DESIGN
Een korte introductie om jezelf op weg te helpen
UITGANGSPUNTEN
Hier hou je rekening mee met UCD
BETREK JE DOELGROEP
ken hun ervaringen door middel van interviews en tests
STEL DOELEN OP
voor jezelf en je doelgroep door middel van use cases en
scenario's
HOU REKENING MET DE
OMGEVING
waar en wanneer gebruikt je doelgroep het product?
DENK VANUIT PROCESSEN
Hoe kan ik een taak logisch en eenvoudig voltooien
ZINVOLLE INFORMATIE
Welke informatie verwacht de eindgebruiker en wat heb ik
nodig (maak een mindmap)
WEES EMPATISCH
Wat wil je dat mensen voelen als ze je product gebruiken?
MAAK EEN PROTOTYPE
Test of het product echt werkt
PROTOTYPING
Je product voor het eerst gebruiken
WELKE MANIEREN ZIJN ER
WELKE MANIEREN ZIJN ER
•

Paper prototyping	


•

Prototyping software op computer	


•

Frameworks (zoals Twitter Bootstr...
WAT HEB JE NODIG?
•

potlood en papier	


•

een computer	


•

Mindmapping tool (handig)	


•

Word	


•

Axure 7.0	


•
...
AXURE PRO
Prototyping tool voor Mac en Windows te downloaden
op www.axure.com
WAT IS AXURE?
•

Rapid Prototyping tool sinds 2006	


•

Geschikt voor Mac en PC	


•

Voor mobile apps, web applicaties, ...
HOE WERKT AXURE
Gids met belangrijke features (Start Axure AUB op)
1

SITEMAP
De onderdelen van Axure
SITEMAP
De verschillende pagina’s en
processen in je applicatie of
site uitgetekend.
FLOWCHARTS
Maak diagrammen om structuur te verduidelijken
2

WIDGETS
De onderdelen van Axure
WIDGETS
Standaard (web) elementen
om een pagina op te bouwen. 

Selecteer bibliotheken voor
widget sets.
3

DE ONDERDELEN VAN AXURE
Masters
MASTERS
Maak een functionaliteit wat je
meerdere keren kunt
gebruiken en in 1 keer op alle
pagina’s kunt veranderen!
4

4

DE ONDERDELEN VAN AXURE
Page en widget interactions
INTERACTIONS
Maak je prototype interactief, bouw geavanceerd gedrag
zelfs met de mogelijkheid om variabelen te gebruiken.
5

DE ONDERDELEN VAN AXURE
Dynamic panels en widget manager
DYNAMIC
PANELS
Paneel dat bestaat uit 1 of
meerdere ‘lagen’ die op
interactions kunnen reageren
en zichtbaar of onzichtbaa...
6

DE ONDERDELEN VAN AXURE
Adaptive views voor meerdere schermformaten
ADAPTIVE
VIEWS
Je prototype op verschillende
schermformaten, voor de
gevorderde gebruiker.
7

DE ONDERDELEN VAN AXURE
Styling elementen kleur en zelfs webfonts
STYLESHEET
Kleed je prototype aan met
een look and feel.
DE ONDERDELEN VAN AXURE
Deel je prototype
DEEL JE PROTOTYPE
Lokaal als HTML genereren en openen in je browser
DEEL JE PROTOTYPE
Online via share.axure.com met gratis account
EN NU BOUWEN
Werk een of meerdere schermen uit met interacties.	

Presenteer je demo.
PRESENTATIES
Wie durft?
VRAGEN
Luc Moers	

l.moers@drecomm.nl
Presentatie Prototyping
Presentatie Prototyping
Upcoming SlideShare
Loading in …5
×

Presentatie Prototyping

809 views

Published on

Presentatie van Luc Moers tijdens de masterclass Prototyping van start-up competitie The Challenge.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
809
On SlideShare
0
From Embeds
0
Number of Embeds
246
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Presentatie Prototyping

  1. 1. PROTOTYPING & INTERACTION DESIGN van idee naar testbaar concept
  2. 2. LUC MOERS Even voorstellen…
  3. 3. WAT GAAN WE DOEN • Introductie User Centered Design • • Een aantal UCD principes om je prototype vanuit op te bouwen Introductie prototyping • • • Onderdelen in Axure Prototype maken met Axure Presenteer je prototype • Eventueel doornemen hoe je user testing kan doen
  4. 4. INTERACTION DESIGN Wat is het eigenlijk?
  5. 5. INTERACTION DESIGN Bedenken en ontwerpen van de gebruikerservaring van interactieve producten
  6. 6. USER CENTERED DESIGN Een korte introductie om jezelf op weg te helpen
  7. 7. UITGANGSPUNTEN Hier hou je rekening mee met UCD
  8. 8. BETREK JE DOELGROEP ken hun ervaringen door middel van interviews en tests
  9. 9. STEL DOELEN OP voor jezelf en je doelgroep door middel van use cases en scenario's
  10. 10. HOU REKENING MET DE OMGEVING waar en wanneer gebruikt je doelgroep het product?
  11. 11. DENK VANUIT PROCESSEN Hoe kan ik een taak logisch en eenvoudig voltooien
  12. 12. ZINVOLLE INFORMATIE Welke informatie verwacht de eindgebruiker en wat heb ik nodig (maak een mindmap)
  13. 13. WEES EMPATISCH Wat wil je dat mensen voelen als ze je product gebruiken?
  14. 14. MAAK EEN PROTOTYPE Test of het product echt werkt
  15. 15. PROTOTYPING Je product voor het eerst gebruiken
  16. 16. WELKE MANIEREN ZIJN ER
  17. 17. WELKE MANIEREN ZIJN ER • Paper prototyping • Prototyping software op computer • Frameworks (zoals Twitter Bootstrap)
  18. 18. WAT HEB JE NODIG? • potlood en papier • een computer • Mindmapping tool (handig) • Word • Axure 7.0 • Axshare account
  19. 19. AXURE PRO Prototyping tool voor Mac en Windows te downloaden op www.axure.com
  20. 20. WAT IS AXURE? • Rapid Prototyping tool sinds 2006 • Geschikt voor Mac en PC • Voor mobile apps, web applicaties, software • Tutorials en met bibliotheken • Toegankelijk voor beginners, krachtig voor gevorderden • Bekijk en test je prototype in je browser of deel het op AxShare
  21. 21. HOE WERKT AXURE Gids met belangrijke features (Start Axure AUB op)
  22. 22. 1 SITEMAP De onderdelen van Axure
  23. 23. SITEMAP De verschillende pagina’s en processen in je applicatie of site uitgetekend.
  24. 24. FLOWCHARTS Maak diagrammen om structuur te verduidelijken
  25. 25. 2 WIDGETS De onderdelen van Axure
  26. 26. WIDGETS Standaard (web) elementen om een pagina op te bouwen. 
 Selecteer bibliotheken voor widget sets.
  27. 27. 3 DE ONDERDELEN VAN AXURE Masters
  28. 28. MASTERS Maak een functionaliteit wat je meerdere keren kunt gebruiken en in 1 keer op alle pagina’s kunt veranderen!
  29. 29. 4 4 DE ONDERDELEN VAN AXURE Page en widget interactions
  30. 30. INTERACTIONS Maak je prototype interactief, bouw geavanceerd gedrag zelfs met de mogelijkheid om variabelen te gebruiken.
  31. 31. 5 DE ONDERDELEN VAN AXURE Dynamic panels en widget manager
  32. 32. DYNAMIC PANELS Paneel dat bestaat uit 1 of meerdere ‘lagen’ die op interactions kunnen reageren en zichtbaar of onzichtbaar zijn.
  33. 33. 6 DE ONDERDELEN VAN AXURE Adaptive views voor meerdere schermformaten
  34. 34. ADAPTIVE VIEWS Je prototype op verschillende schermformaten, voor de gevorderde gebruiker.
  35. 35. 7 DE ONDERDELEN VAN AXURE Styling elementen kleur en zelfs webfonts
  36. 36. STYLESHEET Kleed je prototype aan met een look and feel.
  37. 37. DE ONDERDELEN VAN AXURE Deel je prototype
  38. 38. DEEL JE PROTOTYPE Lokaal als HTML genereren en openen in je browser
  39. 39. DEEL JE PROTOTYPE Online via share.axure.com met gratis account
  40. 40. EN NU BOUWEN Werk een of meerdere schermen uit met interacties. Presenteer je demo.
  41. 41. PRESENTATIES Wie durft?
  42. 42. VRAGEN Luc Moers l.moers@drecomm.nl

×