user interface prototyping techniques - high fidelity prototyping

User Interface Prototyping Techniques: High Fidelity Prototyping

IFI7156 Interaction Design Methods

High-fidelity prototyping

• Graphical UI prototypes

• HTML/CSS mockups

• Clickthrough prototypes

Inspiration

Webdesign Inspiration

http://www.webdesign-inspiration.com

Ember

http://realmacsoftware.com/ember

Design patterns and guidelines

Yahoo Design Pattern Library

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

UI Patterns

http://ui-patterns.com

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/

Android Design

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

Project UI guideline documents

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

UI frameworks

Bootstrap

http://getbootstrap.com

Foundation

http://foundation.zurb.com

Prototyping software

Pencil

http://pencil.evolus.vn

Sketch

http://bohemiancoding.com/sketch

Sketch App Sources

http://www.sketchappsources.com

OmniGraffle

https://www.omnigroup.com/omnigraffle

Axure

http://www.axure.com

http://www.axure.com/edu

InVision

http://www.invisionapp.com

InVision

http://invis.io/MBTARQP7

UXPin

http://www.uxpin.com

Color schemes

ColorSchemer Studio

https://www.colorschemer.com

Adobe Color CC

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

Icons

flaticon

http://www.flaticon.com

Placeholders

Lorem Ipsum

http://lipsum.com

Placehold.it

http://placehold.it

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 hans.poldoja@tlu.ee

Interaction Design Methods http://ifi7156.wordpress.com

Tallinn University Institute of Informatics