Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Creating Mockups!
You have completed Creating Mockups!
Preview
Learn how to approach creating mockups, including the pros and cons of high-fidelity and medium-fidelity mockups.
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
As you set out to create a mockup,
you should have a wireframe to build from.
0:00
As previously mentioned, a wireframe
should serve as a broad vision for
0:04
what you want to design, and the mock
up will delve into the finer details.
0:09
Before delving into mockups,
determine the visual style.
0:14
If there's an existing style guide or
a design system to adhere to,
0:18
be sure to have that open
to refer to it as you work.
0:23
If you're creating an iOS app be
sure to refer to Apple's human
0:27
interface guidelines.
0:32
Likewise, if you're
creating an Android app,
0:33
refer to the Material
Design documentation.
0:37
Familiarize yourself with existing
components and styles within that system.
0:40
It's important to understand
the expectations of users of
0:45
a particular product and platform.
0:50
If you're creating the visual
design from scratch,
0:53
determine the color palette and
fonts beforehand.
0:56
That'll give you the space to establish a
brand and visual design style before being
1:00
confronted with all the other decisions
that come along in the mockup process.
1:05
Once you have a sense
of the visual design,
1:11
you'll be able to test it out by
applying it to the UI in a mockup.
1:13
Now, let me introduce
you to mockup fidelity.
1:19
There are high fidelity and
medium fidelity mockups.
1:23
You want to decide the fidelity
before embarking on making mockups.
1:27
A high fidelity mockup depicts
exactly how this screen will look
1:32
with actual copy and data.
1:37
They're great for stakeholder review,
they look impressive and
1:39
the end result is clear.
1:44
This is also helpful for
1:46
developers as it communicates
exactly what needs to be developed.
1:47
A benefit of using actual data is
that it prepares you to design for
1:52
cases that will invariably come
up when the design is live.
1:57
Is that text box likely to contain
a long name that gets cut off?
2:01
How will it look when cropped?
2:05
Perfectly crafted placeholder text,
like Lorem Ipsum,
2:08
runs the risk of not accounting for the
challenges that come up with real data.
2:12
A drawback of high fidelity mockups
is that they take more time to make.
2:17
So if you are working in a tight deadline,
2:22
you risk spending too much time
perfecting an ill-fated idea.
2:25
A medium-fidelity markup generally
depicts how the screen will look.
2:30
It may omit some details, not be pixel
perfect and include some placeholder text.
2:35
They are great time saver.
2:41
Since it's a somewhat
flexible approximation,
2:44
there is an opportunity for
on-the-fly tweaks during development.
2:47
A drawback is that it might not
look as impressive to stakeholders.
2:51
So be sure to set it up as a loose work
in progress before you present it.
2:55
On the flip side, its unfinished
nature can make it easier for
3:01
others to critique, which sometimes
results in an even better solution.
3:05
Now that we have a grasp on fidelity,
3:10
let's start on an example project
I'll demo throughout this workshop.
3:13
Be sure to download the project
files to follow along.
3:17
Here's the set of wireframes I made for
an iOS news app.
3:22
In addition to the screen designs,
there are basic branding guidelines.
3:30
At this point,
I'm fairly set on a direction and
3:35
I'm ready to make the visual
design decisions.
3:38
Stick around for the next video to see how
to turn these wireframes into mockups.
3:41
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