New to Material Design? 12 principles you need to know
Material Design is Google s design language, which is a great guide to visual, dynamic and interactive design across platforms and devices. Originally introduced in 2014, Material Design has grown in popularity lately as many designers have started integrating it into not only their Android projects, but other web projects as well.
Material design for you?
I m sure you will agree that great design is unique and functional. Probably the most important parameter is “functionality”. Therefore, when thinking about adapting material design principles when creating a digital product, first try to connect them to the goals you want to achieve with your design.
Basically, answer yourself the following question: “Are the principles and principles of material design consistent with what I want to achieve? “
1. Get to know the main resource
If you want to explore the design of a material, the best place to start is an official resource from Google. It is constantly updated and explains all the important material design details you need to know in order to create a great user experience.
What s nice here is that it not only covers Android-specific aspects of material design, but also deals with material design in general in relation to any application or web design project.
I highly recommend that you at least go through the first chapters of this documentation to familiarize yourself with the basic principles.
2. Understand “material” in material design
The name for material design is far from coincidental. The whole idea of material design principles is to make the design look like the real world and objects in the real world, but only at a certain level of abstraction.
You don t want your design to look overly realistic to the point that it looks like a real world object. What you want is to convey the idea of ”stuff” to the user. In other words, material design uses the physical world as inspiration and creates a new visual language that resembles some of the properties of the world. That s the problem. We humans understand materials. We know what metal feels like, we know what a wooden table looks like. We can also distinguish between levels of material, and how they relate to each other. For example, we can recognize a pencil on a piece of paper on a table.
When designing materials, you need to learn how to communicate the same hierarchy of elements using only the absolute minimum of design tools such as shadows, tints, etc.
3. Use shadows to convey hierarchy
The original “flat design” had no shadows and this caused usability issues. In material design, shadows are no longer considered an unnecessary element. Surface, edges, realistic shadows, and lighting are the main material design tools. They help designers represent the properties of real objects. Adding depth to your designs is critical, but you must be careful to only use the minimum effective dose.
For example, shadows are your main tool for conveying a hierarchy of different elements that come together to form a complete design. By deciding what to cast a small realistic shadow on and on which element, you represent the visual hierarchy of the elements and the layers on which they reside.
The overall design structure is important here, your shadow structure as a whole makes sense to the human eye – if it reflects the concept of material design.
4. Use bright colors
Color palettes are an integral part of the design language used when creating products. Bright, clear and rich, the main qualities of color in material design.
Material design is definitely a minimal design type. In other words, you don t need to use many different design tools and styles. Hence, designers must work around this limitation and find another way to convey meaning and create the right focus.
One of the few things that remain is color. More precisely, pure color and often bright colors. Vibrant colors play a really important role in material design (and in this case also in “flat design”), they are attractive and make the interaction with the design pleasant for the user.
5. Use a foreground color and an accent color
To create a great user experience, it is recommended that you limit your color choices to three shades from the primary palette and one accent color from the secondary palette.
A way of adapting this to any type of design could be to choose three shades that will make up your main palette, plus one color that will act as an accent.
Your primary colors can be used for things like backgrounds, margins, plates, fonts, and other key interface elements. The accent color is exactly what the name suggests – it gives you extra leverage when you want to display the main element on the screen / page. Of course, the accent color should contrast with the main shades.
6. Use the void
Material design takes a lot of ideas from traditional print design and the principles that go with it.
For example, emptiness is an essential element in any material design and can enhance your typography and text boxes.
In fact, voids are the most effective tool for creating a great user experience. Emptiness creates focus, grabs the user s attention and transfers it to a specific element (something that is often difficult for novice designers to understand).
In short, use large typography for your headlines, add air, and don t be afraid to have a lot of blank spaces in your designs in general.
7. Use images from edge to edge
Material design loves images. I mean, if you decide to include any images in your design, you have to give them a lead role.
Images in Material Design are used from edge to edge – in full. This means that there are no margins between the edge of the image and the edge of the window / screen.
Done right, it makes an impression on the person using the product and also provides designers with some additional design tools among a fairly small set of shadows, color palettes and layers.
8. For image-based designs, extract colors from images
Speaking of images, Google recommends that we extract colors from the images we use in our projects and then make them part of the color palette.
It s hard to argue with that. This action creates the impression that everything has fallen into place and just looks harmonious on the whole.
9. Use animation
According to Google, animation makes sense.
Material design uses the same principle and uses animation to interact with users, giving them an idea of how to use the design.
What to animate? Just respond to the action you just performed. For example, the user clicked a button? Whether there was an animation to confirm that an action was taken.
The versatility of the animation language in material design has made it possible to use it in a variety of products. Even major products like YouTube and Google Chrome have incorporated animation into core interactions.
10. Make your animation faithful
“Credible” is the key word here. The days of animation – which simply move across the screen – are long gone. Now, if you are going to turn on animation, you can make it valid according to the laws of physics – to match how objects in the real world interact with each other.
Google devotes an entire chapter to Material Design Guidelines for Animation.
In these tutorials, they explain how mass and weight, acceleration and deceleration behave, and how deceleration works (a way to make animations more natural by changing the speed of movement at different points in time).
In material design, animation is only good if it can mimic the movement of objects in the real world. This is the only way that animation will enrich the interface and make it more user-friendly.
11. Make everything responsive
One of the basic tenets of Material Design is to make the resulting work accessible and usable on any device and screen of any size. First of all, the goal is to make a consistent design. This way, the user will not be confused if they switch from one device to another, since they will not have a completely new interface displayed.
With a well-adapted design, they can navigate without any hindrance and just keep using the app / site right from where they left off.
Naturally, this means the design must be responsive. Fortunately, with modern frameworks, you already get most of the workload, so adapting your work shouldn t be that big of a problem.
12. Remember, it s all in the details.
One of the main elements that make material design so difficult to do is certainly that it is so oversimplified.
For example, with “skeuomorphic design”, the guide was simple, “Make each design element as closely resemble its real-life equivalent as possible.”
Examples of skeuomorphism:
With material design, this is a little easier, but at the same time more difficult.
Much of material design is a play of detail. You only need a little realism to convey the basic functionality and purpose of what you are developing, but at the same time you don t want to make things too realistic, as is the case with skeuomorphism.
Original: Nick Babich
Translated by: Yunusov Pavel