High Fidelity Prototyping

IFI7156.DT Interaction Design Methods

High-fidelity prototyping

• Graphical UI prototypes

• HTML/CSS mockups

• Clickthrough prototypes

Inspiration

http://www.webdesign-inspiration.com

http://realmacsoftware.com/ember

Design patterns and guidelines

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

http://ui-patterns.com

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

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

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

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

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

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

UI frameworks

http://getbootstrap.com

http://bootstrapuikit.com

Prototyping software

http://pencil.evolus.vn

http://www.sketchapp.com

http://www.sketchappsources.com

https://www.omnigroup.com/omnigraffle

http://www.axure.com

http://www.axure.com/edu

http://www.invisionapp.com

http://invis.io/MBTARQP7

http://www.uxpin.com

https://mockup.io

Color schemes

https://www.colorschemer.com

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

Icons

http://www.flaticon.com

Placeholders

http://lipsum.com

http://placehold.it

When to use real data?

Final notes (course, grading, etc…)

Photos

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

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