Wireframe vs. Mock-up. Why and When?

18
Wireframe vs. Mock-up Why and When? or Connect the Dots Vojtech Outulny

description

Do you know what a Wireframe and Mock-up are? What is their purpose? When and why should you use them? And how it all fits together? What is a High-Fi Wireframe and how it can bring you in problems? So these questions, I will try to answer and as a bonus I add my experience from using of Low-Fi wireframes.

Transcript of Wireframe vs. Mock-up. Why and When?

Page 1: Wireframe vs. Mock-up. Why and When?

Wireframe vs. Mock-up

Why and When? or

Connect the Dots

Vojtech Outulny

Page 2: Wireframe vs. Mock-up. Why and When?

28.5.2011 2

Agenda

Vojtech Outulny

• What are the dots?

• Connect the dots

• Low-Fi vs. Hi-Fi Wireframes

• Dots Practically

Page 3: Wireframe vs. Mock-up. Why and When?

28.5.2011 3

What are the dots?

• What is Wireframe?

• What is Mock-up?

• What is Sketch?

• What is Prototype?

Vojtech Outulny

Page 4: Wireframe vs. Mock-up. Why and When?

28.5.2011 4

Wireframe

Vojtech Outulny

One for beginning...

Page 5: Wireframe vs. Mock-up. Why and When?

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.

Page 6: Wireframe vs. Mock-up. Why and When?

28.5.2011 6

Mock-up

Vojtech Outulny

One for beginning...

Page 7: Wireframe vs. Mock-up. Why and When?

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...

Page 8: Wireframe vs. Mock-up. Why and When?

28.5.2011 8

Sketch

Vojtech Outulny

One for beginning...

Page 9: Wireframe vs. Mock-up. Why and When?

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...

Page 10: Wireframe vs. Mock-up. Why and When?

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...

Page 11: Wireframe vs. Mock-up. Why and When?

28.5.2011 11

Connect the dots

Vojtech Outulny

Page 12: Wireframe vs. Mock-up. Why and When?

28.5.2011 12

Connect the dots

Vojtech Outulny

Page 13: Wireframe vs. Mock-up. Why and When?

28.5.2011 13

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

Vojtech Outulny

Page 14: Wireframe vs. Mock-up. Why and When?

28.5.2011 14

Dots Practically

Vojtech Outulny

Page 15: Wireframe vs. Mock-up. Why and When?

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

Page 16: Wireframe vs. Mock-up. Why and When?

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

Page 17: Wireframe vs. Mock-up. Why and When?

Q&A

Vojtech Outulny

Web: insidemyideas.wordpress.com

E-mail: [email protected]

LinkedIn: linkedin.com/in/vojtechoutulny

Page 18: Wireframe vs. Mock-up. Why and When?

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