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

1. Mock-ups

2. What is a Mock-up?

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

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

5. . .
Mock-up Prototype
Some coding happens

6. What´s the process?

7. 1. 2.
Sketch Wire frame
3. 4.
Prototyp
Mock-up e

8. 1. Sketch
exploration + speed

9. • try out different
ideas and concepts

10. •first approach at
navigation model

11. •establish a
composition

12. 2. Wireframes
content + structure
• Reference Zones
• High Fidelity
• Storyboards
• Standalone
• Specification

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

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

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

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

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

18. 3. Mock-up
colour + graphics

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

22. 4. Prototype
code + functions

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

24. 1. 2.
Sketch Wiref rame
(exploration + speed) nt)
ure + conte
(struct
3. 4.
Prototyp
Mock-up e
(code + fu
nctions)
(c olor + graphics)

25. Dude, I need an MVP...

26. Sketch W irefra
(exploration + speed) (structure + content)
3.
Mock-up
(color + layout)
? 4.
Prototyp
e
(code + fu
nctions)
MVP
(testing)

27. It depends...
Some coding happens

28. Tool(s) of the trade

29. Keynote Powerpoint
Keynotopia.com