All that you need to try Google Material Design
Case study
A bit of context
What you are about to read is the second part of a two weeks design sprint for a pet project. This was an exercise I did during my UX Design Immersive course at General Assembly. It’s all about the design decisions I made following Google Material Design Language guidelines.
Why Material Design?
Before switching to User Experience Design, I worked as a Set Designer and Art Director. I made objects and crafted 3D interactive installations in Morocco, Vietnam, India and the UK.
As an Art Director, I remodelled Interaction Design principles and used materials to create fictional spaces. I helped actors emphasize their emotions for a meaningful performance and I took spectators to a dream world where they associated themselves with fictional characters and released their repressed emotions.
The point being, I’m fascinated by the interaction between humans, materials and textures and Material Design gathers all of them.
So, what is Material Design?
Material Design is not only a design language. It’s a philosophy that applies rules of physics in digital products. It has been created by Google and released in 2014.
This video gives a great overview of Material Design and what inspired its creation.
Material Design Properties
Material Design has three main properties:
- Physical properties: Material Design uses material as a metaphor to create intuitive cues, consistency and visually pleasing experience. The visual cues were inspired by ink and paper. All the elements have a depth (x,y,z) and are 1 dp thick. Depth cues come from consistent shadows that come from the top to the bottom of the screen.
- Transformational properties: material can change shape, shrink and grow. Sheets of material can join together to become a single sheet, they can split and become whole again.
- Movement properties: motion helps users understand the flow between two states and provide them with meaning. Material can be moved anywhere along the plane but also can be raised vertically in the z-direction which creates visual cues for interaction.
Material Design Limitations
Material design makes affordances intuitive by relying on the physical world. However, it has some limitations:
- Materials are solid and cannot pass through each other.
- Materials cannot bend.
- Materials cannot fold.
Now that we know what Material Design is, I will take you through the steps I took to implement it in an app.
The app
The app is about finding sports groups for people to join. The sporting activity is within a walking distance or easily accessible by public transports. Here’s a storyboard that shows a use case of the app.
Wireframes
To understand the steps I took to get to the prototype below, you can read the first part of this case study: How to make a rapid prototype for mobile apps.
Style
The colours
Material Design uses unexpected and vibrant colours. The inspiration for its colour palettes comes from contemporary architecture, road signs, pavement marking tape, and athletic courts.
“Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights.” — Google
The palette
The range of colours in Material Design goes from 50 to 900 colours. And it is usually composed of 3 types of colours:
Primary colour
Google suggests using 500 colours as the primary colour. It must be widely used across all screens. In my case, I used Light Green #8BC34A.
As for the text, I used white #FFFFFF with a 100% opacity as Google advises for primary text in a coloured background.
Note: if you use black #000000 for your primary text colour, make sure to set the opacity at 87%.
Secondary colour
The secondary colour is used to indicate related information and action. It could be lighter 100 colours or darker 700 colours. In my case, I used a darker version of my Light Green #689F38 for the status bar.
Accent colour
The accent colour is usually used for emphasis in a colour scheme. Google uses it for floating action buttons and interactive elements. I opted for a Light Pink #E91E63.
My palette so far looks like this:
Icons
The icons are displayed at 24dp (x = 24 px, y= 24 px, z= 1px). The content should go inside the live area, which represents 20dp and leaves a padding of 4px.
For legibility and touch, Google advises leaving adequate space around the icon. The touch target is 48dp.
There is a library of over 900 Material Icons available for free. To have more information about the grid, the proportion, and the size, visit the Google System Icons.
I used the majority of the icons from their library and made additional ones following the guidelines.
Imagery
Google uses imagery to communicate ideas and engage the user.
Text protection
The typography should be legible on top of the imagery. You can use a gradient to protect your text. The gradient’s opacity depends on the context of use and the environment.
Language
There are two ways to address the user, you can either use:
- First-person, “I” or “my”: when emphasizing the user’s ownership of content or action.
- Second person, “you” or “your”: when the app is talking directly to the user.
“Text should be understandable by anyone, anywhere, regardless of their culture or language.” — Google
Write in the present, in a simple, concise and direct way. Use common words and be consistent across the screens. Use a friendly tone and be respectful.
Capitalization
Use sentence-style caps: only capitalize the first letter of the first word in a heading. Like you would in a sentence.
Punctuation
According to Google, you should:
- Avoid using periods in solitary sentences
- Avoid using exclamations points
- Skip colons after labels
- Avoid using words for numbers
Branding
This is the phase where you can detach yourself a bit from the guidelines and do something different.
In my case, I went through the branding classics: If I was a car if I was a quote and if I was an actor, what would I be?
If I was a quote, I would be:
“Just play. Have fun. Enjoy the game” — Michael Jordan
Visual design
The pros
Following Material Design Guidelines allows you to have a layout with a lot of white space, the content is easy to read and the layout agreeable to use.
The cons
The thing is, when you follow Material Design Guidelines by the book, you end up having a Material Design layout. You can quickly lose the creative side of the branding you’ve done. When you look at the layout, all the Material apps look the same. You can always use the principles and modulate them to your style! Here’s a link to Up Labs if you want some inspiration.
To wrap up
I hope this was helpful to you. Here’s my twitter handle @ChaymaeLougmani, try out Material Design and share your thoughts with me, I’m always interested to see other designers work. Get in touch!
If you liked this article you might also be interested in
Fitness revisited, spotlight on the new Body You Collective mobile app
5 important things you need to consider when designing for search
What the hell is UX?
Use these top 10 tips when you design for forms
All that you need to try Google Material Design
Lastly, I created www.idir.co.uk to help people reduce stress and unwind using highly concentrated CBD products. I’m working on our case study and I will share the tips of dealing with e-commerce platforms as soon as I finish it. Stay tuned ;)
