workshop mock-ups

Mock-ups

What is a Mock-up?

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

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

A mockup is a prototype if it provides at least part of the functionality and enables testing.

What is a Mock-up?

.Mock-up

.Prototype

Some coding happens

What´s the process?

3.Mock-up

4. Prototype

1.Sketch

2.Wireframe

What is a Mock-up?

1. Sketchexploration + speed

What is a Mock-up?

• try out different ideas and concepts

What is a Mock-up?

• first approach at navigation model

What is a Mock-up?

• establish a composition

What is a Mock-up?

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

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.

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.

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.

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.

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.

What is a Mock-up?

3. Mock-upcolour + graphics

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.

What is a Mock-up?

What is a Mock-up?

What is a Mock-up?

4. Prototypecode + functions

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

3.Mock-up(color + graphics)

1.Sketch

(exploration + speed)

4. Prototype(code + functions)

2.Wireframe(structure + content)

Dude, I need an MVP...

3.Mock-up

(color + layout)

Sketch(exploration + speed)

4. Prototype(code + functions)

Wireframe(structure + content)

MVP (testing)

?

What is a Mock-up?

It depends...

Some coding happens

Tool(s) of the trade

Keynote Powerpoint

Keynotopia.com