Lecture slides in IFI7156.DT Interaction Design Methods course, 31 March 2016, Tallinn University.

1. High Fidelity
Prototyping
IFI7156.DT Interaction Design Methods

2. High-fidelity prototyping
• Graphical UI prototypes
• HTML/CSS mockups
• Clickthrough prototypes

3. Inspiration

4. http://www.webdesign-inspiration.com

5. http://realmacsoftware.com/ember

6. Design patterns and guidelines

7. https://developer.yahoo.com/ypatterns/

8. http://ui-patterns.com

9. https://studio.uxpin.com/ebooks/web-ui-design-patterns-2016-volume-1/

10. https://studio.uxpin.com/ebooks/web-ui-design-patterns-2016-volume-2/

11. https://studio.uxpin.com/ebooks/mobile-design-patterns/

12. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

13. http://developer.android.com/design/

14. http://trac.htk.tlu.ee/iva2/wiki/InterfaceGuidelines

15. UI frameworks

16. http://getbootstrap.com

17. http://bootstrapuikit.com

18. Prototyping software

19. http://pencil.evolus.vn

20. http://www.sketchapp.com

21. http://www.sketchappsources.com

22. https://www.omnigroup.com/omnigraffle

23. http://www.axure.com

24. http://www.axure.com/edu

25. http://www.invisionapp.com

26. http://invis.io/MBTARQP7

27. http://www.uxpin.com

28. https://mockup.io

29. Color schemes

30. https://www.colorschemer.com

31. https://color.adobe.com/create/color-wheel/

32. Icons

33. http://www.flaticon.com

34. Placeholders

35. http://lipsum.com

36. http://placehold.it

37. When to use real data?

38. Final notes (course, grading, etc…)

40. Photos
• MagneziUm Design Studio Belgrade, https://www.flickr.com/photos/
131988821@N04/20494586089/

41. This work is licensed under the Creative Commons Attribution-ShareAlike 4.0
International License. To view a copy of this license, visit
http://creativecommons.org/licenses/by-sa/4.0/
Hans Põldoja
hans.poldoja@tlu.ee
Interaction Design Methods
http://ifi7156.wordpress.com
Tallinn University
School of Digital Technologies