This course will be retired on September 13, 2021. We recommend "Introduction to Design Systems" for up-to-date content.
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
There's two more artboards we need to create. One for the navigation drawer, and another for the FAB that will help users take photos.
Resources and Documentation
Project Downloads
- Material Design UI Kit for Adobe XD - This compressed zip file contains a UI kit for Google Material Design created in Adobe XD. It also includes the initial wireframe created in Adobe XD as well as sample photos that are used in the project.
There's two more art boards we need to
create, one for the navigation drawer and
0:00
another for
the fab that will help users take photos.
0:06
Let's take a look at the documentation for
navigation drawers.
0:10
So I'll go to components here and
find navigation drawer.
0:16
And I'm going to scroll down to usage.
0:21
So it says that navigation drawers should
be used to access destinations and
0:26
app functionalities such
as switching accounts.
0:30
So this would be a good place to put
our higher level photo categories
0:34
like all photos, albums,
people, and trash.
0:39
It would also be a good spot for the link
to settings and the sign out button.
0:42
So let's scroll down to
types of navigation drawers.
0:47
Similar to sheets, there's the standard
approach which on a desktop or
0:53
tablet is often co-planar
with the app content.
0:58
So you see there's no shadow here because
it's on the same level of elevation.
1:03
On mobile,
navigation drawers are always modal.
1:07
And they can appear from the side or
1:13
in the case of a bottom app bar,
they can appear from the bottom.
1:16
Since we're using a bottom app bar,
the option for
1:21
either one is available to us and I think
1:24
we'll just go with the standard modal
one that comes in from the left side.
1:28
So let's switch back to our prototype and
1:33
select the art board we used for
filters and
1:38
copy and paste it to duplicate it, and
1:44
let's rename it to
Mobile Navigation Drawer.
1:49
Next, let's go inside here and
we want to delete everything except for
1:56
the bottom app bar and the photo gallery.
2:02
So that includes the Skrim.
2:06
Delete all of that.
2:08
Then back in our UI kit, let's copy and
2:10
paste a side Navigation Drawer.
2:16
So remember this is alpha order.
2:20
So N is about down here.
2:22
Zooming into these Navigation Drawers,
and lucky for us,
2:26
they've already got
elements laid out here.
2:31
So this will a little bit faster than
actually building out our side sheet.
2:34
So I will select this left
navigation drawer, copy it and
2:39
you'll notice it even includes a scrim for
us, isn't that nice?
2:43
We'll switch over to our
other art board and paste it.
2:48
And because this is the exact same
size as the Android phone art board,
2:55
we don't have actually have to adjust
the positioning on this in theory.
3:00
It should just paste
right where you need it.
3:05
And it should also appear
as the top layer, but
3:09
if not just make sure you move it up
above the app bar and the photos.
3:12
And finally,
let's just make sure we unlink it, so
3:17
that we can make our own edits.
3:21
So let's open that up and
see what's inside.
3:24
So we have the account switcher,
the text labels, and
3:31
the actual surface itself,
which includes a scrim like I said.
3:36
Now because this is an app
where people need to log in,
3:41
a lot of the UI here is in default.
3:44
I'm going to drag a photo
of myself into this
3:47
profile photo spot, so
this little circle here.
3:51
And maybe we can change these
headlines to give a bit more context.
3:55
I'll double-click this first one here and
I'll type in my own name.
4:01
You of course can type in your name.
4:08
And then I'll add an email address,
example dot com.
4:10
And these three pieces of
information taken together,
4:19
will let the user know which
account they've used to sign in.
4:23
And like I said,
feel free to add your own details.
4:27
Next, let's relabel these
items to all photos,
4:30
the next one should say albums.
4:39
People, Trash,
4:47
settings and sign out.
4:52
Now this element is using
Adobe XD's repeat grid.
5:00
So to get rid of these last
three items that we don't need,
5:06
all we have to do is just
resize the grid to hide them.
5:10
Now let's get some better icons in place.
5:15
So go back to the UI kit and
let's just zoom out here.
5:17
We'll go to this second row of art
boards and zoom in to the very bottom.
5:23
This is where I've pasted some
icons that are not included
5:30
with the default UI kit but
are a part of material design.
5:35
So we're actually gonna need
all of these except for
5:41
the camera icon which we've already used.
5:43
So just go ahead and
select all of them, and copy them, and
5:45
then paste them into your art board and
let's just start positioning this.
5:50
So first we can just delete this
camera icon because we won't need it.
5:57
And for the all photos icon, I'll use this
one that looks like a stack of pictures.
6:01
So I'll move that into place and I'm
actually gonna zoom in a little more here
6:08
just to get some better positioning.
6:13
So I'll move that into place.
6:18
And then we need to grab the fill
color off of that purple heart and
6:22
adjust the opacity to match.
6:27
So from the inspector on the fill color,
I'm just going to grab the eye
6:29
drop tool and there's a little loop
that will zoom in let's just make
6:34
sure we're grabbing the darkest
purple color here just like that.
6:39
And we'll increase the opacity to 100%.
6:45
And then we just need to
delete the old icons.
6:50
So let's try to find that one.
6:54
Looks like it's that there,
and hit Delete.
6:59
Then we can move these others into place.
7:04
So for this one with a little bookmark,
I'll use for
7:05
albums, so let's put that in place.
7:10
Make sure it lines up,
this one will be for
7:15
people, picture of the face, good.
7:19
This one will actually be for
a sign out down here at the bottom.
7:24
This will be trash and
this one is for settings and
7:28
let's just adjust its
positioning a little more so
7:33
it's a bit more precise.
7:39
We go, that looks centered.
7:45
This one can come up a little, looks good.
7:49
The trash icon here is also off center,
I think these are all off center.
7:52
There we go, the settings just like that,
and Sign Out just like that.
7:59
That looks good.
8:07
Okay, and now because this is a repeat
grid we can actually just select this
8:09
single icon here under the repeat grid.
8:14
Hit Delete and
it will get rid of all of those old icons.
8:18
Now, I'll admit in this art board,
these layers are kind of a mess, but
8:25
we're moving quickly so
that's actually okay.
8:30
If you'd like to organize them,
feel free to do so.
8:33
But often when I'm making these quick
prototypes, I'll prioritize momentum
8:36
over organization because I just wanna see
if something works in the first place and
8:41
if it does, then I can start iterate and
get organized.
8:46
But in the spirit of momentum,
let's keep moving.
8:50
The last art board we need to make is for
the fab.
8:54
So let's duplicate this latest
art board and rename it.
8:59
And we'll call it mobile-fab, and then for
9:07
this one, let's get into these layers.
9:12
We'll delete everything except for
the app bar.
9:17
So we also actually wanna
get rid of this repeat grid
9:24
cuz we're going to replace
it with something else.
9:27
This screen is going to show
whatever the user's camera sees, and
9:31
allow them to save a photo.
9:35
We're keeping the app bar because it
can change based on the context of
9:38
the application.
9:41
So let's add a background photo.
9:42
I had a lot of fun pointing
my camera at this giraffe, so
9:45
I'm going to just drop
in that nice big photo.
9:50
And I'll zoom out to resize it,
9:55
Make sure it covers
the application completely,
10:01
there we go and I'll move it over,
maybe down a little bit.
10:05
I think that looks good.
10:11
That seems like something
I would see on my phone.
10:13
And now, we need to move that
below the app bar, there we go.
10:17
And now,
let's flip back over to our UI kit and
10:22
grab some icons because we need
to change up this app bar.
10:26
So we've already used all of these icons,
we don't need those anymore.
10:31
I'm going to go up to the top and
zoom in on the field system icon set.
10:36
And none of these in particular look
the best for our shutter button,
10:43
but I'm just going to use this one,
the four little corners here.
10:48
So I'll select that,
copy it to my clipboard and
10:54
paste it in, and
then I'll adjust the opacity.
10:59
And let's actually put it
in above the tab there
11:07
and we'll move this into place, might have
to zoom in a bit to actually select it.
11:13
Oops, there we go, so
move that into place.
11:19
And let's delete this old camera icon.
11:25
Oops, looks like it moved
outside the layer there.
11:32
Let's put that back in, there we go.
11:34
And now let's try to align this
perfectly with the circle,
11:37
it may already be aligned.
11:41
No, there it is, so
equidistant from all sides.
11:42
Now, back in the UI kit once again,
11:49
I want to grab this X icon.
11:53
So I will select that,
11:58
there we go, copy it and paste.
12:02
And I want this to be where
the menu is right now,
12:07
so let's move that to right there.
12:12
Not that the layer ordering
really matters, but,
12:16
Helps keep us in check here,
and now I'm going
12:23
to adjust this so
that the opacity is 100%.
12:28
And I actually need to unlink
this because I wanna change,
12:33
The color of it,
change the fill color to white.
12:38
And then finally,
we can delete this old menu icon.
12:42
And at this point, we don't actually want
anything else in the app bar except for
12:47
our shutter button and this x, so
we can get rid of these filters.
12:52
And we can get rid of the search icon.
12:58
And this is actually breaking the rules
of the bottom app bar a little bit,
13:00
we should have more than
just this one action here.
13:05
But I think in this particular case,
it is okay to bend
13:09
the rules just a little bit for
this one state of the application.
13:13
So that should be it for
the actual layouts.
13:19
When you're done,
go ahead and save your work.
13:22
You need to sign up for Treehouse in order to download course files.
Sign up