"WordPress for Website Owners" was retired on June 9, 2017. You are now viewing the recommended replacement.
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
Side sheets provide supplementary content, and the Material Design documentation suggests them as a common pattern for filtering options.
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
Side sheets provide supplementary content.
0:00
And the Material Design documentation
suggests them as a common pattern for
0:03
filtering options.
0:09
Side sheets look and
0:12
behave much like navigation drawers in
Android apps with one key difference.
0:14
Navigation drawers contain
primary navigation destinations.
0:20
If I were building an app with
more than five primary categories,
0:25
a navigation drawer could
be a useful pattern.
0:30
Side sheets don't contain
navigation links.
0:34
They provide viewing options for
the screen I'm already on,
0:37
like filtering a long list of search
results based on user preferences.
0:42
We'll want a modal side sheet
since we're designing for mobile.
0:48
This means the sheet containing
filtering options will take up
0:54
a portion of the screen and
can be exited three ways.
0:58
Tapping the scrim, or darkened area hiding
the main page content. Dismissing the side
1:04
sheet using a horizontal swipe. Tapping
the close button if one is provided.
1:10
The main page content
cannot be interacted with
1:16
while supplementary side
sheet content is visible.
1:20
And side sheets allow for vertical
scrolling, but not horizontal scrolling.
1:24
If you check out the file called Design
a Side Sheet in the Project Files folder,
1:29
you'll see that I've provided
the search results design already.
1:35
The system icon representing filter and
1:40
the placeholder used to represent images
came from the Material Design UI kit.
1:44
In terms of creating the filter menu,
1:52
I'll duplicate my existing
search results art board.
1:55
Then start by borrowing a few
elements from the navigation
2:06
drawer section of the UI kit
2:11
as this will inform
the elevation of the side sheet,
2:15
the shadow cast by the side sheet,
and the opacity of the scrim.
2:20
On a real project, I would interview and
2:41
observe users to find out which
filtering options are most meaningful.
2:44
But for now I'll create options
to filter by diet and by cuisine.
2:49
In terms of body copy,
I'll work with 16 point Roboto regular,
3:05
Since that's the default body copy
size suggested by the UI kit.
3:15
And it looks like 60% opacity.
3:25
I'll work with checkboxes rather
than radio buttons since users might
3:37
conceivably want to select
more than one option.
3:42
A user searching for tacos might be
open to both Mexican and Korean tacos.
3:46
It's worth thinking about
touch target sizes here.
3:53
Material Design recommends touch targets
at least 48 pixels by 48 pixels in size.
3:58
But the checkboxes found in the UI
kit are only 18 pixels square.
4:06
I could try making the checkboxes
48 pixels square, But giant
4:15
interface elements would make fitting a
usable menu into a small space difficult.
4:22
I'd recommend communicating
with your developer to make
4:30
sure the words are clickable as
well as the checkboxes which
4:34
increases the width of the tappable area.
4:38
And make sure your vertical
spacing is comfortable.
4:50
Material Design mandates at least eight
pixels between interface elements.
4:53
But, let me use repeat grid
to create six of these.
4:59
I'll try shrinking my
spacing to eight pixels.
5:07
And I can see that's too close,
it would be pretty easy for
5:10
a user to accidentally
tap the wrong target.
5:15
I'll go with at least 16,
5:18
to make sure
there's comfortable space.
5:23
Prototyping your wireframe and
user testing your designs on an actual
5:29
phone is the best way to confirm your
design choices are effective and usable.
5:34
I'm going to duplicate By Diet to make
another heading called By Cuisine.
5:51
And provide some choices.
6:02
Oops, just as I did above.
6:08
Now we have a list of filtering
options contained in a side sheet.
6:19
For our final step, I'll design
a screen for an individual recipe.
6:24
While making use of one of Material
Design's most recognizable features,
6:29
the Floating Action Button.
6:34
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