Wireframes and Interaction Design Documents
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Wireframes and Interaction Design Documents

on

  • 40,548 views

 

Statistics

Views

Total Views
40,548
Views on SlideShare
38,931
Embed Views
1,617

Actions

Likes
127
Downloads
1,530
Comments
2

27 Embeds 1,617

http://patrickcolli.wordpress.com 770
http://vakgroep.cmd.hro.nl 153
http://katychuang.tumblr.com 137
http://www.slideshare.net 101
http://ramirezdaniel11.blogspot.com 99
http://shaydu.wordpress.com 68
http://docent.cmd.hro.nl 64
http://www.uxabilidad.com 64
url_unknown 35
http://paper.li 31
http://mysites.mbs.edu 23
http://www.macromedios.net 21
http://storify.com 19
https://blackboard.madisoncollege.edu 6
http://www.vakgroep.cmd.hro.nl 5
http://us-w1.rockmelt.com 3
http://context.katychuang.com 3
https://twitter.com 3
http://stud.cmd.hro.nl 2
http://doc.futurevox.com 2
http://twitter.com 2
http://a0.twimg.com 1
http://student.cmd.hro.nl 1
http://safe.txmblr.com 1
http://safe.tumblr.com 1
http://www.health.medicbd.com 1
http://www.uxgeek.co 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Congrat for this presentation. Great contribution.
    Are you sure you want to
    Your message goes here
    Processing…
  • Bonne présentation montrant différents types de wireframes et un schéma intéressant récapitulant la démarche de conception
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Welcome / Introduction Why this workshop? Pilot for 2 nd years adsf

Wireframes and Interaction Design Documents Presentation Transcript

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