Google released visual design language to standardize the design of Android, Chrome OS, Web, and iOS apps with the goal to present its users with a unified UI experience across platforms and devices.
Many designers across the globe are already using flat design elements in their design projects. We have seen flat design in the past extensively from the house of Apple and Microsoft. Google Material Design is more or less an extension of flat design and attempts to give flat design a better structure with written design principles and guidelines.
One of the biggest reasons for such a great adoption to material design is that there was no existing comprehensive visual design language that designers could refer and Google bridged this gap by releasing the visual design language.
Current State of Material Design
If we talk about current state of material design, it is one of the top trends of the year and everyone is upgrading websites and mobile apps with material design principles. The leader in the game of course, without doubt is Google.
Google has updated most of its websites and android apps with Google Material Design principles. 3rd party app and web designers are fully on boarded now with material design guidelines.
The beauty of Google material design’s is that it goes really well with the other major design trends of modern times like card based design, responsive design, flat design principles and ghost buttons to name a few.
It is damn real easy to implement material design principles in almost all of these modern web design trends and the result is beautiful and consistent web and app interfaces across platforms and devices.
Material Design and Creativity
I get to hear this all the time from many people around that material design language tends to put bars on the creativity and imagination of web designers. Really?
Visual design guidelines including material design are more about standardization and do not take away the innovation and creativity. Designers always have been designing within some kind of boundaries, viewport width is a boundary – isn’t it?.
Google Material Design stretches the boundaries a bit further and attempts to make the design process consistent and ease out the ever growing web design complexities.
Let the creative juices flow all through in…to the canvas!!
What is Google Material Design?
Over the last couple of weeks we have been studying the visual language published by Google and observed that the details provided by Google appear too much scientific and that too with a spice of philosophy.
This is particularly true when we try to understand the “material” in material design and attempt to figure out how real world material behavior and properties can be incorporated in the design practices.
Theories at times tend to be overwhelming but strengthen the underlying fundamentals and guide us to make right choices when it comes to actual implementation and practice.
Here we attempt to uncover the material of Google’s material design – the visual design language.
Understanding Material of Material Design : Web Designer’s Perspective
Before we start, the material in material design is a sheet of 1dp thickness and exists in a 3D plane with X, Y and Z coordinates. 1dp thickness is given because giving zero would result in no sheet to work.
Design is made using these sheets – the material that we have. In the design process we utilize multiple sheets lying on the same plane as well as stacked over each other in different planes, this gives width and depth to our design.
We can draw on these sheets, we can cut these sheets into various sizes and shapes, we can join different sheets, and we can move sheets in the X-Y plane. Simply put, we can have a sheet which is white in color and cut it to the shape of the twitter icon and use it as twitter icon in our overall design.
Fonts awesome provide this twitter icon out of the box to be used in our design, of course the material design way.
Cutting a sheet into twitter icon’s shape is just a very simple example of what we can do with material in material design. We would create fantastic looking websites with hundreds of such sheets made to work together without crossing the boundaries of material design.
For in depth understanding of material and how to use the material design concepts in web design, we need to understand the “environment” in which material exists,” material properties” and “material interactions”.
Material Environment
Environment in Google material design is the infinite 3 dimensional space available with width, height and depth. Height and Width are along the height and width of the device, which is mobile device, laptop, desktop or a wall mounted TV. Any device mobile, desktop or a TV has width and height which becomes X and Y plane of our sheet (the material). We can call this plane as drawing canvas for now.
Depth comes into picture when we use multiple sheets stacked over each other in our design. Depth is towards the perpendicular line coming straight out from the device right towards the viewer and becomes the Z-axis in our 3 dimensional space.
Environment does have lights and hence any material in the 2 dimensional space casts shadows. As per the material design guidelines, there are two types of lights that we can assume in our design- “’key lights” and “Ambient lights”.
Key Light – Understand that the source of key light can be located and hence it casts directional shadows. Like a light bulb on one corner of the room.
Ambient light – We cannot locate the source of ambient light and hence it is uniform in the environment and casts soft and consistent shadows in all directions.
The material in our designs will create shadows from one of these lights or both these lights, if assumed to be present.
We had cut a twitter icon earlier using one of the sheets, what If we have another sheet right below the twitter icon with some depth? We can cast a shadow. We can assume some light source on the top left corner of the device and cast a shadow of the twitter icon on the sheet below it.
Material Properties (Physical Properties, Transforming Material, Movement of material)
Material properties set the boundaries around imagination of web designers. One can transform and move the material on the screen within the boundaries and guidelines set forth by the material design language.
Here are the three key material properties as per Google material design guidelines that define material behavior in three dimensional space.
Physical Properties
We already know by now that material is solid and has 1dp thickness (depth) along z-axis. Material casts shadows depending on the lights in the environment and, of course, we need to assume the presence of lights.
As per material design guidelines, content is displayed on material in any shape and color and furthermore content behavior can be decoupled from material. The best way to understand this is to consider content and material as two different sheets of material.
Content sheet stacked on top of base material sheet, and if you elevate content sheet, it would cast shadow on the base material sheet. If we have to define content here: Content is the sheet that is cut into required shape and is painted in the form of a design element.
Sheet cut into shape of twitter icon with blue color can be considered as a piece of content. Since material is solid hence sheets cannot pass through each other. Twitter icon shaped sheet cannot pass through the base header sheet. Material is not a ghost, only one sheet can occupy the given space in X Y Z plane.
Material Transformations
Sheets can be cut into many different pieces. We can cut a Twitter icon, a Facebook icon and Google+ icon from the same sheet and put all of these on another sheet. Multiple sheets can be joined together seamlessly without the need to highlight the joint.
Sheets cannot be bent or folded, this is one aspect of material design that we found a little restrictive, we expect Google to update material design guidelines update and allow bending and folding of material sheets.
Material can be stretched along length and width, which is along the screen of the device. This means that the twitter icon, if touched, can increase or decrease in size, if you want it to per your design needs.
Material Movements
Material can move in any direction: X, Y or Z. X-Y is along the width and height of our device and we have been moving material in these directions.
If you move a material infinitely towards Z direction and inwards of the device screen, the result would be disappearance of material from the screen which is correct. Material can disappear and appear anywhere on screen. Of course, material as per Google material design guidelines can move left and right also and disappear from the screen.
The speed at which it is moved will define how it appears to you. Infinite speed will give a ghost effect meaning that material will just appear or disappear from the screen all of a sudden without the presence of any visible movement.
I am particularly focusing on Z-directional movement since the object appearance and disappearance on the screen is not ghostly but scientific process.
Objects in 3D Space (Elevation, Object Relationships)
No two material objects can occupy the same space in 3 dimensions. Objects can be stacked along Z-direction, of course. Elevation is the position of the object in Z-direction and can vary for different objects in one app or webpage.
User events, like touching the device screen, mouse click or voice command can change objects elevation.
Object relationships also play important part in the overall design. For example, one object (material) can have only one parent and may have multiple children. This means that the child’s movements would be governed by parent’s movements too. For example there can be a header bar container that contains all social media icons. If the header bar moves, then all the children move, too.
Final Thoughts
Web design has become complex over the last couple of years with increase in platforms and device sizes. Historically web design has been left completely yon web designers’s creativity and imagination without any standard principles to follow.
Designers and organizations do create their own boundaries and preferences but nothing concrete was available as a universal reference for web design. Material design fills that gap and is growing strong ever since its release back in mid-2014.
Understanding and implementing Google material design principles to the core appears to be must for modern web design. While material design is growing at a very fast pace, it will not be the only visual language, we will see competing visual design languages out in the market very soon.
