Embracing Material Design Components
We were prompted to design mobile screens that abided by the Material Design system through and through. I loved it!
Material Design — DYI
The Material Design Guidelines are very inviting and easy for a designer to put into practice. This may have been one of my favorite design projects at Bloc.
Navigation drawer
The first component we were told to design was a (Modal) Navigation drawer according to Material Design’s exact anatomy and specs;

The design system defines Modal drawers‘ usage;
“Modal navigation drawers block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.
They are primarily for use on mobile where screen space is limited, and can be replaced by standard drawers on tablet and desktop.”
It was great to learn the taxonomy involved:
- Container
- Header (optional)
- Divider (optional)
- Active text overlay
- Active text
- Inactive text
- Subtitle
- Scrim (modal only)
The most important thing here was to follow all the measurements and spacing principles:

This is what I designed:

Why I love this design system
The margins are what won me over. I loved the precision that Google lays out. It streamlines the design process so much and makes everything look so pristine.
Cards
The second task was to design a ‘card’ component.
Conceptually, the Material Design guidelines define the Cards as:
“Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.”
Like the navigation drawer, the pixels are measured down to the T (and the P). Here’s the anatomy of a card:

As for the taxonomy:
1. Container
Card containers hold all card elements, and their size is determined by the space those elements occupy. Card elevation is expressed by the container.
2. Thumbnail [optional]
Cards can include thumbnails to display an avatar, logo, or icon.
3. Header text [optional]
Header text can include things like the name of a photo album or article.
4. Subhead [optional]
Subhead text can include text elements such as an article byline or a tagged location.
5. Media [optional]
Cards can include a variety of media, including photos, and graphics, such as weather icons.
6. Supporting text [optional]
Supporting text include text like an article summary or a restaurant description.
7. Buttons [optional]
Cards can include buttons for actions.
8. Icons [optional]
Cards can include icons for actions.
Elevated Cards
The assignment we were given involved a screen with ‘elevated cards’.
We were told to model this screen:

Here’s my version:

Material Design emphasizes the importance of information hierarchy. That basically sums up UX in two words.
Hats off to Material Design!

