IFI7313.DT Interaction Design Methods course in Tallinn University, 5 April 2019

1. High-Fidelity
Prototyping
IFI7313.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://www.littlehj.com/mac/

6. Design patterns and guidelines

7. http://ui-patterns.com

8. https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

9. http://web.archive.org/web/20130615072349/http://trac.htk.tlu.ee/iva2/wiki/InterfaceGuidelines

10. UI frameworks

11. http://getbootstrap.com

12. https://getbootstrap.com/docs/4.0/examples/

13. Prototyping software

14. https://www.adobe.com/products/xd.html

15. https://www.adobe.com/products/xd/resources.html

16. https://www.sketch.com

17. http://www.sketchappsources.com

18. http://www.axure.com

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

20. https://axemplate.com/freebies/

21. https://share.axure.com

22. http://www.invisionapp.com

23. http://invis.io/MBTARQP7

24. https://www.figma.com

25. https://www.figma.com/pricing/

27. https://proto.io

28. First recommendations
• Collaborative design: Figma
• Vanessa’s recommendation: proto.io
• Single UI designer: Adobe XD

29. Color schemes

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

31. https://coolors.co

32. Icons

33. http://www.flaticon.com

34. Placeholders

35. http://lipsum.com

36. https://placeholder.com

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

38. 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
https://ifi7313.wordpress.com
Tallinn University
School of Digital Technologies