Material Design is a design language used by Google. It was first circulated in 2014 and the latest update is known as Material Design 3.
Material Design is immediately recognizable because of its flat look and emerged from the card-based Google Now layout.
Before you hire a UX designer to implement Material Design or some variation thereof, you have to learn about its use.
We provide a detailed study about what Material Design is and how it is used in UX/UI design.
Table of Contents
What is a design language?
An expensive looking car approaches you at high speed and takes a wide turn. You can’t see the badge or the tag.
Yet, you know it’s a BMW.
How do you know it is not a Ford or Audi?
The answer is, you subconsciously recognize the BMW design language.
- A strong silhouette where the hood is disproportionately long.
- An aggressive stance.
- Fluidic lines on the front.
- A stubby rear.
- The kidney grille.
- The Hofmeister kink.
- Muscular wheel arches.
- Usually, four headlamps.
A design system is a particular design philosophy that is well-defined.
Three colours and two fonts don’t get you further than a basic WordPress site and a small team of UX designers will not be able to come up with a consistent style.
It requires input from a huge team of artists, UX designers, engineers, product managers, and software developers to produce a design system.
A small business or even a medium-sized business cannot afford that kind of resource.
Hence, using a design system is the easiest way to get everything right.
That was the intention in early 2014. Google’s best designers were asked to develop a design philosophy that could be used across the entire range of products—Android, email, documents, spreadsheets, etc.
In June, the team came up with the earliest version of Material Design.
The Google Material Design System can be seen in any of the behemoth’s products. The design philosophy has been constantly updated and refined and offers small businesses the way forward to great UX/UI design.
At this stage, an example would help.
Pre Material Design Google Android UI –
A Galaxy SII from 2011 running GingerBread.
Post Material Design Google Android UI –
A Galaxy S8 from 2017 running Material Design based Nougat.
Do I have to use Google Material Design?
It is not compulsory to use either Material Design or its Apple counterpart.
Material Design is a guideline, not a law.
Do you have to follow the map when you drive from New York to Las Vegas? No. But it prevents you from becoming lost in the Rockies.
If you adhere to it, you will have an app that looks consistent with other apps and offers the same hierarchy of menus.
When you change and follow your own philosophy, you might not get excellent reviews. The three billion users of Android are used to seeing one type of design and suddenly you offer an app with completely different typography and colours and menu. The shock might not be good for your business.
At the very least, you are spared of the constant A/B testing and guesswork.
Why the fuss?
In 2014, Google UK’s managing director Dan Cobley gave us an insight into how data-driven Google processes are.
Nothing is left to chance.
They ran an experiment to find which exact hue of blue (most of us know only sky blue and cobalt blue) users preferred on advertisement links. It was more purple-blue than greenish-blue.
Given the enormous size of Google, the decision netted them $200 million.
According to a lead designer from Google at the time, the company tested 41 shades of blue.
Features of Google Material Design
Material Design is therefore an aesthetic idea put forth by Google. It seeks to codify through vast documentation an identical look across devices and platforms.
Understand that UI guidelines are hardly a step-by-step tutorial. They merely offer the most suitable layout, transitions, typography, and navigation options. It is up to the UX designer to make the eventual choice.
Google shared three important points about its Material Design philosophy.
Unlike many other templates, it is not entirely digital. Every element of the Material Design philosophy has to draw from the real world. The fonts used by Material Design are a digital form of block letter handwriting we are used to.
Everything must reflect how it would have looked in paper and ink and then be transferred to the digital domain.
This makes moving from one section of an app to another as natural as reading a handwritten notebook.
If you use Android, you probably never had to squint to read an app developed using Material Design.
That is because of the prominence of the fonts.
Google has a disdain for light pastels and prefers that colours be brighter. Everything must be uncluttered so that it does not overwhelm the user with information.
The use of scale and proportion is very visible in Material Design. The biggest apps, such as Twitter (and to some extent Facebook) have adopted these elements of Material Design in their own design philosophy.
Movement is life. That is why motion is central to Material Design.
Touch the keypad and a character pops out ever so slightly.
A four-cornered blue-red-yellow-green wait cursor rotates while loading a setting. Blue circular wait cursor has been a part of Windows for many years but never felt an acceptable part of the UI.
This makes the user experience intuitive, and every action you take results in movement, which provides a sense of connection with the device.
How to use Material Design?
- The UX designer can download Material Design components to UX/UI design software, such as Figma and Sketch, directly. Once the components are installed, the entire team can use Figma, Sketch, or Adobe XD to create an app with Material Design guidelines.
- The official website material.io hosts everything from button hover states to how tables and bar charts are best presented. The ample documentation lets designers and developers work out any roadblocks.
- The font, color, and icon styles are completely customizable. There is no fear that your app would look like Google Android stock apps.
What to avoid when using Material Design
A few years ago design systems had a simpler name. They were called pattern libraries. That is how you could tell Reader’s Digest apart from TIME magazine.
With devices and browsers growing out of every nook and cranny it is time for design philosophies like Material Design. They give the app a consistent look whether we view it on a 10-inch tablet or a fifty-inch television.
But the problem is with losing brand identity. If your UX designer follows Material Design too closely, the app will look the same as a hundred others.
The key is to accept those parts that sit well with your own design sense.
A good example of this is the Apple Music android version. While Apple pushes for a flat design, the android version has a skeuomorphic appearance in line with Material Design.
The Material Design ecosystem is so vast that it is normal to feel overwhelmed.
The unwavering attention to detail by Google has made Material Design the go-to for most UX designers.
However, if you want to learn more about it there are wonderful tutorials on YouTube and material.io.
Familiarize yourself with the guidelines and hire an expert UX designer to design your app accordingly.