wireframe vs. mock-up. why and when?

Wireframe vs. Mock-up

Why and When? or

Connect the Dots

Vojtech Outulny

28.5.2011 2

Agenda

Vojtech Outulny

• What are the dots?

• Connect the dots

• Low-Fi vs. Hi-Fi Wireframes

• Dots Practically

28.5.2011 3

What are the dots?

• What is Wireframe?

• What is Mock-up?

• What is Sketch?

• What is Prototype?

Vojtech Outulny

28.5.2011 4

Wireframe

Vojtech Outulny

One for beginning...

28.5.2011 5

Wireframe...

• functionality and layout.

• functional specs.

• notes about the intended functionality

• navigational systems

• how interface elements work together

• Lack of typographic style, color or graphics

Vojtech Outulny

It is about...

This leaves room for the design to be created based on the wireframe.

28.5.2011 6

Mock-up

Vojtech Outulny

One for beginning...

28.5.2011 7

Mock-up...

• look and feel

• build on the wireframe with color,

graphics and polish

• may adjust layout slightly but stays

within the general guide of the

wireframe.

Vojtech Outulny

It is about...

28.5.2011 8

Sketch

Vojtech Outulny

One for beginning...

28.5.2011 9

Sketch

• freehand drawing

• not intended as a finished work

• quick way to record an idea for later

• try out different ideas

• establish a composition

Vojtech Outulny

It is about...

28.5.2011 10

Prototype

• simulate the final design, aesthetics, materials and

functionality of the intended design

• may be reduced in size or functionality

• functions working together

• final check for design flaws

Vojtech Outulny

It is about...

28.5.2011 11

Connect the dots

Vojtech Outulny

28.5.2011 12

Connect the dots

Vojtech Outulny

28.5.2011 13

Low-Fi vs. Hi-Fi Wireframes or it Mock-up already?

Vojtech Outulny

28.5.2011 14

Dots Practically

Vojtech Outulny

28.5.2011 15

Dots Practically...

Vojtech Outulny

• Wrong feedback for first draft and early iterations

• Errors are found later => more iterations

• Cannot you use place holders

• You must search for beautiful icons

High-Fi Wireframe

• You are not Graphic Designer

…

28.5.2011 16

Dots Practically... 2

Vojtech Outulny

• First Draft Wireframe

• Low-Fi – 0.5 – 1 days

• High-Fi – 1 – 2 days

• Next Iteration Wireframe

• Low-Fi – 0.5 – 1 days

• High-Fi – 1 – 1.5 days

• Limited means of expression promote creativity

• Content holds context, use real data

Q&A

Vojtech Outulny

Web: insidemyideas.wordpress.com

E-mail: v.outulny@gmail.com

LinkedIn: linkedin.com/in/vojtechoutulny

28.5.2011 18

iPhone Visio Stencil – Yahoo 1.1

http://insidemyideas.wordpress.com/2011/05/19/iphone-visio-stencil-yahoo-1-1-updated/ Vojtech Outulny