Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

High-Fidelity Prototyping

45 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

High-Fidelity Prototyping

  1. 1. High-Fidelity Prototyping IFI7313.DT Interaction Design Methods
  2. 2. High-fidelity prototyping • Graphical UI prototypes • HTML/CSS mockups • Clickthrough prototypes
  3. 3. Inspiration
  4. 4. http://www.webdesign-inspiration.com
  5. 5. http://www.littlehj.com/mac/
  6. 6. Design patterns and guidelines
  7. 7. http://ui-patterns.com
  8. 8. https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
  9. 9. http://web.archive.org/web/20130615072349/http://trac.htk.tlu.ee/iva2/wiki/InterfaceGuidelines
  10. 10. UI frameworks
  11. 11. http://getbootstrap.com
  12. 12. https://getbootstrap.com/docs/4.0/examples/
  13. 13. Prototyping software
  14. 14. https://www.adobe.com/products/xd.html
  15. 15. https://www.adobe.com/products/xd/resources.html
  16. 16. https://www.sketch.com
  17. 17. http://www.sketchappsources.com
  18. 18. http://www.axure.com
  19. 19. http://www.axure.com/edu
  20. 20. https://axemplate.com/freebies/
  21. 21. https://share.axure.com
  22. 22. http://www.invisionapp.com
  23. 23. http://invis.io/MBTARQP7
  24. 24. https://www.figma.com
  25. 25. https://www.figma.com/pricing/
  26. 26. https://proto.io
  27. 27. First recommendations • Collaborative design: Figma • Vanessa’s recommendation: proto.io • Single UI designer: Adobe XD
  28. 28. Color schemes
  29. 29. https://color.adobe.com/create/color-wheel/
  30. 30. https://coolors.co
  31. 31. Icons
  32. 32. http://www.flaticon.com
  33. 33. Placeholders
  34. 34. http://lipsum.com
  35. 35. https://placeholder.com
  36. 36. Photos • MagneziUm Design Studio Belgrade, https://www.flickr.com/photos/ 131988821@N04/20494586089/
  37. 37. 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

×