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
Learn how to create a mockup in Adobe XD using Apple's UI kit.
Resources Mentioned:
- Human Interface Guidelines
- UI kits for Adobe XD and other design software
- San Francisco font - Apple
- SF Symbols (macOS 10.14.4 or later) or Font Awesome
- News article used in mockup - from NASA
Resources for non-Adobe XD users:
Further Reading:
- SF Symbols: The benefits and how to use them - by Antoine van der Lee
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
Welcome back.
0:01
Now, let's start mocking up stuff.
0:03
I'll demonstrate making a high-fidelity mockup in Adobe XD.
0:06
But if you already have a favorite
design tool, feel free to use it.
0:10
Tools such as Figma, or
0:16
Sketch have a lot of the same
resources I'll use in this demo.
0:17
I'll start with these wireframes I made
for news article layout on an iPhone app.
0:21
Since I'm creating an iOS app, I'll refer
to Apple's human interface guidelines.
0:27
I'll use Apple's UI kit for Adobe XD.
0:32
A UI kit provides patterns for
native UI elements such as components,
0:35
cards, navigation,
filters, social share, and
0:40
so on,
that you can reuse in your app designs.
0:45
Think of them as stickers that you
can copy and paste in your mockup.
0:48
Download the UI kit and
check it out for yourself.
0:53
In order to use Apple's UI kit,
be sure to also install the SF Pro font
0:56
SF Pro is the native font
pre-installed on Apple
1:04
devices that run on iOS, macOS and tvOS.
1:09
If you're on a Mac, also installed
the SF symbols app as an icon resource.
1:13
If you're on Windows or another platform,
1:18
check out an alternative icon
resource in the teachers notes.
1:20
SF symbols is an icon
library created by Apple.
1:24
It contains free icons to use in your app.
1:28
Although, they can't be use for
any branding or trademark purposes and
1:31
some have additional license restrictions.
1:35
The great news is the vast majority
are free to use with minimal restrictions.
1:38
The components in the UI kit
frequently make use of these icons.
1:44
Before I move on, I wanna offer a tip,
1:49
in case you get stuck
installing these resources.
1:51
You may encounter missing icons that
appear as a question mark in a square, or
1:55
missing fonts which are noted in
the assets and text sections of XD.
2:00
This can happen if there's
a version conflict with the fonts.
2:05
This happened to me since I had an older
version of the fonts on my computer.
2:08
Try removing or
uninstalling the fonts, and
2:12
reinstalling the latest versions from
the Apple Developer resources website.
2:16
Another troubleshooting tip is to
double check the fonts are enabled.
2:21
If you're using a Mac,
check on font book under computer or
2:25
user to ensure the fonts are enabled.
2:29
If you're using a PC,
check in your font manager.
2:33
The first screen I'll
design is the home screen.
2:37
I'll copy and paste the tabbed app
artboard from the Apple UI kit.
2:40
That gives me the overall
shape of an iPhone,
2:46
the taskbar, toolbar, and home button.
2:48
So I actually find it difficult to
select elements when the display
2:53
shape is shown here because it's a layer
that's sitting on top of everything else.
2:58
And it's very easy to select that when
you actually wanna select stuff that's
3:02
underneath it.
3:06
So for now,
while I'm working on the mockup,
3:07
I just like to hide the display shape.
3:09
And then later on, when I wanna see how
that will look, I can turn it back on.
3:12
So now,
I'll trim the tabs down to three tabs.
3:18
And you can see here that matches
how it is in the wireframe.
3:24
So we just need Home,
Topics, and Personalize.
3:27
I'll use the house icon for
the Home tab, the book icon for
3:47
the Topics icon, and
the wand and stars icon for Personalize.
3:52
When you find the icon you like,
just select it and
3:57
then on your keyboard, do a copy.
4:00
So if you're Mac, it's Cmd+C.
4:02
And then you can paste it into Adobe XD.
4:04
So just select the icon and
then Cmd+V to paste.
4:08
So just select the icon and
then Cmd+V to paste it if you're on Mac.
4:15
And if you're on Windows, just do your
normal copy and paste commands for
4:20
keyboard.
4:24
So I'm just gonna go through and
copy in all those icons.
4:26
All right, now that I'm happy
with how that tab bar looks,
4:32
I wanna turn it into a component.
4:35
And as you can see here,
4:38
it's actually a linked component because
I copied it from Apple's UI kit.
4:39
And so,
It’s sort of linking off to that other file.
4:44
I actually just wanna turn
it into a local component.
4:48
So to do that,
I can go to the Assets panel, and
4:51
then scroll down where
it says the Components.
4:56
And here it is,
it's the Tab Bar Component.
4:59
And I just want to right-click, and
then click Make Local Component.
5:03
So you'd want to use the links components
if you are working on a file that
5:11
had all your design system in it.
5:16
And you just wanted
to update that one file so
5:18
it could trickle across
multiple Adobe XD files.
5:22
But in this case, I just wanna keep
Apple's UI kit as its own file and
5:25
not use that as my own
personal design system.
5:29
So in this case, I just wanted to borrow
from the UI kit, throw it in here,
5:33
and it's locally a component just for
this file.
5:38
Regardless, so now that it's a component,
5:45
I can use it very easily across all
the artboards within this file.
5:49
So now, instead of having to
reinvent the wheel every time I
5:54
want to create the tab bar,
I can just edit it here in one spot.
5:59
So, now I want to add the logo
to the top of the screen.
6:07
So I wanna have this colored
rectangle background behind
6:35
the taskbar to accentuate the logo.
6:39
So let's grab the logo here from the
brand's artboard, and then paste it in.
6:45
And that looks really great.
6:54
I also wanna make sure I'm renaming
these artboards as I go along.
6:56
So we're working on the the home
screen for this app.
6:59
And I wanna copy in all of this
content that I have here because I'm
7:03
gonna build off of that.
7:07
So selecting that home screen,
I'm just gonna paste in everything.
7:10
And you see how it's overlapping here.
7:19
We just wanna make sure we right-click and
send to the back, so
7:21
that way the tab bar is on top.
7:25
And I'm gonna do Cmd+G just
to turn everything into
7:28
a group, And label that content.
7:32
Great.
7:41
Now, I have some colors in mind for
these labels,
7:43
so health, environment and lifestyle.
7:46
Those are the different news categories,
and I wanna color code them.
7:50
So I wanna go back to the brand board
here and select all these colors and
7:56
add them to my palette.
8:00
So I'm just selecting each color,
and then adding them here.
8:08
By clicking this + icon, and
that just saves them for later.
8:14
So I can easily refer to those same
colors, when I wanna apply them.
8:17
And also, have a couple gradients here.
8:24
And so, now you can see here this color.
8:29
I could just easily select it from the
palette here to make sure I'm always using
8:33
this light green.
8:38
Okay, so for health,
I wanna make it that nice pink color.
8:41
Environment, I think
green would look nice,
8:51
it has that kind of
earthy nature look to it.
8:54
And lifestyle, let's do the purple.
8:58
And then now, I wanna replace
all that placeholder text that
9:05
worked really well in
the wireframe with actual content.
9:09
So I have this content
off the screen here.
9:13
I'm just gonna copy it in for time's sake.
9:16
All right, this is looking great.
9:21
I'll move on to the article view now.
9:23
All right, so I've copied my artboard and
I've renamed it article.
9:26
And then, I'm just gonna copy all
the contents from the article view and
9:31
paste it over.
9:36
And Send to Back.
9:40
And once again, I'm just gonna
group it and call it content.
9:45
And then just a note, you can also copy
all the text styles from the Apple UI kit.
9:51
And if you do,
9:57
I just wanted to note something about
the way that the text can be resized.
9:58
So let's say I copy this.
10:04
And then if I paste it on here,
you'll see that the only option for
10:07
resizing this text is
through this little dot here.
10:13
And that makes the text larger or smaller.
10:17
But if you're hoping to resize
the actual blue box here and,
10:20
say, make this a more narrow text box,
the way you do that is down here.
10:25
So see how this is selected?
10:33
Click this and
then it turns it into area text, and
10:37
that's when you have more dots for
more control.
10:42
So I could make this spanned really long,
10:46
I could make it shorter and get cut off,
I could make it tall and wrap.
10:48
And so you'll notice that when you
copy the text over from the UI kit,
10:54
it always starts out as point text.
10:59
So point text changes the font size,
11:01
whereas the area text changes
the actual dimensions of the text box.
11:04
So hopefully that helps you out as you're
trying to wrangle the text in here.
11:13
And then for this screen,
I'll add the actual content as well.
11:19
So in the standard iPhone view,
11:24
the article gets clipped off
pretty early on in the text.
11:26
But since I want to design for
the entire article,
11:30
I can stretch the height of
the artboard to show all of it at once.
11:33
I've actually already designed this view,
and
11:38
I'll paste it in to show you how it looks.
11:41
Now, you'll notice there are a couple
new pieces to this screen here.
11:45
So I'll show you how I added those in now.
11:48
Now let's add a couple
more navigation pieces.
11:52
I'll grab a navigation
bar from the UI kit.
11:55
I'll hide the Right Accessory for now,
I don't think I need an action over there.
12:02
I want this to just say Back, and that'll
just lead folks back to the home screen.
12:09
And this will just say the name
of the app, YORLY news.
12:15
I'll just stretch that out so we can
see all that text and center align it
12:24
All right, so now I need a toolbar.
12:33
So let's pop over to the UI kit again.
12:39
All right, I'll grab this toolbar.
12:43
And then same concept as before,
12:48
I just wanna replace these
icons with icons that I want.
12:50
And you can see I actually
already did this here for
12:54
this view that I just showed you,
so I'm just gonna copy this over.
12:57
So I just have a back button,
heart to like the article,
13:03
a little comment box so that way
you can comment on the article, and
13:09
then a share icon so that way you can
share it through email, for example.
13:13
All right, so this is basically two
different ways to do this article view.
13:20
So on the left here, it's kind of
a limited view of how this page looks, but
13:25
this is actually in proportion to
how you would see it on an iPhone.
13:29
And then on the right here,
13:34
I have the entire page in view because I
wanna actually show how I wanna do this.
13:36
Pull quote, for instance, I have a really
subtle, wavy gradient back here,
13:42
this shape, it gives a little
bit of interest to the page.
13:48
And then I also have this image here
with a caption, Another headline,
13:53
and this little blurb here that
talks about the related stories and
14:00
links off to related articles.
14:05
So for this option,
you'll notice that the toolbar
14:09
actually just stays in place as
it would appear on the iPhone.
14:12
And that just makes it easy if you
want to demo how the scrolling looks.
14:16
So if you select the artboard, this little
14:20
dotted line shows up, and that is
where the vertical scrolling happens.
14:24
So you can see here the default
state would be none, but
14:30
if you set it to vertical, you can set
it to stop where that toolbar ends.
14:33
Oops, that's not it.
14:43
So the normal height of
this iPhone screen is 812.
14:45
So I just take that number,
add it to this viewport height for
14:50
the scrolling, and then it knows
to pin that toolbar at the bottom.
14:55
So you can see how this looks if I click
Play, and I can scroll down the page.
15:01
So we're not gonna get into interactive
prototyping in this workshop, but
15:09
I just wanted to show you that if you were
curious to see how it really looks in
15:13
action.
15:17
It is pretty exciting.
15:18
All right, so
next up is the article share screen.
15:20
For this, I'll copy the activity
view control from the UI kit.
15:24
All right, so I just customized the title
there, and otherwise it's pretty default.
15:38
All right,
now I'll mock up the comment panel,
15:46
just gonna copy Article Share,
15:51
rename it Comment,
delete this activity view.
15:54
Keep that semi-translucent
gray rectangle that's
15:59
overlaying everything because this,
again, will be another overlay.
16:05
All right, that's just my
little placeholder for the X.
16:18
Actually gonna copy this
from SF Symbols again.
16:21
I'm gonna copy in a little icon of
a user here also from SF Symbols.
16:41
Make this a little smaller,
16:51
And tighten this line height a bit.
17:06
I wanna lighten this to a lighter gray.
17:08
And then let's zoom out a bit,
I just wanna copy this a few times here.
17:13
Let's make this a little taller, and
that way I can put a few more comments in.
17:24
And then I wanna paste in some
realistic comments in here.
17:29
And then I noticed this one
actually wraps to three lines, so
17:36
I'll make that a little bigger,
move this one down.
17:40
And then I wanna add a rectangle here,
17:45
Get a light gray.
17:54
Add some border radius, I'll make it the
same width as the other content in here.
18:00
And I've got some placeholder text.
18:08
Seems a little big,
let's tone it down a bit.
18:14
And all right,
now let's mock up the next screen,
18:18
which is what the user will see
when they click on the comment box.
18:22
So I'll copy the Comments artboard and
I'll rename it to Comment Active.
18:28
So I wanna keep everything except for
these comments here.
18:37
And I'll make the comment box larger
to give them more space to type.
18:43
And then you can see here I just did the,
I don't know the technical term, but
18:48
the the vertical line character on your
keyboard, just above the Enter button.
18:53
And it looks like a cursor, so it looks
like I'm actively gonna type in this
19:01
box here, which is what I want,
that's what effect I want here.
19:06
And then I'll just zoom in a bit and
I wanna add a button that says Post.
19:11
And now I wanna copy
the keyboard from the UI kit.
19:26
So you can see, my text box is
actually too tall right now, so
19:41
I'm just gonna shorten this a bit.
19:46
I'm gonna group this button so
it's easier to select.
19:51
Nudge that 12 pixels apart there and
make sure that's aligned to the bottom.
20:00
Okay, great.
20:09
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