36
User Interface Prototyping Techniques: High Fidelity Prototyping IFI7156 Interaction Design Methods

User Interface Prototyping Techniques - High Fidelity Prototyping

Embed Size (px)

Citation preview

Page 1: User Interface Prototyping Techniques - High Fidelity Prototyping

User Interface Prototyping Techniques: High Fidelity Prototyping

IFI7156 Interaction Design Methods

Page 2: User Interface Prototyping Techniques - High Fidelity Prototyping

High-fidelity prototyping

• Graphical UI prototypes

• HTML/CSS mockups

• Clickthrough prototypes

Page 3: User Interface Prototyping Techniques - High Fidelity Prototyping

Inspiration

Page 4: User Interface Prototyping Techniques - High Fidelity Prototyping

Webdesign Inspiration

http://www.webdesign-inspiration.com

Page 5: User Interface Prototyping Techniques - High Fidelity Prototyping

Ember

http://realmacsoftware.com/ember

Page 6: User Interface Prototyping Techniques - High Fidelity Prototyping

Design patterns and guidelines

Page 7: User Interface Prototyping Techniques - High Fidelity Prototyping

Yahoo Design Pattern Library

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

Page 8: User Interface Prototyping Techniques - High Fidelity Prototyping

UI Patterns

http://ui-patterns.com

Page 9: User Interface Prototyping Techniques - High Fidelity Prototyping

Web UI Design Patterns 2014

http://www.uxpin.com/web-design-patterns.html

Page 10: User Interface Prototyping Techniques - High Fidelity Prototyping

Mobile UI Design Patterns 2014

http://www.uxpin.com/mobile-design-patterns.html

Page 11: User Interface Prototyping Techniques - High Fidelity Prototyping

iOS Human Interface Guidelines

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

Page 12: User Interface Prototyping Techniques - High Fidelity Prototyping

Android Design

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

Page 13: User Interface Prototyping Techniques - High Fidelity Prototyping

Project UI guideline documents

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

Page 14: User Interface Prototyping Techniques - High Fidelity Prototyping

UI frameworks

Page 15: User Interface Prototyping Techniques - High Fidelity Prototyping

Bootstrap

http://getbootstrap.com

Page 16: User Interface Prototyping Techniques - High Fidelity Prototyping

Foundation

http://foundation.zurb.com

Page 17: User Interface Prototyping Techniques - High Fidelity Prototyping

Prototyping software

Page 18: User Interface Prototyping Techniques - High Fidelity Prototyping

Pencil

http://pencil.evolus.vn

Page 19: User Interface Prototyping Techniques - High Fidelity Prototyping

Sketch

http://bohemiancoding.com/sketch

Page 20: User Interface Prototyping Techniques - High Fidelity Prototyping

Sketch App Sources

http://www.sketchappsources.com

Page 21: User Interface Prototyping Techniques - High Fidelity Prototyping

OmniGraffle

https://www.omnigroup.com/omnigraffle

Page 22: User Interface Prototyping Techniques - High Fidelity Prototyping

Axure

http://www.axure.com

Page 23: User Interface Prototyping Techniques - High Fidelity Prototyping

http://www.axure.com/edu

Page 24: User Interface Prototyping Techniques - High Fidelity Prototyping

InVision

http://www.invisionapp.com

Page 25: User Interface Prototyping Techniques - High Fidelity Prototyping

InVision

http://invis.io/MBTARQP7

Page 26: User Interface Prototyping Techniques - High Fidelity Prototyping

UXPin

http://www.uxpin.com

Page 27: User Interface Prototyping Techniques - High Fidelity Prototyping

Color schemes

Page 28: User Interface Prototyping Techniques - High Fidelity Prototyping

ColorSchemer Studio

https://www.colorschemer.com

Page 29: User Interface Prototyping Techniques - High Fidelity Prototyping

Adobe Color CC

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

Page 30: User Interface Prototyping Techniques - High Fidelity Prototyping

Icons

Page 31: User Interface Prototyping Techniques - High Fidelity Prototyping

flaticon

http://www.flaticon.com

Page 32: User Interface Prototyping Techniques - High Fidelity Prototyping

Placeholders

Page 33: User Interface Prototyping Techniques - High Fidelity Prototyping

Lorem Ipsum

http://lipsum.com

Page 34: User Interface Prototyping Techniques - High Fidelity Prototyping

Placehold.it

http://placehold.it

Page 35: User Interface Prototyping Techniques - High Fidelity Prototyping

Photos• meedanphotos, http://www.flickr.com/photos/meedan/4762863697/

Page 36: User Interface Prototyping Techniques - High Fidelity Prototyping

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