workshop mock-ups

29
Mock-ups

Upload: fabricastartups

Post on 28-Jan-2015

112 views

Category:

Education


0 download

DESCRIPTION

Workshop Mock-Ups Workshop dado no programa FastStart Fall'12 Mais Informações: http://fabricadestartups.com/

TRANSCRIPT

Page 1: Workshop Mock-Ups

Mock-ups

Page 2: Workshop Mock-Ups

What is a Mock-up?

Page 3: Workshop Mock-Ups

A mock-up is a model of a design, used to acquire feedback from users.

Page 5: Workshop Mock-Ups

What is a Mock-up?

.Mock-up

.Prototype

Some coding happens

Page 6: Workshop Mock-Ups

What´s the process?

Page 7: Workshop Mock-Ups

3.Mock-up

4. Prototype

1.Sketch

2.Wireframe

Page 8: Workshop Mock-Ups

What is a Mock-up?

1. Sketchexploration + speed

Page 9: Workshop Mock-Ups

What is a Mock-up?

• try out different ideas and concepts

Page 10: Workshop Mock-Ups

What is a Mock-up?

• first approach at navigation model

Page 11: Workshop Mock-Ups

What is a Mock-up?

• establish a composition

Page 12: Workshop Mock-Ups

What is a Mock-up?

2. Wireframescontent + structure• Reference Zones• High Fidelity• Storyboards• Standalone• Specification

Page 13: Workshop Mock-Ups

What is a Mock-up?

Reference Zones

•What it is-Shows just major positioning of content blocks• Use to-Discuss a big idea or concept early in a project.-Show the overall structure of particular pages-Show how a family of pages work together• Watch out for-Some people can't think abstractly.

Page 14: Workshop Mock-Ups

What is a Mock-up?

High Fidelity Wireframes

•What it is-Shows as much detail as in the built product.• Use to-Work through the detail of how an interaction (or part of one) will work. -Ensure the designer and stakeholders both have the same idea about how something works.• Watch out for-Readers get bogged down in detail.-Leave time to absorb the detail.

Page 15: Workshop Mock-Ups

What is a Mock-up?

Storyboards

•What it is-A sequence of 'screens' that show the flow across time.• Use to-Show how the wireframes fit together.-Show how a user will experience a workflow - Demonstrate a task end-to-end.• Watch out for-Show tasks before & after for a whole context.

Page 16: Workshop Mock-Ups

What is a Mock-up?

Standalone

•What it is-A wireframe that can be understood without you there.• Use to-Communicate any of the wireframe types we've discussed, but in a way that means they can be understood without you. -Document for future reference and use .• Watch out for-Everything has to be included -Lots of annotations are needed -It can be hard to follow linkages between screens.

Page 17: Workshop Mock-Ups

What is a Mock-up?Specification

•What it is-A wireframe with enough detail to be built.• Use to-Development.• Watch out for-Everything has to be included:

-all states (logged in, logged out, error)-data sources and destinations-all actions-all validations

-It must stand alone -Talk to your developers to make it usable for them. -Never show this to business people or users.

Page 18: Workshop Mock-Ups

What is a Mock-up?

3. Mock-upcolour + graphics

Page 19: Workshop Mock-Ups

What is a Mock-up?

Mock-up

•It´s about-look and feel-built on the wireframe with color.-graphics and polish.-may adjust layout slightly but stays.-within the general guide of the wireframe.

Page 20: Workshop Mock-Ups

What is a Mock-up?

Page 21: Workshop Mock-Ups

What is a Mock-up?

Page 22: Workshop Mock-Ups

What is a Mock-up?

4. Prototypecode + functions

Page 23: Workshop Mock-Ups

What is a Mock-up?

Prototype

It´s about...• 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

Page 24: Workshop Mock-Ups

3.Mock-up(color + graphics)

1.Sketch

(exploration + speed)

4. Prototype(code + functions)

2.Wireframe(structure + content)

Page 25: Workshop Mock-Ups

Dude, I need an MVP...

Page 26: Workshop Mock-Ups

3.Mock-up

(color + layout)

Sketch(exploration + speed)

4. Prototype(code + functions)

Wireframe(structure + content)

MVP (testing)

?

Page 27: Workshop Mock-Ups

What is a Mock-up?

It depends...

Some coding happens

Page 28: Workshop Mock-Ups

Tool(s) of the trade

Page 29: Workshop Mock-Ups

Keynote Powerpoint

Keynotopia.com