Wireframes and Interaction Design Documents

[object Object],that is NOT a wireframe What the &%$! is an IDD? Wireframes and Interaction Design Documents

part 1 Wireframes and Interaction Design Documents

wireframes? Wireframes and Interaction Design Documents

Wireframes and Interaction Design Documents These are NOT good wireframes

Not everyone knows exactly what they are doing Wireframes and Interaction Design Documents

wireframes? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Wireframes and Interaction Design Documents ,[object Object],[object Object],[object Object]

types of wireframes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Wireframes and Interaction Design Documents

Wireframes and Interaction Design Documents

DESIGN TIMELINE Wireframes and Interaction Design Documents

[object Object],Wireframes and Interaction Design Documents “ Real world” you you you friend (maybe) you not you not you you not you not you

goals of wireframes ,[object Object],[object Object],[object Object],Wireframes and Interaction Design Documents

goals of wireframes ,[object Object],[object Object],Wireframes and Interaction Design Documents

basic requirements ,[object Object],[object Object],[object Object],[object Object],Wireframes and Interaction Design Documents Adobe.com Homepage – Not logged in P02

part 2 Wireframes and Interaction Design Documents

Interaction design documents Wireframes and Interaction Design Documents Interaction Design Documents

what are they? Wireframes and Interaction Design Documents A document containing a collection of high fidelity wireframes describing the content , behavior , and interaction / scenarios of an interface.

[object Object],[object Object],[object Object],[object Object],[object Object],ingredients Wireframes and Interaction Design Documents Cover page Table of Contents Descriptions & Scenarios Adobe.com Homepage – Not logged in P02

components / elements? Wireframes and Interaction Design Documents

[object Object],[object Object],‘ wireflows’ Wireframes and Interaction Design Documents

[object Object],[object Object],[object Object],[object Object],use realistic text, don’t: Wireframes and Interaction Design Documents

[object Object],[object Object],[object Object],[object Object],forget visual design Wireframes and Interaction Design Documents focus on how the interface works!

[object Object],scale / proportion Wireframes and Interaction Design Documents

[object Object],[object Object],[object Object],don’t reinvent the wheel Wireframes and Interaction Design Documents

[object Object],[object Object],[object Object],Design Patterns (cont) Wireframes and Interaction Design Documents

[object Object],[object Object],rich internet applications (RIA) Wireframes and Interaction Design Documents ? Adobe.com Homepage – Not logged in P02

[object Object],[object Object],[object Object],dynamics in static wireframes Wireframes and Interaction Design Documents

Wireframes and Interaction Design Documents Frame-by-frame

Wireframes and Interaction Design Documents Lo-fi animation http://developer.yahoo.com/ypatterns/pattern.php?pattern=carousel

Wireframes and Interaction Design Documents Wireframes with keyframes

[object Object],[object Object],[object Object],‘ 3 keys to success’ Wireframes and Interaction Design Documents

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],what software? Wireframes and Interaction Design Documents

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],indesign Wireframes and Interaction Design Documents

resources (online) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Wireframes and Interaction Design Documents

resources (offline) ,[object Object],[object Object],[object Object],[object Object],Wireframes and Interaction Design Documents

Assignment (groups of 3-4 people) ,[object Object],[object Object],[object Object],[object Object],Drag & drop collapse Navigation tabs

Wireframes and Interaction Design Documents

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Wireframes and Interaction Design Documents

Similar to Wireframes and Interaction Design Documents (20)

More from piksels

More from piksels (6)

Recently uploaded

Recently uploaded (20)

Wireframes and Interaction Design Documents

Editor's Notes