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 Getting Started With Material Design!
You have completed Getting Started With Material Design!
Preview
Bottom navigation bars allow movement between primary destinations in an app.
Further reading
- Bottom navigation
- Keeping the Thumb Zone in mind
- Bow to the Thumb — Rethinking Navigation for Bigger Screens in 2018
- Material Design UI Kit for Adobe XD (Scroll down to "Design Resources")
- Work With Linked Assets
- Placeholders in Form Fields Are Harmful
- Best Practices For Mobile Form Design
- Mobile Form Usability: Never Use Inline Labels
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
The recipe app I've wireframed contains
three major categories of content.
0:00
A search page for finding recipes,
a planner page containing a meal calendar,
0:06
a profile page for
users to control settings and preferences.
0:13
I'm thinking a bottom navigation
bar could be an appropriate way
0:19
to allow Android users to navigate
between these categories.
0:24
But to be sure,
0:29
I need to review the Material Design
guidelines on bottom navigations.
0:30
The documentation begins with a definition
of the bottom navigation component.
0:37
They allow movement between
primary destinations in an app.
0:43
The principles section reminds me to
keep the bottom navigation consistent on
0:48
every screen and to make sure the link
destinations are of equal hierarchy.
0:53
In other words,
if this pencil icon meant edit and
0:59
edit was a sub-category of
this speech bubble link
1:03
that took me to the comments section, that
would be a faulty use of this component.
1:06
These links need to be independent of each
other and at the same hierarchical level.
1:12
Also, note that bottom navigations
have an ergonomic benefit.
1:19
They make the primary navigation easy for
the user to reach with their thumb.
1:24
For more on thumb-friendly mobile
patterns, see the teacher's notes.
1:30
Checking out the dos and don'ts,
1:37
I see I should only use this pattern
on a mobile or tablet device.
1:39
And only for
three to five categories of content.
1:44
I should highlight the active link,
provide clear text labels,
1:48
and stick to one uniform icon color.
1:59
If my demo app failed to
meet these requirements,
2:04
say if I had six major navigation links,
2:07
I would need to explore other navigation
patterns better suited to my app content.
2:11
To begin my demo,
2:18
I'm going to create a new XD file using
the default Android Mobile artboard.
2:20
Some Android screens are larger
than 360x640 pixels, but I
2:26
want to make sure my wireframe is legible
at the smallest possible screen size.
2:32
I'm also downloading
the Material Design UI Kit for Adobe XD.
2:38
I'll use this to get some of my
Material components started,
2:44
and as a resource for things like system
icons familiar to most Android users.
2:49
I'm going to rename my artboard
Search for Recipes.
3:01
And then I'll get started
by grabbing the system bar,
3:07
that'll be found under top app bars.
3:11
And the three up version
of the bottom navigation
3:18
from the Material Design UI Kit,
here under bottom navigation.
3:21
You'll notice after I paste
that I'm right-clicking and
3:36
choosing Unlink Component.
3:40
I've included a resource about linked
assets in the teacher's notes, but
3:43
I see no benefit to linking this
wireframe back to the original UI kit.
3:48
I'll change the purple of
the bottom navigation to
3:56
gray, as this is a wireframe.
3:59
I'll click the plus in my color
palette should I need this gray again.
4:05
Otherwise, I'm keeping
the default Roboto font for
4:11
now and sticking to the given font sizes.
4:14
Customizing color and typography
is reserved for the mockup stage.
4:18
My three links will be labeled Search,
Planner and Profile,
4:24
with the Search icon brighter,
since that section is currently active.
4:30
I might ungroup this component
just while I begin editing it.
4:35
I'll make sure this text
box contains centered text.
4:41
And I can duplicate it
a few times using Cmd+D.
4:46
To swap these two icons, I'll first
move the Calendar icon into place.
4:53
I'll use Cmd+X to cut for
a moment, or Ctrl+X on a PC.
4:58
Move the Profile icon in the place and
paste the Calendar back.
5:06
This icon will be called Profile.
5:13
This icon will be called Planner.
5:18
And finally, Search.
5:23
I'm choosing the default system icon for
each link, thus,
5:28
the Profile icon, the Planner icon, and
5:33
I need to go get the Search
icon from my UI kit.
5:37
I'll find that here under System Icons.
5:42
In a mockup, you could substitute
these with custom icons, but
5:51
use caution, as Android users
recognize the meaning of system icons.
5:56
All that's left is to change
the magnifying glass color
6:02
to make it 100% white.
6:06
And change the inactive link text to 50%
white to match the inactive icon color.
6:12
Search is brighter because it's active.
6:24
And now I have a navigation bar.
6:26
I'll turn it into a component and
call it Bottom navigation,
6:30
In case I need to use it again.
6:38
You can see that I'm frequently copying
and pasting from the UI kit, both
6:41
to speed up my wireframing process and
to borrow Material Design visual styles:
6:46
shapes, shadows, text labels, and spacing.
6:52
Next up, I'll create a search input field.
6:58
I'll use the headline style
from the UI kit's top app bar.
7:02
I'll change the background to gray and
7:10
position the heading 16
pixels from the left edge,
7:13
while changing the text to read,
Search for recipes.
7:19
I'll extend the background to
make room for the search box.
7:25
I'll copy and
paste a text field with slight edits for
7:32
users to input their search term.
7:36
I'll make the input background white so
it can be read on the dark background.
7:41
I'll change the placeholder text to read
7:49
"tacos", something the user
might typically search for.
7:52
And I'll use the magnifying glass to
further indicate this is a search box.
8:02
I'll start by pasting it over the eyeball
to get the positioning right.
8:09
And finish by changing the color.
8:18
For my first optional form field for
include ingredients,
8:26
I'll start by mocking up the fields
based on the design of the UI kit.
8:30
I'll mark the form fields optional
8:38
to make it clear to users these
are not mandatory search features.
8:42
And I'll create a plus button to allow
users to add additional ingredients.
8:50
However, usability best practices
9:08
might sometimes lead me
to alter a given pattern.
9:11
For example,
the Material Design UI Kit is using
9:16
placeholder text to label form inputs.
9:20
But inline labels like these
cause usability problems,
9:24
especially on a mobile device.
9:29
Once the user taps the input and
begins typing, whoops, no more label.
9:31
I've included links in the teacher's notes
to articles on this issue from sites like
9:38
Nielsen Norman group, Smashing Magazine,
and Baymard Institute,
9:44
which are all great resources for
learning more about form usability.
9:50
I'll make adjustments to this form field
to include a label above the input.
9:55
Once include ingredients feels complete,
I'll make it a component
10:10
which I'll label optional field.
10:17
And I'll use Repeat Grid in creating
another form field to exclude ingredients.
10:23
This wireframe is just a quick demo, so
I'm not demonstrating how the include and
10:38
exclude ingredients
features might function.
10:43
I do need to make a Go button to
link me to my search results screen.
10:47
My search results screen will
include a Material Design component
11:02
called a side sheet to allow
the user to filter the results.
11:07
We'll look at side sheets
in our next video.
11:12
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