Table of Contents
Material design is one of the strongest trends in web design. What’s more, it has high position in UI design as well. This is the main reason why I created this ultimate guide to material design. My goal is to give you enough information to implement this style in your work. We will start with the brief history of web design. Or, what was before material design. Then, you will learn about the four core principles of this style. We will finish with talking about its main components. I will also give you a handful of tips to help you avoid the biggest mistakes. Let’s begin.
Web before material design
Let’s start this article with taking a look at the state of web design before material design entered the stage. The reason is that every design style has some predecessors. Nothing usually emerges from vacuum. This is not true only for topics related to design, but to everything. Whether you think about groundbreaking innovations in technology or the emergence of new species in nature. In case of material design, there are two main design styles. These two styles were, and still are, significant enough so we should discuss them.
The dark ages of skeuomorphic design
One of the earliest design styles many of you may remember was skeuomorphism. This design style is focused on taking cues from the physical world. It aims to replicate the object around us in digital form and make them look like real. Take a look at your desktop and chances are that you will see icon of folder or file. Or, take a look at UI of some app. Chances are that the buttons will look like something you can really push.
One of the reasons why designers used to design this way was to make UI feel more familiar to users. It is an undeniable fact that the majority of us don’t like things that don’t look familiar. When we see something unknown, our common is distrust. What’s more, when we see something we don’t understand, we may perceive it as a threat. Neither of these feelings is something you would want to invoke by your design. Instead, you want to make your design more familiar.
When you do this, people will be less afraid of giving it a try. Another benefit is that people will learn to use it in the right way much faster. As a result, skeuomorphism was leading the stage for a very long time. In fact, there are still many apps and websites following this style. Quite significant number of designers and other people believe that skeuomorphism will never really die.
The argument against skeuomorphic design
On the other hand, there are also people who don’t like this design style. These people criticize it for its lack of resourcefulness. They argument that it failed in innovation. The truth is that skeuomorphic design aims to mimic the behavior of objects in the real world. It is not aimed at coming up with new ideas and innovating. Let me give you a simple example. When you want to design a button, you will not try to come up with new concept of button.
You will rather take a look at object around you and replicate already existing solutions. You take that button on your clocks or radio and transfer it into pixels. The same is true for icons. Why should you try to reinvent the icon for folder or file? Take a look at folder and papers in your drawer or cabinet and replicate them. This is much safer solution because people like familiar things. Just don’t expect to create something breathtaking or innovative.
The previous lines probably sound like I’m one of those people against skeuomorphic design. Well, yes and no. I like to see when design helps to innovate. Nest thermostat or iPhone are great examples of innovation driven by design. Yet, I have to also say that I don’t like when design takes the main role. What do I mean? You probably that that situation when design dominates the function. Or, that situation when design negatively impact usability.
In these cases, I would choose skeuomorphism over something else. I believe that design and function should go hand in hand. One should support and empower the other. Don’t make something pretty just for the sake of it. Don’t let this decision have negative effect on user experience. Otherwise, I think that you will fail as a designer.
The hippie ages of flat design
Right after skeuomorphic design, the web started to look a little bit flat. We got rid of shadows, gradients and other visual cues creating sense of depth. As a result, everything suddenly started to look similar. Yes, you guessed it. The next design style that came after skeuomorphism was flat design. The rise of flat design was quite fast and the curve of its adoption was steep. Almost over the night, many websites completely changed their look to look more flattish.
It didn’t matter whether you liked flat design or not. It was almost everywhere and you couldn’t run from it. What was worse, when you opened your favorite web design blog, there it was again. There was a huge amount of articles about flat design popping out every day. It was more than clear that flat design is the new hot thing in web design. Flat design became a trend and a buzzword. If you worked as a freelance web designer, your clients probably wanted their websites to look flat.
If you worked for a company, and it was not too conservative, its website started to slowly lose the depth. As a result, the world was finally really flat. For a short time, flat design looked like a perfect fit for. It looked like we finally had something we can use everywhere. Some of us though that, in flat design, we finally found our design version of paradise. Then, first trouble started to emerge.
The first trouble in flat paradise
Just like with every design style, first waves of resistance started to emerge. People in design industry started to criticize flat design for some of its characteristics. In contrast with skeuomorphism, the main argument against flat design wasn’t lack of innovativeness. The fact is that the opposite was true. In the beginning, many people though that flat design was too innovative. Some people even criticized flat design for its bold nature.
These opponents also didn’t like its departure from design conventions established by skeuomorphic design. Nevertheless, none of these arguments is plausible from the view of design or functionality. Was the innovative nature of flat design harmful for functionality of flat interfaces? No. Innovation is never inherently bad by its nature. However, flat design had at least one serious flaw. What was this problem with flat design that caused troubles in flat paradise?
When layout or interface is completely flat, it can be hard to recognize interactive elements. Let me say that in different way. User may not recognize what is a button and what is a part of background or decorative element. Remember, flat design doesn’t use any shadows or gradients. There is nothing that makes interactive elements pop out from the page. Sure, this can be partially fixed by using the right colors. If designer use wrong color, user may end up clicking on everything.
The problem is that this will not fix the problem completely. If you have a website using bold colors, button with bold background color may still look like a decorative element. The result is that user doesn’t know what is clickable or not. Another problem with flat design was that many layout looked the same. Well, this can be said about any design style. Just take a look at dribbble.
Material design enters the stage
This is where material design enters the stage of web design. It was this problem with unrecognizable interactive elements what material design attacked head-on. In material design, there is a huge emphasis on depth. There is no way you can design in this style and ignore z-axis. In a fact, depth is one of the fundamental principles of material design. However, now we are skipping some interesting parts of the history of material design.
The history of material design
In the beginning, there was nothing called material design. Before this design language got its, now well-known, name it was called Project Kennedy. The main goal of this project was to unify inconsistent design styles used across Google’s products. Back then, everything looked different. It was sometimes quite difficult for regular user to recognize what product is developed by Google. And, we are now talking only about universally accessible Google’s web-based products.
What if you would want to compare these web-based products with the environment of Android? In that case, your chances were close to zero. The design of android looked different from these products. What’s more, apps for Android devices also looked different from the design language of Android. The result was something very inconsistent. Fortunately, this was about to change in 2011. That year, Google started to work on unification of the ecosystem of its products.
This whole “redesign” started with just web-based apps and some of the Google’s products released for iOS. For Android, there was another project called Holo. Holo was successful at improving the design old Android interface. However, it was still looked too different from other products under the project Kennedy. The next logical step was to get all Google’s designers together and let them solve this problem. This happened in 2014.
Today, we all know what was the result of this meeting. It is called material design. It is Google’s new design language that aims to unify its whole ecosystem. No more inconsistencies. From now, all devices should use the same design language. Be it car, watches, smartphone, computer or smart TV. User should be able to switch between all these devices without having to learn how to use it. All icons, dimensions, animations and principles has to be the same.
Three core principles of material design
What is the foundation of material design language? There are three core principles that has to be respected through the ecosystem of Google’s products. The goal of these three principle is to build on classic principles of good design. However, they also has to provide space for innovation and possibility of technology and science. These principle are following. First, material is the metaphor. Second, material design language is bold, graphic and intentional. Third, in material design, motion provides meaning. Animations are not just decoration. They serve specific function.
Material is the metaphor
The first principle of material design is about material being a metaphor. How should you understand this? Well, the underlying concept is to use space and a system of motion together in a ration way. It is about providing specific experience from interacting with it. Google’s design team based the theory behind material design language on tactile reality. It is inspired by real objects that exist around us and we interact with every day. Google’s designers took the metaphor of paper and ink and translated it into digital world.
In material design, everything is a layer placed on z-axis. This is the biggest difference from flat design. Material design put huge emphasis on depth. Elements are not placed on a single layer. Instead, there are many different layers. The result is that you can think about layout in material design as a 3D world rather than just 2D. This is also the biggest change from flat design. Material design is not afraid of using depth and shadows.
It tries to replicate the experience you have when you interact with objects in the real life. Material strives to provide visual cues to make your experience more real-like. In the real world, nothing is completely flat. Even piece of paper has some depth. When you use these cues, you will help your users quickly understand affordances. This is one of the beauties of material design. Objects can move through the layout not only on the x- or y-axis. They can move from the back to the front.
Material design uses the combination of light, surface and movement. This way, Material can convey how objects exist in the space and how they interact with other elements.
Bold, graphic, intentional
The second principle of material design language is being bold, graphic-based and intentional. From this point of view, material design uses similar properties like flat design. It uses bold and simple color schemes. It focuses on clear and readable typography. And, it also embraces the white space. One of the principles of good design, specified by Dieter Rams, is unobtrusiveness. The highest priority has to be put on users’ actions, not the colors or layout.
Design shouldn’t distract users. Instead, it should be their guide. Design should help users interact with UI elements and the device itself. And, this interaction has to remain both, natural and visually pleasing. I already mentioned that material design put emphasis on clear and readable typography. This is done by utilizing various elements from print design. These elements are space, scale, grids, imagery and color. However, these elements are not used just as a decoration.
Material design uses these elements with the goal to create visual hierarchy, meaning and focus. This means one thing. There are no accidental or random choice in the terms of color scheme. The same is true for imagery and typography. Every choice designer makes is deliberate. Every color and photo has meaning, purpose and function. In UI designs based on material designs, there is focus on large-scale typography, sufficient amount of white space and bold colors. This helps immerse the user in the experience.
If you are working on UI based on material design, let imagery and photography take dominant position in the layout. After that, choose fonts that are easy to read across wide range of devices and sizes. Remember that content has to readable in all font sizes. Finally, choose simple palette of bold colors. These colors should have high contrast, but work well with each other.
Motion provides meaning
The third and last principle of material design is focused on motion. Although we are in design for digital world, we have to consider the physical properties of objects. Every object in the real world has some weight, height and so on. What’s more, there are other physical properties designers often ignore in digital world. For example, there is an inertia. When one object collides with another there is certain reaction. You know, Newton’s laws of motion.
In the real world, imagine you drop something on the floor. That object will never suddenly appear there. There is always some process the object has to go through to get from one place to another. When you drop something, it will have to move in downward direction for certain time. When it hit the floor, it can either bounce or just stop. This action will depend on physical properties of that object. Material design tries to bring this physicality into the world of ones and zeros.
Well, material takes motion farther. Here, the initiator of motion, or the prime mover as Google calls it, is the user. It is action made by user what initiates the motion. In this sense, users’ actions influence and transform the whole design. I should also mention that all these actions occur in one environment. Or, it at least looks like it. Objects and actions occurring in only one environment keeps the user experience flowing without breaking it.
Infinite scrolling offers similar experience. When you remove the necessity to browse through pages you also remove any delay. Think about the experience of observing your environment. When you look around yourself, the picture you get is smooth. There are no stops or delays. Nonetheless, the use of motion has to be meaningful and appropriate. It has to help direct attention and provide feedback.
The main components of material design
After we discussed the core principles, let’s take a look at the components of this design style. At this moment, a huge number of designers, and people in general, know this design style in relation to cards. Let’s be honest. Today on the Internet, it is often quite hard to avoid seeing card-based design. If you like to browse galleries such as Behance and Dribbble, your chances to avoid cards are close to zero. Many of these card-based layouts are also based on material design.
Despite this, this design style is not only about cards. Material design comes with four main components. Don’t get wrong. I’m not talking about components in the terms of modular web design or Atomic design. Instead, we are talking about components in a broader sense. These four components are colors, typography, imagery and animations. Well, five. Material has also guidelines for writing. Let’s now take a look at each of these components.
Colors
The first component we will explore are colors. In print design, color has a prominent role. It helps designer to guide the eye of the user. It also helps her create visual hierarchy and flow in the layout. Designer can use color to increase the dominance of one element while suppress another. Color also helps her evoke specific mood and emotions. From the point of psychology, every color has some meaning. And, material is hugely influenced by print design.
Color palette used in material design is composed of two types of colors. These colors are main and accent. Material encourages designers to use main colors for large areas. Some example of these areas are header, navigation, action and status bar. The best place for using accent colors is for smaller elements users can interact with. For example, buttons, indicators, controls, strips and so on. Remember that accent colors are designed to attract user’s attention to the key elements.
One rule of thumb for creating color palette is using limited number of colors. How many colors? First, select up to three hues of main colors. This should be your limit. Second, select one accent color. In other words, your palette should contain four colors at max. Honestly, I like to limit my color options to just two or three colors. One color is for background, one for base and one accent. You can also think about these colors as primary, secondary and accent.
When you work with primary colors, you can use them as much as you can. There are usually no constraints except your imagination, creativity and taste. In case of use of secondary colors, you should be more careful. These colors are the best to indicate related or more important action or information. Secondary color can be also a lighter or darker variant of your primary color. What about the last color, accent? Save it for special cases. Use it on buttons, progress bars, links and other interactive elements. You can also use accent color for highlights.
Typography
What is more important element in print design other than typography? Probably nothing. When you take a look at some of your favorite magazines, you can see two main functions of typography. First, it helps define clear structure of the content. Typography helps reader distinguish individual typography elements. Second, it helps reflect brand and identity of the magazine. Print designers achieve this by using the right font style, weight, size and composition.
If yo want to follow material design on 100%, choice of typeface is quite easy. Material encourages to use Roboto. In a fact, some people even criticize it for such a narrow selection of typefaces. However, there are three good reasons to use Robot. First, it is easy to distinguish different typography elements such as header title even if the size differs only slightly. Second, Roboto remains readable even at smaller sizes. Lastly, Roboto is very well optimized by Google.
One of the characteristics of clear and readable typography is balance in contrast. When your text color is too close to the color of background, you are asking for troubles. When the contrast between these two colors is too low, text becomes hard to read fairly quick. It will get even worse when some of your user has some vision deficiency. Unfortunately, going over the board with contrast may not be the best way to fix this problem.
When text has too much contrast, it can be hard to read as well. Think about light-colored text on dark background. The best is to always test your colors with some contrast ratio calculator. Line length is also important. When line is too long, readability of the text starts to suffer. A good rule of thumb is to aim for 60 or 70 characters per line.
Imagery
The third component of material design, and current trend in web design, is use of imagery. Material encourages us to use imagery and illustrations as we want. There is just one simple rule. Every image has to be used with intention. You shouldn’t use images, photos and illustrations just for decoration. You should use imagery to evoke mood, convey message and help user engage with the design. Every image has to be connected to the design and relevant.
Imagery should improve and enhance the overall experience. It should support your content and be relevant to the context. You can also use imagery to describe your products and differentiate it. In this way, imagery is a great way to make your design distinct, to make it stand out. However, keep one thing in mind. When you decide to use imagery, stay away from stock images. Imagery is about having distinctive voice. It is about having something special, something only you have.
Imagery is also about creativity. This is the exact opposite of stock images. First, stock images are cheap and they look cheap. Second, everyone can stuff layout with stock images. This is actually what happens quite often. Third, stock images are not authentic. The vast majority of stock images look artificial. You may see smiling people, but you know that these people are just faking it. Fourth, there is nothing creative about stock images. Most of them follow the same style.
Fifth, original imagery has the power to create story that will captivate your users. In this way, it can help you humanize your design and evoke mood through visual storytelling. Stock images will never achieve this. Stocks are bland and uninteresting. Stocks also contain no message or context. Therefore, stick to and use only original imaginary.
Animations
The last component of material design is animation. Well, I should say meaningful animation. As we discussed, nothing just appear out of nowhere in the real world. There is always some cause and effect. Between those two, there is a process composed of a number of steps. The problem is that we often forget this fact. Material design encourages us to use motion to provide users with feedback. Here, motion is the answer to actions users make.
Animations and motion can also help us describe relationships between elements and their function. It can guide user’s focus across the layout. It provides feedback and assures user that his action was registered. Otherwise, user may not know that something is happening in the background. Submitting a form is a great example. We can use animations to tell user that his message is on the way. The same thing applies to button for loading content.
Imagine there is some delay between initial and final state. Without any clue, user may think the button is broken. This is less likely to happen if you use some animated spinner or progress bar. Then, user knows that something is actually happening. Well, at least it will look like it. Lastly, animations can be one way to enhance and polish the overall experience. Animations can be a functional cherry on top. Just make sure to make animations feel natural. The best will be if you take a look at material design specifications created for animations.
A handful of tips for material design
Let me now give you a number of simple tips. I hope these tips will help you implement material design in your projects. The first tip is to polish every detail and take care of the moving elements. All buttons, sidebars, headers, toolbars, dialog and fabs are located at specific point on z-axis. Remember that all these elements exist in 3D space, not just 2D. This means that you may sometimes change position on z-axis in order to avoid collisions.
The second tip is to use fabs only when you really need them. Fabs are floating action buttons. Many people think that fabs are necessary part of material design. This is not true. Fabs should be used for key actions in the UI. Otherwise, you should use different element. A good use of fab is creating new post on blog or creating new item in your app. Wunderlist app is a good example. The third tip is that you don’t have to squeeze everything into a card.
This is another misconception about material design. A lot of people think that material design means using card-based layout. Well, it doesn’t. Remember that cards has specific function and purpose. Cards are the best fit only for situations when you have content containing different elements. Blog post card is a good example. When you have photo with some text and links. The fourth and last tip will be about transitions and animations.
Don’t animate everything. This is one of the mistakes I did. I used animations and transition in abundance. It is true that material design encourages us to use animations. However, it also says that we should use them in a meaningful way. You shouldn’t use animations for decorative purposes. Use animations mostly to provide users with feedback or enhance user experience.
Closing thoughts on material design
Congrats! You’ve just finished this ultimate guide to material design. I hope this article helped you understand how to implement this design style in your work. We discussed a lot. We talked about what was before material design and what this style is about. Then, we discussed a handful of tips to make your way to this design style easier. The only thing we didn’t address is the future. I don’t have an answer for this question. I think that we have to wait and see what the future holds.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
