Material Design is Google’s design language, which is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Originally introduced in 2014, Material Design has gotten more popular recently, as many designers have started integrating it into not only their Android projects but other web-bound projects as well.
Is material design for you?
Something that I’m sure you’ll agree with is that great designs are unique and functional. With “functional” probably being the more important parameter.
Therefore, when thinking about adapting the material design principles and creating digital material, first try to relate
them to the goals that you want to achieve with your design.
Mainly, answer the following question for yourself, “Are material design guidelines and principles in line with what I want to achieve?”
1. Get familiar with the main resource
If you want to learn material design, the best starting point possible is the official resource released by Google
It’s being kept up-to-date and it explains all important details about material designs that you need to know to build a great User Experience.
What’s great here is that it doesn’t only cover Android-specific aspects of material design, but discusses material design as a whole in relation to any app design or web design project.
I highly encourage you to at least get through the first chapters of that
documentation to get familiar with the basic principles.
2. Understand the “material” in material design
The name material design is far from coincidental. Basically, the whole
idea behind the principles of material design is to make designs resemble the
real world and real-world objects, but
only at a certain level of abstraction.
You don’t want to make your design look overly realistic up to a point where it impersonates the real-world equivalent of a given element. What you do want, however, is to convey the idea of “material” 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.
Here’s the thing. We as humans understand materials. We know how metal
feels, we know what a wooden desk looks like. We can also distinguish layers of
stuff lying on other things. For example, we can recognize a pencil on a piece
of paper on a desk.
In material design, you need to learn how to convey the same hierarchy of elements by only using the absolute minimum of design tools, such as shadows, shades, etc.
Visual hierarchy in design3. Use shadows to convey hierarchy
The original flat design didn’t have shadows and it caused usability issues. In material design, shadows are no longer considered as unnecessary chrome. Surface, edges, realistic shadows and lighting are the main tools of material design. They help designers to covey the properties of real-world objects. Adding depth to your designs is crucial, but you have to be careful to only use the minimum effective dose.
For instance, shadows are your main tool to convey the hierarchy of
various elements that combine into a complete design. By deciding what casts a
small realistic shadow on what, you’re presenting the visual hierarchy of the
elements and the layers they are on.
What matters here is the overall structure of the design and if your
shadow structure as a whole makes sense to the human eye – if it portrays the
concept of real materials.
4. Use bold colors
Color palettes are an essential part of the
design language that a team uses when creating products. Being bold,
graphic, and intentional is one of the three main principles of material
design.
Material design surely is a minimalist type of design. In other words, it
doesn’t get to utilize many design tools and stylistic tastes. Therefore,
designers have to go around this restriction and find another way to create
meaning and create the right focus.
One of the few things that are left is color. More accurately, bold color, and oftentimes loud colors.
Bold colors serve a really important role in material design (and flat
design too, for that matter), they make things fun and make interacting with
the design enjoyable to the user.
An example of a colorful design:
Using color in a design5. Use primary color and accent color
To create a great user experience, it’s
recommended to limit your selection of colors by choosing three hues from the
primary palette and one accent color from the secondary palette.
The way to adapt this to any type of design could be to select three hues
that will make up your primary palette, plus one color that’s going to act as
the accent.
Your primary colors can be used for things like backgrounds, fields,
boxes, fonts, and other key elements of the interface. The accent color is just
what the name suggests – it gives you additional leverage when you want to
display the main element on a given screen/page.
Needless to say, the accent color needs to be in high contrast to the
primary hues.
A log-in screen vs a splash screen6. Utilize whitespace
Material design gets a lot of ideas from traditional print design and the
principles it brought us.
For instance, whitespace is an important element in any material design,
and it can improve your typography and text layout immensely.
In fact, whitespace is the most effective tool for creating great user experience. Whitespace
creates focus, grabs the user’s attention
and brings it to a particular element (something that beginner designers often have
trouble understanding).
So in short, utilize some large-scale typography for headlines, add a lot
of whitespace, and don’t be afraid to have a lot of blank spaces in your
designs overall.
A sign-up screen on a webpage.7. Use edge-to-edge images
Material design is really image-friendly. What I mean here is that if you
decide to include any images in your design, you should give them a leading
role.
Images in material design are featured edge-to-edge – in a full-bleed
manner. This means that there are no margins between the edge of the image and
the edge of the window/screen.
When done correctly, this creates a truly
memorable user experience for the person who uses a product, and also
gives the designers some additional design tools among the rather small set of
pre-approved shadows, color palettes, and layers.
Twitter banner using edge-to-edge images.8. For image-based designs, extract colors from the images
Speaking of images, Google encourages us to extract the colors from the
images that we’re using in our designs, and then make them part of the color
palette.
It’s hard to argue with this reasoning. Doing such a thing is sure to
create a consistent experience for the user, making the impression that
everything falls into place nicely and just fits overall.
Visual representation of taking colors from original image.9. Incorporate motion
In Google’s own words, motion provides meaning.
Material design utilizes the same principle and uses motion to interact
with the user, effectively letting them know how to use the design.
What to put in motion? Simply give the user some feedback about the action they’ve just performed. For example, did they click a button? Was there an animation to confirm that the input was received.
The versatility
of Material Design motion language made it possible to use it in various
products. Even large-scale products such as YouTube and Google Chrome
incorporated motion in core interactions.
Motion being used in an app10. Make motion authentic
“Authentic” is the keyword here. The days of fake motion – things just
moving about the screen – are long gone. Right now, if you’re going to
incorporate motion, you might as well make it real according to the laws of
physics – to make it align with the way real-world
objects interact with each other.
Google devotes a whole section in the material design guidelines to the concept of authentic motion
In those guidelines, they explain how to introduce mass and weight,
acceleration and deceleration, and how easing works (a way of making animation
seem more natural by changing the speed of movement at different moments in
time).
In material design, motion is only as good as its ability to mimic the
motion of real-world objects. This is the only way in which motion will enrich
the interface and make it more understandable to the user.
11. Make everything responsive
One of the main principles of material design is to make the resulting
work accessible and usable on any device and any screen size. Above all else,
the goal is to make the experience consistent. That way, the user doesn’t get
confused if they switch from one device to another, as they don’t get a
completely new interface displayed to them.
With good material design, they can transition without any obstacles and
just continue using the app/site right from the point they left off.
Naturally, this means that the design needs to be responsive. Luckily,
with modern frameworks, you get much of the scaffolding already built, so
making your work responsive shouldn’t be that big of a challenge.
12. Remember, everything’s in the details
One of the main elements that make material design so difficult to execute
flawlessly is that it’s so heavily simplified.
For instance, with skeuomorphic design, the guideline was simple, “make
every element of the design resemble its real-life equivalent as closely as
possible.”
This is where things like this came into existence:
Skeuomorphic calculator in Apple iOS 5.Or this:
With material design, it’s a bit simpler, yet more complicated at the same
time.
For the most part, material design is a
game of details. You need just a little realism to convey the main
functionality and purpose of the thing you’re designing, but at the same time,
you don’t want to make things too skeuomorphic.