Digital prototyping tools_leuven_3_2015
1 like826 views
Pedro Almeida discusses the creative process involving digital tools, emphasizing the importance of drafting ideas, structuring concepts, and rapid prototyping. The presentation outlines various methods and tools for information design and interaction design, highlighting collaborative scenarios and the integration of user satisfaction. Ultimately, the document stresses that tools are ineffective without innovative ideas, encouraging consideration of the tools used in the creation process.
Digital prototyping tools_leuven_3_2015
- 1. digital tools creative process pedro almeida almeida@ua.pt digital tools creative process
- 2. digital tools creative process pedro almeida almeida@ua.pt slide | 2 drafting the ideas structuring the concepts sketching the first layouts activating your layouts building a rapid prototype agenda | dt for
- 3. digital tools creative process pedro almeida almeida@ua.pt slide | 3 Right now it’s only a notion...but i think i can get money to make it into a concept... and later turn it into an idea Woody Allen First things first
- 4. digital tools creative process pedro almeida almeida@ua.pt slide | 4 that original approach the innovative interaction experience the user satisfaction What do we want to achieve?
- 5. digital tools creative process pedro almeida almeida@ua.pt slide | 5 drafting the ideas http://www.thechase360.com/en-gb/index.html The right ingredients? BULLS + CARS + 360º CAMERAS
- 6. digital tools creative process pedro almeida almeida@ua.pt slide | 6 http://idarchive.com/project/mtv-rule-switcher/ The right ingredients? YOUNG COUPLE + MOTHERINLAW+ A ROOM drafting the ideas
- 7. digital tools creative process pedro almeida almeida@ua.pt slide | 7 http://www.worldunderwater.org/#/locations drafting the ideas Environmental prevention Mashing up to be creative
- 8. digital tools creative process pedro almeida almeida@ua.pt slide | 8 http://24hoursofhappy.com/ drafting the ideas Reeinventing the timeline Simplicity and efficency
- 9. digital tools creative process pedro almeida almeida@ua.pt slide | 9 1 | drafting ideas A whiteboard A paper Ideas Concepts Mind maps brainstorming
- 10. digital tools creative process pedro almeida almeida@ua.pt slide | 10 http://www.mindmeister.com/https://bubbl.us/ mind map tools
- 11. digital tools creative process pedro almeida almeida@ua.pt slide | 11 Collaborative scenarios Distance teams Complex/extensive applications Dynamic projects when to use
- 12. digital tools creative process pedro almeida almeida@ua.pt slide | 12 2 | Information design Selecting content Identifying content structure Building your content architecture Building your interaction map brainstorming
- 13. digital tools creative process pedro almeida almeida@ua.pt slide | 13 flowcharts
- 14. digital tools creative process pedro almeida almeida@ua.pt slide | 14 Visio: multi usage scenarios; extensive libraries; interoperability www.microsoft.com/Office/visio/ flowcharts
- 15. digital tools creative process pedro almeida almeida@ua.pt slide | 15 Gliffy: (limited) free use; cloud based; collaboration features. www.gliffy.com flowcharts
- 16. digital tools creative process pedro almeida almeida@ua.pt slide | 16 For most situations To interact with compatible technologies (e.g. SQL, UML, …) For applications being developed (and growing) when to use
- 17. digital tools creative process pedro almeida almeida@ua.pt slide | 17 3 | interaction design Deciding how content will be displayed Selecting interaction patterns Sketching the first screens Building paper prototypes Building digital wireframes brainstorming
- 18. digital tools creative process pedro almeida almeida@ua.pt slide | 18 3 | interaction design brainstorming wireframesketch mock-up prototype low-fi design medium high-fi design
- 19. digital tools creative process pedro almeida almeida@ua.pt slide | 19 Balsamiq Mockups www.balsamiq.com/products/mockups wireframe/mockup tools
- 20. digital tools creative process pedro almeida almeida@ua.pt slide | 20 To send your wireframes anywhere In collaborative and distance scenarios To preview interaction and interaction problems (e.g. nr. of clicks, confusing paths, …) when to use
- 21. digital tools creative process pedro almeida almeida@ua.pt slide | 21 Hands on! 40 minutes 1. Open: https://uaveiro.mybalsamiq.com/ 2. Head to the balsamiq project you are linked to 3. Take 15 minutes to discuss with your group 3 or 4 main screen interfaces for your project 4. In pairs create a wireframe of a screen 5. Correlate the wireframes and create the hyperlinks to make it a live mockup. wireframe/mockup tools
- 22. digital tools creative process pedro almeida almeida@ua.pt
- 23. digital tools creative process pedro almeida almeida@ua.pt http://socialitv.web.ua.pt
- 24. digital tools creative process pedro almeida almeida@ua.pt slide | 25 rapid prototyping 4 | rapid prototyping Integrating interfaces Activating interaction Delivering to multiple devices Multiple options with different features
- 25. digital tools creative process pedro almeida almeida@ua.pt https://popapp.in/ rapid prototyping
- 26. digital tools creative process pedro almeida almeida@ua.pt http://www.invisionapp.com/ rapid prototyping free FOREVER! Coment and share
- 27. digital tools creative process pedro almeida almeida@ua.pt rapid prototyping
- 28. digital tools creative process pedro almeida almeida@ua.pt rapid prototyping
- 29. digital tools creative process pedro almeida almeida@ua.pt https://marvelapp.com/ rapid prototyping free to use
- 30. digital tools creative process pedro almeida almeida@ua.pt http://proto.io/ rapid prototyping 15 days free
- 31. digital tools creative process pedro almeida almeida@ua.pt http://www.fluidui.com rapid prototyping free up to 10 screens
- 32. digital tools creative process pedro almeida almeida@ua.pt rapid prototyping
- 33. digital tools creative process pedro almeida almeida@ua.pt slide | 34 For marketing (the idea) purposes For client acceptance For lab or field evaluations For investment presentations when to use
- 34. digital tools creative process pedro almeida almeida@ua.pt slide | 35 Tools are nothing without ideas Consider the pros and cons of adding an additional tool Do your best! final notes
- 35. digital tools creative process pedro almeida almeida@ua.pt final notes Thanks! And see you in 22/5? Pedro Almeida almeida@ua.pt Dep. Communication and Art University of Aveiro