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 workshop, you'll be introduced to mockups. After looking at examples of mockups, you'll see where they fit into 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
[MUSIC]
0:00
Hi, I'm Hope.
0:04
I'm a Product Designer at Treehouse.
0:06
Do you have an idea for an app,
0:09
but you're unsure how to create
a design that looks functional?
0:11
As designers, we imagine all kinds of
experiences we want to see in the world.
0:14
But how do you take an idea in your
head and turn it into a reality?
0:19
Perhaps you have a wireframe
that hints at the vision.
0:24
But how can you design it to resemble the
finished product without writing any code?
0:27
You can do that with mockups.
0:33
Designers create mockups to visually
represent an experience in a website
0:35
or app.
0:40
Mockups include color, typography,
icons, imagery and actual copy.
0:41
The goal is to get it to look as
closely as possible to how it will look
0:48
once it's a fully functional product.
0:53
Let's look at some examples.
0:56
Here's a mockup of
a marketing landing page.
0:58
Here's a mockup of a web app.
1:07
Here's a mockup of an email.
1:15
To further define a mockup,
let's explore what it isn't.
1:20
Consider how a mockup
compares to a wireframe.
1:24
A mockup is higher
fidelity than a wireframe.
1:27
A wireframe is a drawing
that's fast to execute, and
1:30
aids in figuring out the layout,
content and flow of an experience.
1:33
Then it becomes a mockup as the visual
design and content get flushed out.
1:39
Now, let's compare
a mockup to a prototype.
1:45
Prototypes are interactive,
while mockups are static.
1:49
Although static, a mockup hints at
interactivity as it presents how
1:53
the screen will look and
how it will function.
1:57
And seeing multiple mockups
together visualizes a flow,
2:00
almost as if you're looking
at frames in an animation.
2:04
As a final note in this workshop, we'll
be talking about creating mockups for
2:08
screen designs.
2:12
We won't be covering another type
of mockup you may have heard of.
2:14
We just want the screen design
as presented on the device.
2:18
Now you may be wondering, where do
mockups fit into the design process?
2:22
As previously mentioned,
mockups are created after wireframes.
2:28
And after mockups are created,
prototyping normally follows.
2:32
It's worth noting that designers
have different workflows.
2:37
One workflow is to create wireframes and
go straight into prototyping for
2:41
quickly validating an idea for
user testing.
2:45
That works if you want feedback on
the general idea, flow, or content.
2:48
But if you want feedback on the overall
experience or the visual style,
2:53
you want to create mockups.
2:58
So a common workflow in this scenario
is to prototype a wireframe.
3:01
And once the solution is well received,
create mockups and
3:05
put it through another
round of user testing.
3:09
Another workflow is used
by designers who code.
3:12
They may skip creating mockups and
instead implement it in code.
3:15
This is fine if that's what
you're comfortable doing.
3:20
However, be careful that your technical
skills do not limit your creativity.
3:23
An advantage of designing in a design
program is that you aren't bogged down by
3:29
the challenge of implementation.
3:33
You can simply dream up your best
ideas and face implementation later.
3:35
The workflow you choose really
depends on a number of factors,
3:41
including the timeline, the problem you're
trying to solve, and your skillset.
3:45
You'll find that mockups
have wondrous benefits.
3:50
So, the point is to understand
the value of them as a tool in your
3:53
design process and utilize it accordingly.
3:58
Up next,
we'll explore how mockups are used.
4:01
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