Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Creating Mockups

Well done!

You have completed Creating Mockups!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Preparing to Make Mockups

3:47 with Hope Armstrong

Learn how to approach creating mockups, including the pros and cons of high-fidelity and medium-fidelity mockups.

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