User Interface Prototyping Techniques: High Fidelity Prototyping
IFI7156 Interaction Design Methods
High-fidelity prototyping
• Graphical UI prototypes
• HTML/CSS mockups
• Clickthrough prototypes
Inspiration
Design patterns and guidelines
Yahoo Design Pattern Library
https://developer.yahoo.com/ypatterns/
Web UI Design Patterns 2014
http://www.uxpin.com/web-design-patterns.html
Mobile UI Design Patterns 2014
http://www.uxpin.com/mobile-design-patterns.html
iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
Project UI guideline documents
http://trac.htk.tlu.ee/iva2/wiki/InterfaceGuidelines
UI frameworks
Prototyping software
http://www.axure.com/edu
Color schemes
Adobe Color CC
https://color.adobe.com/create/color-wheel/
Icons
Placeholders
Photos• meedanphotos, http://www.flickr.com/photos/meedan/4762863697/
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 [email protected]
Interaction Design Methods http://ifi7156.wordpress.com
Tallinn University Institute of Informatics