wireframes?

Wireframes and Interaction Design Documents 1

wireframes? wireframes?

• Illustration of the content • Do not represent the

– Hierarchy aesthetics
– Relationships
• Do not contain graphic
• Displaying of content elements
– How it is presented
– The functionality • Do not convey the brand

• Interaction with content

Wireframes and Interaction Design Documents 2

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 3
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 4
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 5
Wireframes and Interaction Design Documents 6
DESIGN TIMELINE

Wireframes and Interaction Design Documents 7

Experience at CMD

you you you friend you

(maybe)

“Real world”

not you not you you not you not you

Wireframes and Interaction Design Documents 8

goals of wireframes

• Communicate solutions for design problems

• Communicate fundamental design choices

• Get everyone on the same page

Wireframes and Interaction Design Documents 9

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 10

basic requirements
Adobe.com Homepage – Not logged in P02
• Title + Description
• Page number
• Diagram of content
• Comments annotations

Wireframes and Interaction Design Documents 11

Wireframes and Interaction Design Documents 12
Wireframes and Interaction Design Documents 13
Wireframes and Interaction Design Documents 14
 part 2

Wireframes and Interaction Design Documents 15

Interaction design
Interaction Design documents
Documents

Wireframes and Interaction Design Documents 16

what are they?

A document containing a collection of high

fidelity wireframes describing the content,
behavior, and interaction/scenarios of an
interface.

Wireframes and Interaction Design Documents 17

ingredients

• Cover page
• Table of Contents
Adobe.com Homepage – Not logged in P02

• Descriptions
• Wireframes
• Component / Elements

Wireframes and Interaction Design Documents 18

components / elements?

Wireframes and Interaction Design Documents 19

‘wireflows’

• Describe functionality by
illustrating scenarios/flows

Wireframes and Interaction Design Documents 20

use realistic text, don’t:

• 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

Wireframes and Interaction Design Documents 21

forget visual design

• 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

Wireframes and Interaction Design Documents 22

scale / proportion

• Points and vectors may be misleading when translating to

pixels, don’t make texts too long!

Wireframes and Interaction Design Documents 23

don’t reinvent the wheel

• “re-usable solution to a commonly occurring problem”

• http://developer.yahoo.com/ypatterns/
• http://www.welie.com/
Wireframes and Interaction Design Documents 24
Design Patterns (cont)

• They are specific

• More usable and easier to understand

• It will save you time!

Wireframes and Interaction Design Documents 25

rich internet applications (RIA)

• ajax, javascript, flash, etc

• sometimes hard to illustrate in wireframes

Adobe.com Homepage – Not P02

logged in

Wireframes and Interaction Design Documents 26

dynamics in static wireframes

• Frame-by-frame
• Lo-fi Animations
• Wireframes with keyframes

Wireframes and Interaction Design Documents 27

Frame-by-frame

Wireframes and Interaction Design Documents 28

 http://developer.yahoo.com/ypatterns/pattern.php?pattern=carousel

Lo-fi animation

Wireframes and Interaction Design Documents 29

Wireframes with keyframes

Wireframes and Interaction Design Documents 30

‘3 keys to success’

• Clear enough to develop from

• Serve as a blueprint for final product
• Get everyone on same page (designer, developer, project leader, etc)

Wireframes and Interaction Design Documents 31

what software?

• Visio
• OmniGraffle
• InDesign
• Illustrator
• Fireworks
• Muse
• Adobe XD

• Software comparison:
• http://www.uxmatters.com/MT/archives/000161.php
Wireframes and Interaction Design Documents 32
indesign

• Cross-platform (Windows & OS X)

• Templates, elements, components library
• Pagination & master pages
• Good for diagrams & text
• Vectors
• Print & Screen

Wireframes and Interaction Design Documents 33

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 34

resources (offline)

• Designing for Interaction – Dan Saffer

– Chapter 5

• Communicating Design – Dan Brown

– Chapter 10

Wireframes and Interaction Design Documents 35

Assignment (groups of 3-4 people)

Navigation tabs 1. Pick a webpage which contains

several RIA elements.

Drag & 1. As a group, quickly analyze the

drop interactive elements on the
webpage. (Design patterns?)

1. Make a hi-fi wireframe of the RIA

collapse elements using any of the methods
(key-by-key, low-fi animation, or
wireframe keyframes)

Total time: 1h 15min