Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, you'll learn about the benefits of creating mockups and understand how they're used in the design process.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The purpose of mockups is to visualize
your idea for an app or a website.
0:00
Benefits of creating mockups include
exploring, experimenting, and
0:05
ideating on the visual design.
0:10
Representing a vision to stakeholders and
0:12
teammates to clarify requirements and
gain approval for a chosen direction.
0:15
Communicating with developers.
0:20
Performing user testing.
0:22
First, mockups enable
designers to explore and
0:25
iterate upon different
visual design treatments.
0:28
It allows you to apply the visual
design and branding so
0:31
you can approximate how
the experience will look and feel.
0:35
Create a mockup of each screen in
a flow to fully depict the vision.
0:39
Be sure to mockup your iterations to
share with your team for feedback.
0:44
Second, mockups are a key component
to getting stakeholder approval.
0:49
They visualize the experience in a way
that everyone can see the vision.
0:54
This sparks a conversation about
the requirements and scope.
0:58
Once they agree on the direction
of the wireframing stage,
1:03
the mockup further solidifies the design
and stakeholders can more fully envision
1:06
the final product along with reviewing
the visual design direction.
1:11
I've found that mockups elicit
a stronger response than wireframes.
1:16
They're visually more compelling, and
1:20
help everyone get on the same page
about how an experience will look.
1:23
Third, mockups help communicate
the product vision with developers.
1:27
Designers use mockups to create
a dialogue with developers in terms of
1:32
what needs to be coded.
1:37
Likewise, developers may
have additional solutions or
1:38
constraints you hadn't considered.
1:42
Think through the different permutations
of a UI with dynamic data and
1:44
differences based on user rules and
conditions.
1:49
For any interactive elements,
use mockups as a conversation aid and
1:52
create a prototype later to clarify
animations and interactions.
1:57
Talking about the design complexity
upfront helps align everyone
2:03
with the scoping and timing of work.
2:07
It also gives developers
a head start on any back
2:10
end work they can do while you're
polishing up the final design details.
2:13
They can work on building out the known
knowns that are definitely a part of
2:18
the approved design.
2:23
Fourth, mockups are also
useful in user testing.
2:24
Just like wireframes, mockups enable
designers to visualize an idea and
2:28
get it in front of prospective or
current users for feedback.
2:33
Compared to wireframes, testing with
mockups has the additional benefit
2:37
of getting feedback on
the visual design and branding.
2:42
While wireframe testing
validates the layout, flow and
2:46
general idea, mockups enable more
feedback on the visual treatment.
2:50
Testing a mockup validates or invalidates
an idea before developing it with code.
2:55
In the next video, I'll show you
how to prepare to make mockups.
3:02
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up