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