Embracing Material Design Components

We were prompted to design mobile screens that abided by the Material Design system through and through. I loved it!

Orlee Gillis
Nov 5 · 3 min read

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;

  1. Header (optional)
  2. Divider (optional)
  3. Active text overlay
  4. Active text
  5. Inactive text
  6. Subtitle
  7. Scrim (modal only)
Taken from Google’s Material Design guidelines
My first design using Material Design specs

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.

Taken from Google’s Material Design guidelines

Elevated Cards

The assignment we were given involved a screen with ‘elevated cards’.

Taken from Google’s Material Design guidelines

Orlee Gillis: UX Portfolio

Get acquainted with my UX design and writing pieces

Orlee Gillis

Written by

Content. Strategist. UX. Storyteller. Hands-on Writer. Cold Brew.

Orlee Gillis: UX Portfolio

Get acquainted with my UX design and writing pieces

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade