1
00:00:00,500 --> 00:00:06,520
The recipe app I've wireframed contains
three major categories of content.

2
00:00:06,520 --> 00:00:12,490
A search page for finding recipes,
a planner page containing a meal calendar,

3
00:00:13,570 --> 00:00:18,360
a profile page for
users to control settings and preferences.

4
00:00:19,540 --> 00:00:24,370
I'm thinking a bottom navigation
bar could be an appropriate way

5
00:00:24,370 --> 00:00:29,100
to allow Android users to navigate
between these categories.

6
00:00:29,100 --> 00:00:30,990
But to be sure,

7
00:00:30,990 --> 00:00:35,560
I need to review the Material Design
guidelines on bottom navigations.

8
00:00:37,540 --> 00:00:43,110
The documentation begins with a definition
of the bottom navigation component.

9
00:00:43,110 --> 00:00:47,280
They allow movement between
primary destinations in an app.

10
00:00:48,710 --> 00:00:53,740
The principles section reminds me to
keep the bottom navigation consistent on

11
00:00:53,740 --> 00:00:59,520
every screen and to make sure the link
destinations are of equal hierarchy.

12
00:00:59,520 --> 00:01:03,410
In other words,
if this pencil icon meant edit and

13
00:01:03,410 --> 00:01:06,830
edit was a sub-category of
this speech bubble link

14
00:01:06,830 --> 00:01:11,380
that took me to the comments section, that
would be a faulty use of this component.

15
00:01:12,420 --> 00:01:17,990
These links need to be independent of each
other and at the same hierarchical level.

16
00:01:19,660 --> 00:01:24,530
Also, note that bottom navigations
have an ergonomic benefit.

17
00:01:24,530 --> 00:01:29,340
They make the primary navigation easy for
the user to reach with their thumb.

18
00:01:30,530 --> 00:01:34,640
For more on thumb-friendly mobile
patterns, see the teacher's notes.

19
00:01:37,220 --> 00:01:39,540
Checking out the dos and don'ts,

20
00:01:39,540 --> 00:01:44,370
I see I should only use this pattern
on a mobile or tablet device.

21
00:01:44,370 --> 00:01:47,350
And only for
three to five categories of content.

22
00:01:48,650 --> 00:01:55,600
I should highlight the active link,
provide clear text labels,

23
00:01:59,170 --> 00:02:02,040
and stick to one uniform icon color.

24
00:02:04,460 --> 00:02:07,550
If my demo app failed to
meet these requirements,

25
00:02:07,550 --> 00:02:11,500
say if I had six major navigation links,

26
00:02:11,500 --> 00:02:17,130
I would need to explore other navigation
patterns better suited to my app content.

27
00:02:18,830 --> 00:02:20,270
To begin my demo,

28
00:02:20,270 --> 00:02:25,690
I'm going to create a new XD file using
the default Android Mobile artboard.

29
00:02:26,800 --> 00:02:31,410
Some Android screens are larger
than 360x640 pixels, but I

30
00:02:32,580 --> 00:02:38,490
want to make sure my wireframe is legible
at the smallest possible screen size.

31
00:02:38,490 --> 00:02:43,480
I'm also downloading
the Material Design UI Kit for Adobe XD.

32
00:02:44,780 --> 00:02:49,190
I'll use this to get some of my
Material components started,

33
00:02:49,190 --> 00:02:54,810
and as a resource for things like system
icons familiar to most Android users.

34
00:03:01,140 --> 00:03:05,160
I'm going to rename my artboard
Search for Recipes.

35
00:03:07,870 --> 00:03:11,300
And then I'll get started
by grabbing the system bar,

36
00:03:11,300 --> 00:03:15,909
that'll be found under top app bars.

37
00:03:18,920 --> 00:03:21,970
And the three up version
of the bottom navigation

38
00:03:21,970 --> 00:03:26,700
from the Material Design UI Kit,
here under bottom navigation.

39
00:03:36,510 --> 00:03:40,080
You'll notice after I paste
that I'm right-clicking and

40
00:03:40,080 --> 00:03:41,950
choosing Unlink Component.

41
00:03:43,250 --> 00:03:48,050
I've included a resource about linked
assets in the teacher's notes, but

42
00:03:48,050 --> 00:03:52,980
I see no benefit to linking this
wireframe back to the original UI kit.

43
00:03:56,740 --> 00:03:59,370
I'll change the purple of
the bottom navigation to

44
00:03:59,370 --> 00:04:04,160
gray, as this is a wireframe.

45
00:04:05,210 --> 00:04:09,310
I'll click the plus in my color
palette should I need this gray again.

46
00:04:11,000 --> 00:04:14,730
Otherwise, I'm keeping
the default Roboto font for

47
00:04:14,730 --> 00:04:18,550
now and sticking to the given font sizes.

48
00:04:18,550 --> 00:04:23,140
Customizing color and typography
is reserved for the mockup stage.

49
00:04:24,730 --> 00:04:30,170
My three links will be labeled Search,
Planner and Profile,

50
00:04:30,170 --> 00:04:34,610
with the Search icon brighter,
since that section is currently active.

51
00:04:35,890 --> 00:04:41,640
I might ungroup this component
just while I begin editing it.

52
00:04:41,640 --> 00:04:44,920
I'll make sure this text
box contains centered text.

53
00:04:46,300 --> 00:04:49,952
And I can duplicate it
a few times using Cmd+D.

54
00:04:53,070 --> 00:04:58,908
To swap these two icons, I'll first
move the Calendar icon into place.

55
00:04:58,908 --> 00:05:05,090
I'll use Cmd+X to cut for
a moment, or Ctrl+X on a PC.

56
00:05:06,370 --> 00:05:11,100
Move the Profile icon in the place and
paste the Calendar back.

57
00:05:13,450 --> 00:05:16,020
This icon will be called Profile.

58
00:05:18,200 --> 00:05:21,737
This icon will be called Planner.

59
00:05:23,420 --> 00:05:24,850
And finally, Search.

60
00:05:28,280 --> 00:05:33,420
I'm choosing the default system icon for
each link, thus,

61
00:05:33,420 --> 00:05:37,950
the Profile icon, the Planner icon, and

62
00:05:37,950 --> 00:05:42,110
I need to go get the Search
icon from my UI kit.

63
00:05:42,110 --> 00:05:45,250
I'll find that here under System Icons.

64
00:05:51,730 --> 00:05:56,620
In a mockup, you could substitute
these with custom icons, but

65
00:05:56,620 --> 00:06:02,850
use caution, as Android users
recognize the meaning of system icons.

66
00:06:02,850 --> 00:06:06,780
All that's left is to change
the magnifying glass color

67
00:06:06,780 --> 00:06:10,012
to make it 100% white.

68
00:06:12,240 --> 00:06:18,920
And change the inactive link text to 50%
white to match the inactive icon color.

69
00:06:24,340 --> 00:06:26,970
Search is brighter because it's active.

70
00:06:26,970 --> 00:06:29,110
And now I have a navigation bar.

71
00:06:30,430 --> 00:06:34,900
I'll turn it into a component and
call it Bottom navigation,

72
00:06:38,620 --> 00:06:41,070
In case I need to use it again.

73
00:06:41,070 --> 00:06:46,200
You can see that I'm frequently copying
and pasting from the UI kit, both

74
00:06:46,200 --> 00:06:52,500
to speed up my wireframing process and
to borrow Material Design visual styles:

75
00:06:52,500 --> 00:06:56,780
shapes, shadows, text labels, and spacing.

76
00:06:58,440 --> 00:07:02,400
Next up, I'll create a search input field.

77
00:07:02,400 --> 00:07:06,870
I'll use the headline style
from the UI kit's top app bar.

78
00:07:10,330 --> 00:07:13,720
I'll change the background to gray and

79
00:07:13,720 --> 00:07:17,920
position the heading 16
pixels from the left edge,

80
00:07:19,040 --> 00:07:22,840
while changing the text to read,
Search for recipes.

81
00:07:25,500 --> 00:07:29,470
I'll extend the background to
make room for the search box.

82
00:07:32,030 --> 00:07:36,340
I'll copy and
paste a text field with slight edits for

83
00:07:36,340 --> 00:07:38,720
users to input their search term.

84
00:07:41,530 --> 00:07:46,310
I'll make the input background white so
it can be read on the dark background.

85
00:07:49,990 --> 00:07:52,870
I'll change the placeholder text to read

86
00:07:52,870 --> 00:07:56,390
"tacos", something the user
might typically search for.

87
00:08:02,660 --> 00:08:07,310
And I'll use the magnifying glass to
further indicate this is a search box.

88
00:08:09,660 --> 00:08:14,200
I'll start by pasting it over the eyeball
to get the positioning right.

89
00:08:18,760 --> 00:08:21,090
And finish by changing the color.

90
00:08:26,020 --> 00:08:30,340
For my first optional form field for
include ingredients,

91
00:08:30,340 --> 00:08:35,850
I'll start by mocking up the fields
based on the design of the UI kit.

92
00:08:38,940 --> 00:08:40,960
I'll mark the form fields optional

93
00:08:42,560 --> 00:08:46,410
to make it clear to users these
are not mandatory search features.

94
00:08:50,270 --> 00:08:55,960
And I'll create a plus button to allow
users to add additional ingredients.

95
00:09:08,150 --> 00:09:11,780
However, usability best practices

96
00:09:11,780 --> 00:09:15,260
might sometimes lead me
to alter a given pattern.

97
00:09:16,430 --> 00:09:20,340
For example,
the Material Design UI Kit is using

98
00:09:20,340 --> 00:09:24,120
placeholder text to label form inputs.

99
00:09:24,120 --> 00:09:29,170
But inline labels like these
cause usability problems,

100
00:09:29,170 --> 00:09:30,830
especially on a mobile device.

101
00:09:31,870 --> 00:09:37,360
Once the user taps the input and
begins typing, whoops, no more label.

102
00:09:38,530 --> 00:09:44,230
I've included links in the teacher's notes
to articles on this issue from sites like

103
00:09:44,230 --> 00:09:50,040
Nielsen Norman group, Smashing Magazine,
and Baymard Institute,

104
00:09:50,040 --> 00:09:54,500
which are all great resources for
learning more about form usability.

105
00:09:55,560 --> 00:10:00,450
I'll make adjustments to this form field
to include a label above the input.

106
00:10:10,760 --> 00:10:15,100
Once include ingredients feels complete,
I'll make it a component

107
00:10:17,500 --> 00:10:19,940
which I'll label optional field.

108
00:10:23,180 --> 00:10:29,585
And I'll use Repeat Grid in creating
another form field to exclude ingredients.

109
00:10:38,015 --> 00:10:43,555
This wireframe is just a quick demo, so
I'm not demonstrating how the include and

110
00:10:43,555 --> 00:10:47,380
exclude ingredients
features might function.

111
00:10:47,380 --> 00:10:51,810
I do need to make a Go button to
link me to my search results screen.

112
00:11:02,940 --> 00:11:07,070
My search results screen will
include a Material Design component

113
00:11:07,070 --> 00:11:12,000
called a side sheet to allow
the user to filter the results.

114
00:11:12,000 --> 00:11:14,390
We'll look at side sheets
in our next video.