<ul><li>Peter Conradie  |  Joel Laumans  | Hans Kemp  |  Rolf den Otter  |  Rest of the IAD Team </li></ul>that is  NOT a ...
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? <ul><li>Illustration of the content </li></ul><ul><ul><li>Hierarchy </li></ul></ul><ul><ul><li>Relationships <...
types of wireframes <ul><li>Sketches </li></ul><ul><ul><li>Quick, experimental </li></ul></ul><ul><ul><li>Good for feedbac...
types of wireframes <ul><li>Sketches </li></ul><ul><ul><li>Quick, experimental </li></ul></ul><ul><ul><li>Good for feedbac...
types of wireframes <ul><li>Sketches </li></ul><ul><ul><li>Quick, experimental </li></ul></ul><ul><ul><li>Good for feedbac...
Wireframes and Interaction Design Documents
DESIGN TIMELINE Wireframes and Interaction Design Documents
<ul><li>Experience at CMD </li></ul>Wireframes and Interaction Design Documents “ Real world” you you you friend (maybe) y...
goals of wireframes <ul><li>Communicate solutions for design problems </li></ul><ul><li>Communicate fundamental design cho...
goals of wireframes <ul><li>Different wireframes for different goals:  Flows, user testing, content overview, etc </li></u...
basic requirements <ul><li>Title + Description </li></ul><ul><li>Page number </li></ul><ul><li>Diagram of content </li></u...
Wireframes and Interaction Design Documents
Wireframes and Interaction Design Documents
Wireframes and Interaction Design Documents
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  wirefra...
<ul><li>Cover page </li></ul><ul><li>Table of Contents </li></ul><ul><li>Descriptions </li></ul><ul><li>Wireframes </li></...
components / elements? Wireframes and Interaction Design Documents
<ul><li>Describe functionality by </li></ul><ul><li>illustrating scenarios/flows </li></ul>‘ wireflows’ Wireframes and Int...
<ul><li>Lorem ipsum dolor sit atem… </li></ul><ul><li>Text goes here. Text goes here. Text goes here. Text goes here. Text...
<ul><li>Forget color! </li></ul><ul><li>( Unless of course it is essential to the user experience) </li></ul><ul><li>Try a...
<ul><li>Points and vectors may be misleading when translating to pixels, don’t make texts too long! </li></ul>scale / prop...
<ul><li>“ re-usable  solution to a commonly occurring problem” </li></ul><ul><li>http://developer.yahoo.com/ypatterns/ </l...
<ul><li>They are specific </li></ul><ul><li>More usable and easier to understand </li></ul><ul><li>It will save you time! ...
<ul><li>ajax, javascript, flash, etc </li></ul><ul><li>sometimes hard to illustrate in wireframes  </li></ul>rich internet...
<ul><li>Frame-by-frame </li></ul><ul><li>Lo-fi Animations </li></ul><ul><li>Wireframes with keyframes </li></ul>dynamics i...
Wireframes and Interaction Design Documents Frame-by-frame
Wireframes and Interaction Design Documents Lo-fi animation http://developer.yahoo.com/ypatterns/pattern.php?pattern=carou...
Wireframes and Interaction Design Documents Wireframes with keyframes
<ul><li>Clear enough to develop from </li></ul><ul><li>Serve as a blueprint for final product </li></ul><ul><li>Get everyo...
<ul><li>Visio </li></ul><ul><li>OmniGraffle </li></ul><ul><li>InDesign </li></ul><ul><li>Illustrator </li></ul><ul><li>Fir...
<ul><li>Cross-platform (Windows & OS X) </li></ul><ul><li>Templates, elements, components library </li></ul><ul><li>Pagina...
resources (online) <ul><li>http://userpathways.com/2008/06/26/the-what-when-and-why-of-wireframes/ </li></ul><ul><li>http:...
resources (offline) <ul><li>Designing for Interaction – Dan Saffer </li></ul><ul><ul><li>Chapter 5 </li></ul></ul><ul><li>...
Assignment (groups of 3-4 people) <ul><li>Pick a webpage which contains several RIA elements. </li></ul><ul><li>As a group...
Upcoming SlideShare
Loading in...5
×

Wireframes and Interaction Design Documents

38,017

Published on

Published in: Technology, Business
2 Comments
138 Likes
Statistics
Notes
No Downloads
Views
Total Views
38,017
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
1,614
Comments
2
Likes
138
Embeds 0
No embeds

No notes for slide
  • Welcome / Introduction Why this workshop? Pilot for 2 nd years adsf
  • Wireframes and Interaction Design Documents

    1. 1. <ul><li>Peter Conradie | Joel Laumans | Hans Kemp | Rolf den Otter | Rest of the IAD Team </li></ul>that is NOT a wireframe What the &%$! is an IDD? Wireframes and Interaction Design Documents
    2. 2. part 1 Wireframes and Interaction Design Documents
    3. 3. wireframes? Wireframes and Interaction Design Documents
    4. 4. Wireframes and Interaction Design Documents These are NOT good wireframes
    5. 5. Not everyone knows exactly what they are doing Wireframes and Interaction Design Documents
    6. 6. wireframes? <ul><li>Illustration of the content </li></ul><ul><ul><li>Hierarchy </li></ul></ul><ul><ul><li>Relationships </li></ul></ul><ul><li>Displaying of content </li></ul><ul><ul><li>How it is presented </li></ul></ul><ul><ul><li>The functionality </li></ul></ul><ul><li>Interaction with content </li></ul>Wireframes and Interaction Design Documents <ul><li>Do not represent the aesthetics </li></ul><ul><li>Do not contain graphic elements </li></ul><ul><li>Do not convey the brand </li></ul>
    7. 7. types of wireframes <ul><li>Sketches </li></ul><ul><ul><li>Quick, experimental </li></ul></ul><ul><ul><li>Good for feedback </li></ul></ul><ul><li>Content only (lo fi) </li></ul><ul><ul><li>Block diagrams </li></ul></ul><ul><ul><li>Good for flows </li></ul></ul><ul><li>High fidelity wireframes </li></ul><ul><ul><li>Detailed wireframes </li></ul></ul><ul><ul><li>Comments / Annotations </li></ul></ul><ul><ul><li>Describe content & behavior </li></ul></ul><ul><ul><li>Describe function (for dev) </li></ul></ul><ul><ul><li>Understood without explanation </li></ul></ul>Wireframes and Interaction Design Documents
    8. 8. types of wireframes <ul><li>Sketches </li></ul><ul><ul><li>Quick, experimental </li></ul></ul><ul><ul><li>Good for feedback </li></ul></ul><ul><li>Content only (lo fi) </li></ul><ul><ul><li>Block diagrams </li></ul></ul><ul><ul><li>Good for flows </li></ul></ul><ul><li>High fidelity wireframes </li></ul><ul><ul><li>Detailed wireframes </li></ul></ul><ul><ul><li>Comments / Annotations </li></ul></ul><ul><ul><li>Describe content & behavior </li></ul></ul><ul><ul><li>Describe function (for dev) </li></ul></ul><ul><ul><li>Understood without explanation </li></ul></ul>Wireframes and Interaction Design Documents
    9. 9. types of wireframes <ul><li>Sketches </li></ul><ul><ul><li>Quick, experimental </li></ul></ul><ul><ul><li>Good for feedback </li></ul></ul><ul><li>Content only (lo fi) </li></ul><ul><ul><li>Block diagrams </li></ul></ul><ul><ul><li>Good for flows </li></ul></ul><ul><li>High fidelity wireframes </li></ul><ul><ul><li>Detailed wireframes </li></ul></ul><ul><ul><li>Comments / Annotations </li></ul></ul><ul><ul><li>Describe content & behavior </li></ul></ul><ul><ul><li>Describe function (for dev) </li></ul></ul><ul><ul><li>Understood without explanation </li></ul></ul>Wireframes and Interaction Design Documents
    10. 10. Wireframes and Interaction Design Documents
    11. 11. DESIGN TIMELINE Wireframes and Interaction Design Documents
    12. 12. <ul><li>Experience at CMD </li></ul>Wireframes and Interaction Design Documents “ Real world” you you you friend (maybe) you not you not you you not you not you
    13. 13. goals of wireframes <ul><li>Communicate solutions for design problems </li></ul><ul><li>Communicate fundamental design choices </li></ul><ul><li>Get everyone on the same page </li></ul>Wireframes and Interaction Design Documents
    14. 14. goals of wireframes <ul><li>Different wireframes for different goals: Flows, user testing, content overview, etc </li></ul><ul><li>Stick to the goal in mind! </li></ul>Wireframes and Interaction Design Documents
    15. 15. basic requirements <ul><li>Title + Description </li></ul><ul><li>Page number </li></ul><ul><li>Diagram of content </li></ul><ul><li>Comments annotations </li></ul>Wireframes and Interaction Design Documents Adobe.com Homepage – Not logged in P02
    16. 16. Wireframes and Interaction Design Documents
    17. 17. Wireframes and Interaction Design Documents
    18. 18. Wireframes and Interaction Design Documents
    19. 19. part 2 Wireframes and Interaction Design Documents
    20. 20. Interaction design documents Wireframes and Interaction Design Documents Interaction Design Documents
    21. 21. 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.
    22. 22. <ul><li>Cover page </li></ul><ul><li>Table of Contents </li></ul><ul><li>Descriptions </li></ul><ul><li>Wireframes </li></ul><ul><li>Component / Elements </li></ul>ingredients Wireframes and Interaction Design Documents Cover page Table of Contents Descriptions & Scenarios Adobe.com Homepage – Not logged in P02
    23. 23. components / elements? Wireframes and Interaction Design Documents
    24. 24. <ul><li>Describe functionality by </li></ul><ul><li>illustrating scenarios/flows </li></ul>‘ wireflows’ Wireframes and Interaction Design Documents
    25. 25. <ul><li>Lorem ipsum dolor sit atem… </li></ul><ul><li>Text goes here. Text goes here. Text goes here. Text goes here. Text goes here. </li></ul><ul><li>http://www.google.com </li></ul><ul><li>http://www.google.com http://www.google.com http://www.google.com </li></ul>use realistic text, don’t: Wireframes and Interaction Design Documents
    26. 26. <ul><li>Forget color! </li></ul><ul><li>( Unless of course it is essential to the user experience) </li></ul><ul><li>Try and keep to the basics - ‘boxes and arrows’ </li></ul><ul><li>No rounded corners, drop shadows, images, etc </li></ul>forget visual design Wireframes and Interaction Design Documents focus on how the interface works!
    27. 27. <ul><li>Points and vectors may be misleading when translating to pixels, don’t make texts too long! </li></ul>scale / proportion Wireframes and Interaction Design Documents
    28. 28. <ul><li>“ re-usable solution to a commonly occurring problem” </li></ul><ul><li>http://developer.yahoo.com/ypatterns/ </li></ul><ul><li>http://www.welie.com/ </li></ul>don’t reinvent the wheel Wireframes and Interaction Design Documents
    29. 29. <ul><li>They are specific </li></ul><ul><li>More usable and easier to understand </li></ul><ul><li>It will save you time! </li></ul>Design Patterns (cont) Wireframes and Interaction Design Documents
    30. 30. <ul><li>ajax, javascript, flash, etc </li></ul><ul><li>sometimes hard to illustrate in wireframes </li></ul>rich internet applications (RIA) Wireframes and Interaction Design Documents ? Adobe.com Homepage – Not logged in P02
    31. 31. <ul><li>Frame-by-frame </li></ul><ul><li>Lo-fi Animations </li></ul><ul><li>Wireframes with keyframes </li></ul>dynamics in static wireframes Wireframes and Interaction Design Documents
    32. 32. Wireframes and Interaction Design Documents Frame-by-frame
    33. 33. Wireframes and Interaction Design Documents Lo-fi animation http://developer.yahoo.com/ypatterns/pattern.php?pattern=carousel
    34. 34. Wireframes and Interaction Design Documents Wireframes with keyframes
    35. 35. <ul><li>Clear enough to develop from </li></ul><ul><li>Serve as a blueprint for final product </li></ul><ul><li>Get everyone on same page (designer, developer, project leader, etc) </li></ul>‘ 3 keys to success’ Wireframes and Interaction Design Documents
    36. 36. <ul><li>Visio </li></ul><ul><li>OmniGraffle </li></ul><ul><li>InDesign </li></ul><ul><li>Illustrator </li></ul><ul><li>Fireworks </li></ul><ul><li>Powerpoint </li></ul><ul><li>Software comparison: </li></ul><ul><li>http://www.uxmatters.com/MT/archives/000161.php </li></ul>what software? Wireframes and Interaction Design Documents
    37. 37. <ul><li>Cross-platform (Windows & OS X) </li></ul><ul><li>Templates, elements, components library </li></ul><ul><li>Pagination & master pages </li></ul><ul><li>Good for diagrams & text </li></ul><ul><li>Vectors </li></ul><ul><li>Print & Screen </li></ul>indesign Wireframes and Interaction Design Documents
    38. 38. resources (online) <ul><li>http://userpathways.com/2008/06/26/the-what-when-and-why-of-wireframes/ </li></ul><ul><li>http://www.strangesystems.net/archives/2005/03/using_wireframe.php#2 </li></ul><ul><li>http://developer.yahoo.com/ypatterns/ </li></ul><ul><li>http://www.slideshare.net/hanskemp/iad2-q3-hoorcollege2-446318/ </li></ul><ul><li>http://www.time-tripper.com/uipatterns/Introduction </li></ul><ul><li>http://project.cmd.hro.nl/cmi/hci/toolkit/ </li></ul>Wireframes and Interaction Design Documents
    39. 39. resources (offline) <ul><li>Designing for Interaction – Dan Saffer </li></ul><ul><ul><li>Chapter 5 </li></ul></ul><ul><li>Communicating Design – Dan Brown </li></ul><ul><ul><li>Chapter 10 </li></ul></ul>Wireframes and Interaction Design Documents
    40. 40. Assignment (groups of 3-4 people) <ul><li>Pick a webpage which contains several RIA elements. </li></ul><ul><li>As a group, quickly analyze the interactive elements on the webpage. (Design patterns?) </li></ul><ul><li>Make a hi-fi wireframe of the RIA elements using any of the methods (key-by-key, low-fi animation, or wireframe keyframes) </li></ul><ul><li>Total time: 1h 15min </li></ul>Drag & drop collapse Navigation tabs
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×