Transcript

CMD Rotterdam | Interaction Design - Wireframes

Wireframes

Communication & Multimedia DesignRotterdam University of Applied Sciences

Joel Laumans

1

CMD Rotterdam | Interaction Design - Wireframes

Today’s agenda

What are wireframes?

Why use them?

Examples

2

CMD Rotterdam | Interaction Design - Wireframes

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.

3

CMD Rotterdam | Interaction Design - Wireframes

4

CMD Rotterdam | Interaction Design - Wireframes

Jesse James Garret | The Elements of User Experience

5

CMD Rotterdam | Interaction Design - Wireframes

Jesse James Garret | The Elements of User Experience

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.

6

CMD Rotterdam | Interaction Design - Wireframes

Wireframes are:

A visual representation of an interface; used to communicate the structure, content,

information hierarchy, functionality, and behavior of an interface.

7

CMD Rotterdam | Interaction Design - Wireframes

Wireframes are:

A visual representation of an interface; used to communicate the structure, content,

information hierarchy, functionality, and behavior of an interface.

8

CMD Rotterdam | Interaction Design - Wireframes

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!

9

CMD Rotterdam | Interaction Design - Wireframes

Before the design...

you need wireframes

10

CMD Rotterdam | Interaction Design - Wireframes

StructureHow will the pieces of this site be put together?

ContentWhat will be displayed on this site?

Information HierarchyHow is this information organized and displayed?

FunctionalityHow will this interface work?

BehaviorHow does it interact with the user? How does it behave?

11

CMD Rotterdam | Interaction Design - Wireframes

Types of wireframes

12

CMD Rotterdam | Interaction Design - Wireframes

Types of wireframes

SketchesQuick / experimentGood for feedback

13

CMD Rotterdam | Interaction Design - Wireframes

Types of wireframes

SketchesQuick / experimentGood for feedback

Lo-fidelityBlock diagramsGood for testing flows

14

CMD Rotterdam | Interaction Design - Wireframes

Types of wireframes

SketchesQuick / experimentGood for feedback

Lo-fi / Content onlyBlock diagramsGood for testing flows

Hi-fidelityDetailed wireframesIncluding commentsDescribe content & behavior“Blueprint for final design”Should be understood without explanation

15

CMD Rotterdam | Interaction Design - Wireframes

Wireframes do not:

represent the visual design

contact graphic elements

convey the brand or identity

16

CMD Rotterdam | Interaction Design - Wireframes

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!

17

CMD Rotterdam | Interaction Design - Wireframes

Looks good, right?

18

CMD Rotterdam | Interaction Design - Wireframes

Yes, but:

Don’t use “Lorem ipsum!”

Be realistic as possible, think about the content that will really be in the interface.

Many clients don’t 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.

19

CMD Rotterdam | Interaction Design - Wireframes

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.

20

CMD Rotterdam | Interaction Design - Wireframes

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.

21

CMD Rotterdam | Interaction Design - Wireframes

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:

DesignersDevelopersProject leadersUsability testersClients

So be as clear as you can!

22

CMD Rotterdam | Interaction Design - Wireframes

23

CMD Rotterdam | Interaction Design - Wireframes

24

CMD Rotterdam | Interaction Design - Wireframes

25

CMD Rotterdam | Interaction Design - Wireframes

26

CMD Rotterdam | Interaction Design - Wireframes

27

CMD Rotterdam | Interaction Design - Wireframes

28

CMD Rotterdam | Interaction Design - Wireframes

29

CMD Rotterdam | Interaction Design - Wireframes

30

CMD Rotterdam | Interaction Design - Wireframes

Questions?

31

CMD Rotterdam | Interaction Design - Wireframes

Further Reading...

Wireframeshttp://userpathways.com/2008/06/26/the-what-when-and-why-of-wireframes/

(PDF) Wireframes - The how and the whyhttp://vakgroep.cmd.hro.nl/iad/wp-content/uploads/2008/12/wireframes_thehowandthewhy_v10.pdf

Designing for Interaction by Dan Safferpgs 109 - 113

About Face 3.0 by Alan Cooperchapter 7

Recommended tools

CrossplatformAdobe InDesign

How to wireframe using InDesignhttp://vakgroep.cmd.hro.nl/iad/wp-content/uploads/2008/12/wireframing_using_indesign.zip

Mac OSXOmnigraffle

WindowsMicrosoft Visio

Other possibilitiesAdobe FireworksAxure

Whichever tool you choose, look online for some tutorials or resources to help you out!

32