Presentation I made as an introduction to wireframes for first year students of interaction design. www.twitter.com/piksels/
Text of Introduction to wireframes
Wireframes Communication & Multimedia Design Rotterdam
University of Applied Sciences Joel Laumans CMD Rotterdam |
Interaction Design - Wireframes 1
Todays agenda What are wireframes? Why use them? Examples CMD
Rotterdam | Interaction Design - Wireframes 2
A lot is happening At times the design process can seem very
complicated, a lot of things are happening at the same time. Many
people from different disciplines are all working together (and
often simultaneously) on the same project. Everyone has their own
role, and to make a truly good product, the communication between
the different parties involved has to be good. CMD Rotterdam |
Interaction Design - Wireframes 3
CMD Rotterdam | Interaction Design - Wireframes 4
Jesse James Garret | The Elements of User Experience CMD
Rotterdam | Interaction Design - Wireframes 5
Interaction design? The task of an interaction designer will be
to primarily focus on the structure and skeleton of an interface.
There are many tools that can be used in this part of the design
process, one of the most important being wireframes. Jesse James
Garret | The Elements of User Experience CMD Rotterdam |
Interaction Design - Wireframes 6
Wireframes are: A visual representation of an interface; used
to communicate the structure, content, information hierarchy,
functionality, and behavior of an interface. CMD Rotterdam |
Interaction Design - Wireframes 7
Wireframes are: A visual representation of an interface; used
to communicate the structure, content, information hierarchy,
functionality, and behavior of an interface. CMD Rotterdam |
Interaction Design - Wireframes 8
Why use wireframes? Before making the visual design, you first
make decisions about the structure, content, layout, etc.
Wireframes are a tool to communicate these ideas. Blueprint for
design Get everyone on the same page Prototype for usability tests
Easier to change a wireframe, than a design! CMD Rotterdam |
Interaction Design - Wireframes 9
Before the design... you need wireframes CMD Rotterdam |
Interaction Design - Wireframes 10
Structure How will the pieces of this site be put together?
Content What will be displayed on this site? Information Hierarchy
How is this information organized and displayed? Functionality How
will this interface work? Behavior How does it interact with the
user? How does it behave? CMD Rotterdam | Interaction Design -
Wireframes 11
Types of wireframes Sketches Quick / experiment Good for
feedback CMD Rotterdam | Interaction Design - Wireframes 13
Types of wireframes Sketches Quick / experiment Good for
feedback Lo-fidelity Block diagrams Good for testing flows CMD
Rotterdam | Interaction Design - Wireframes 14
Types of wireframes Sketches Quick / experiment Good for
feedback Lo-fi / Content only Block diagrams Good for testing flows
Hi-fidelity Detailed wireframes Including comments Describe content
& behavior Blueprint for final design Should be understood
without explanation CMD Rotterdam | Interaction Design - Wireframes
15
Wireframes do not: represent the visual design contact graphic
elements convey the brand or identity CMD Rotterdam | Interaction
Design - Wireframes 16
This is a bad wireframe! Forget visual design Avoid using color
/ gradients Adding unnecessary elements makes the wireframe less
powerful, remember: Wireframes focus only on the content and
interaction of the interface! CMD Rotterdam | Interaction Design -
Wireframes 17
Yes, but: Dont use Lorem ipsum! Be realistic as possible, think
about the content that will really be in the interface. Many
clients dont know what lorem ipsum is. Try and add content that
will best represent content that will be placed in the final
interface. Fake text can be very distracting. CMD Rotterdam |
Interaction Design - Wireframes 19
Example 1: This is an example of a hi-fidelity wireframe for an
NOS.nl concept. On the left site of the page is the wireframe. The
blue circles are numbered to refer to the comments on the right
half of the page. Note: The comments can also be placed below the
wireframe, it is up to you. CMD Rotterdam | Interaction Design -
Wireframes 20
Example 2: Instead of using dots to refer to the comments,
another option is to use arrows to link the interface elements to
the comments. CMD Rotterdam | Interaction Design - Wireframes
21
How to start? Start big! Start with the largest parts of the
interface, the frame, header, footer, etc. Then work you way
through the smaller elements of the interface. The following slides
will show a quick wireframe build-up. Final tip! Remember, your
wireframe will be used by lots of different people for different
purposes: Designers Developers Project leaders Usability testers
Clients So be as clear as you can! CMD Rotterdam | Interaction
Design - Wireframes 22
Further Reading... Recommended tools Wireframes Crossplatform
http://userpathways.com/2008/06/26/the-what-when-and- Adobe
InDesign why-of-wireframes/ How to wireframe using InDesign (PDF)
Wireframes - The how and the why
http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/
http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/
2008/12/wireframing_using_indesign.zip
2008/12/wireframes_thehowandthewhy_v10.pdf Mac OSX Designing for
Interaction by Dan Saffer Omnigraffle pgs 109 - 113 Windows About
Face 3.0 by Alan Cooper Microsoft Visio chapter 7 Other
possibilities Adobe Fireworks Axure Whichever tool you choose, look
online for some tutorials or resources to help you out! CMD
Rotterdam | Interaction Design - Wireframes 32
