Peter Conradie | Joel Laumans | Hans Kemp | Rolf den Otter | Rest of the IAD Team
that is NOT
a wireframe
What the &%$! is an IDD?
1Wireframes and Interaction Design Documents
part 1
Wireframes and Interaction Design Documents 2
wireframes?
Wireframes and Interaction Design Documents 3
Wireframes and Interaction Design Documents 4
These are NOT good wireframes
Wireframes and Interaction Design Documents 5
Not everyone knows exactly what they are doing
wireframes?
Wireframes and Interaction Design Documents 6
• Illustration of the content– Hierarchy– Relationships
• Displaying of content– How it is presented– The functionality
• Interaction with content
• Do not represent the aesthetics
• Do not contain graphic elements
• Do not convey the brand
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 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
10Wireframes and Interaction Design Documents
DESIGN TIMELINE
11Wireframes and Interaction Design Documents
Experience at CMD
Wireframes and Interaction Design Documents 12
“Real world”
you you you friend(maybe)
you
not you not you you not you not you
goals of wireframes
Wireframes and Interaction Design Documents 13
• Communicate solutions for design problems
• Communicate fundamental design choices
• Get everyone on the same page
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 14
basic requirements
• Title + Description• Page number• Diagram of content• Comments annotations
Wireframes and Interaction Design Documents 15
Adobe.com Homepage – Not logged in P02
Wireframes and Interaction Design Documents 16
Wireframes and Interaction Design Documents 17
Wireframes and Interaction Design Documents 18
part 2
Wireframes and Interaction Design Documents 19
Wireframes and Interaction Design Documents 20
Interaction design documentsInteraction Design Documents
what are they?
Wireframes and Interaction Design Documents 21
A document containing a collection of high fidelity wireframes describing the content, behavior, and interaction/scenarios of an interface.
• Cover page• Table of Contents• Descriptions• Wireframes• Component / Elements
ingredients
Wireframes and Interaction Design Documents 22
Cover pageCover page
Table of ContentsTable of Contents
Descriptions & ScenariosDescriptions & ScenariosAdobe.com Homepage – Not logged in P02
Wireframes and Interaction Design Documents 23
components / elements?
• Describe functionality byillustrating scenarios/flows
‘wireflows’
Wireframes and Interaction Design Documents 24
• Lorem ipsum dolor sit atem…
• Text goes here. Text goes here. Text goes here. Text goes here. Text goes here.
• http://www.google.comhttp://www.google.com http://www.google.com http://www.google.com
use realistic text, don’t:
Wireframes and Interaction Design Documents 25
• 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 26
focus on how the
interface works!focus on how the
interface works!
• Points and vectors may be misleading when translating to pixels, don’t make texts too long!
scale / proportion
Wireframes and Interaction Design Documents 27
• “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 28
• They are specific
• More usable and easier to understand
• It will save you time!
Design Patterns (cont)
Wireframes and Interaction Design Documents 29
• ajax, javascript, flash, etc
• sometimes hard to illustrate in wireframes
rich internet applications (RIA)
Wireframes and Interaction Design Documents 30
Adobe.com Homepage – Not logged in
P02
?
• Frame-by-frame• Lo-fi Animations• Wireframes with keyframes
dynamics in static wireframes
Wireframes and Interaction Design Documents 31
Wireframes and Interaction Design Documents 32
Frame-by-frame
Wireframes and Interaction Design Documents 33
Lo-fi animation
http://developer.yahoo.com/ypatterns/pattern.php?pattern=carousel
Wireframes and Interaction Design Documents 34
Wireframes with keyframes
• 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 35
• Visio• OmniGraffle• InDesign• Illustrator• Fireworks• Powerpoint
• Software comparison:• http://www.uxmatters.com/MT/archives/
000161.php
what software?
Wireframes and Interaction Design Documents 36
• 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 37
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 38
resources (offline)
• Designing for Interaction – Dan Saffer– Chapter 5
• Communicating Design – Dan Brown– Chapter 10
Wireframes and Interaction Design Documents 39
Assignment (groups of 3-4 people)
1. Pick a webpage which contains several RIA elements.
1. As a group, quickly analyze the interactive elements on the webpage. (Design patterns?)
1. 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
Top Related