Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the web.Introduction – Material Design Official Guide
Material Design is Google’s new design concept behind all its applications – mainly on the Android system. This is based on a set of guidelines in order to present content in a more realistic and functional way with a unified/standardized look and feel across all interfaces, with the ultimate goal of improving the user experience on the platform.
Before Material Design came along, one of the big problems with Android was the lack of visual unity in the interfaces. The way a layout would look on a smartphone was not the same as on a tablet, mobile phone or even on a smartwatch (including vertical and horizontal orientation), which in turn did not match Google’s services.
It all started in 2010 when skeuomorphism emerged. This was a design technique that made the user interface (UI) objects look more realistic and at the same time it was widely used in website’s backgrounds and icons.
Regarding to the skeuomorphic icons, per example:
- The Camera app’s icon resembles the lens of a camera.
- The Clock app’s icon looks like an old analog wall clock.
- The Calendar app’s icon looks like a flippable calendar card.
Skeuomorph UIs ended up proving to be too distracting because of their lifelike qualities. Adding to that, the realistic attributes of the design weren’t used for any reason other than to be trendy.
2. Flat Design
The subsequent design trend, flat design, aimed to strip away the excess and superficialism of its predecessor.
The icons (as well as the icons for many long-standing apps) have become flat and had most of the realistic qualities taken out of them.
While flat design continues to persist to this day — since minimalism and good, clean design will always be key characteristics on design — there was a major flaw that needed fixing.
3. Material Design
When creating the concept of Material Design, Google designers took several sheets of paper and stacked them together to create a structure. This is where the code name Quantum Paper – alternative name for Material Design – comes in. In other words, the “digital paper” can change shape (e.g. stretch or fold), but still retain a sense of realism. There is an evolution from “flat design”, creating a tridimensional space to create the layering effect: the Z-axis (depth) comes into play and shadows are added to the different shapes.
Material Design was eventually launched in 2014, introduced by one of the people responsible for its development – Matias Duarte (now Google’s Vice President of Design). It was soon clear that Material Design came with a proposal focused on the quality of the user experience and that it would be in constant evolution.
The entire material design system, its design language, and all its documentation you can access at material.io.
Google decided to summarize all the ideas behind its new concept into principles that are clear about the aesthetic:
1: Material is the metaphor
A material metaphor is the unifying theory of a rationalized space and a system of motion. Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic.
Our on-screen design should be a metaphor for things outside the screen, especially paper and pen.
This means that on-screen buttons should look like real-life buttons, elements should have shadows and “the fundamentals of light, surface and movement” need to be respected.
Material design uses the idea that the user experience is enhanced when digital elements are equivalent to the real world. For example, a pop-up ad – it should have a subtle shadow, because all 3D objects have shadows.
2: Content is bold, graphic, and intentional
Bold design creates hierarchy, meaning, and focus. Deliberate colour choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity.
Everything we design should be deliberate and big. There is not a focus on using less striking colours. The argument here is that materials design aims to guide a type of design that makes immediate sense/attracts the user’s attention right away by being easy to follow (e.g. strong colours, titles) and creating a clear and organised experience (e.g. with negative space).
3: Motion provides meaning
Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.
Motion can be used to help guide the user and create meaning and is especially useful for providing feedback to the user.
For example, on Android, when you hold down an icon, it pops up a little to say it’s ready to be moved. That little movement is a great way to communicate with the user. That’s what material design is all about.
These are some of the rules that help the web designer create websites and apps according to the principles of Material Design, always with same goal to enhance the user performance on the designed product and unify the presentation within the different interfaces.
The objects presented in Material Design have some immutable characteristics:
– Occupy unique spaces in the environment.
– Are impenetrable: objects cannot “punch” through each other as this is also not possible in the real world.
– The shape is mutable (but they change size only when they are at the same level of the z-axis)
– Are not foldable.
– Can merge with another object (while they can also break, separate and patch);
– Can move in any axis (x, y and z) in a linear way and if the final position changes only in one axis.
– Responsiveness should consider only the triggered objects and not apply animation to all materials on screen.
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.
Environment and Shadows (depth)
All Material Design objects have x, y and z axes. That is, they are 3D and have length, width and height relative to the background.
This tridimensional environment has two light sources: ambient light and key light. They are combined creating the illumination present in the elements.
Lighting is extremely important in Material Design. Since all objects follow the same z-axis (height), it’s only the shadow they cast that will differentiate which is in front and which is in the background.
On the other hand, shadows are the 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, it is presenting the visual hierarchy of the elements and the layers they are on.
As introduced in the principles of Material Design, movement is a crucial element for its functionality.
All the kinetics of the methodology is based on natural and real movements. This way, it becomes very fluid and pleasant for the user.
There are some precepts of motion used in Material. For example, the elements that have more energy are very responsive to what the user asks for, delivering quickly without compromising fluidity. Also, components move naturally, with accelerations and decelerations occurring asymmetrically, just as gravity naturally does.
Material’s kinetics are also environmentally aware, changing the position of elements according to user intent and the movement of a major component. And, like all object movement, this one should also be very clear (with no obstruction or unnecessary animations complicating the movement) and should shift focus from one location to another.
Like object elevation, animation also changes from platform to platform, as devices with larger screens have a much larger area for a component to cover in the same amount of time than on a very small screen.
Material Design has its own colour palette designed to be harmonious, contrasting and eye-catching. Colours can be used to create visual hierarchy – defining which elements attract more attention – and also to define the state of something.
For example, if an element is wrong you can represent it with red, and when it is right, with green.
The use of colours must ensure sufficient contrast between visual components. In the case of text, it is not the best to use solid colours, but to use different opacities of the same colour.
The same happens to differentiate highlights in the texts, either light colour on a dark background or a dark colour on a light background. In both cases, less transparent colours get more focus.
This is an important element that makes a great difference when it comes to typography and text layout. It is a most effective tool to create focus, grab the user’s attention and lead them to a particular element/area.
The system icons must easily allow the identification of the functionalities triggered by them or else the identification of the meaning of the content next to each one of them, a publication date, for example.
They must be simple, symmetrical and have all the same colour in the application, except for those present on low contrast backgrounds, these must still have a single colour, but one that contrasts with the background colour
Again, each icon is designed to feel tactile and real. The design feels as real as if it were a sheet of paper cut and folded into iconographic shape.
Material Design uses a very versatile grid for iconographic creation and can encompass many different formats in a single pattern. All formats can be obtained from Material Design’s icon grid.
Images and illustrations
Images are more than just decoration in Material Design. They are a very powerful tool to communicate a product and differentiate it from the competition.
Some basic principles of using images in Material Design define that they have to be relevant, informative and attractive. This way, they will assist the user and increase their engagement with the product.
It’s recommended that the images used have a relation with the subject matter. For example, when the topic is about an artist or a certain food dish, it is important to look for photos first, as it is something more specific. For more general representations, such as cinema tickets, vehicles, buildings, etc., illustrations are much more attractive.
It is also important to keep in mind that in Material Design it is not the best option to use standard photos from image banks. They do not convey authenticity and do not differentiate a given product for creativity and originality. The best is to opt for photos that tell stories, that are specific when necessary and that have a focus to aid the user’s understanding.
In this way, it will be possible to create a narrative for the images and humanize the product.
Material Design has two standard fonts used in various products: Roboto and Nato.
Roboto is the font developed by Google with the goal of being functional across a wide range of devices. It has a slightly wider and rounded shape to provide greater clarity when reading and to be more optimistic.
The Roboto family has the following variations: Thin, Light, Regular, Medium, Bold and Black, plus italic variations.
(image – Roboto font variations)
Nato is responsible for supplying certain languages with different alphabets that Roboto does not support, such as Chinese, Japanese, Korean and Indian.
Its variations differ in relation to the written language. In Chinese, for instance, its family has: Thin, Light, DemiLight, Regular, Medium, Bold and Black (almost like Roboto). In Thai, for example, there are only Regular and Bold.
To offer a familiar experience to users, it is essential and advantageous to use the most common Material Design UX (User Experience Design) patterns:
– Promote the main UI action with a floating action button (FAB).
– Show the brand of the product in question, navigation, search and other actions with the app bar.
– Show and hide app navigation with the navigation drawer.
– Use one of several other Material Design components for a app layout and navigation, like collapsible toolbars, tabs or a navigation bottom bar.
– Where possible, it’s best to use the default Material Design icons. For example, the “menu” button in the navigation drawer should use the default “hamburger” icon.
“Design is the art of considered creation. Our goal is to satisfy the diverse spectrum of human needs. As those needs evolve, so too must our designs, practices, and philosophies.
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.
This is Material Design.”Matias Duarte, Google’s Vice President of Design
In my opinion this thought is the key point that reflects both the origin of material design, as well as the constant evolution that are happening – for example the fact that it is adaptable for iOs systems, Flutter, etc.
Material Design adopts the fact that we all still live in the world outside screens and in the same way that several services/businesses have been molding themselves to the online world, this language is the representation of how important it is to have the same (and even higher) concern in designing the same transformation and give the best user experience, enhancing the way he can explore the different interfaces, as well as get to know the product/topic.
Simultaneously, for the web designer, through the set of guidelines and principles of Material Design, these not only help to understand and apply the fundamentals in the best way, but they contribute as well to an effective input of how the language can evolve ( for example, the recent emergence of the dark and light theme).
The efficiency of Material Design as such an impact when it comes to interfaces, that we see many web designers that may not even know about the language in depth, but intuitively apply some of the techniques, where consequently users interact with them (exp: clean design, whitespace vs. typography, hamburger icon representing the menu, dragging to the right side of a topic to see more options, FAB, etc.)