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
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