Everything You Need (yes, you do) to Know About Material Design
You know, there are some topics you need to have a certain level of proficiency in to work in a particular industry. Material design is one of those, (especially) if you happened to work in web development, digital marketing and close fields.
Material Design is a design language developed by Google. It was announced on June 25, 2014, at the Google I/O conference. As of 2015, most of Google’s mobile applications for Android have applied the new design language, including Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox and all of the Google Play-branded applications, Chrome browser and very likely all the rest.
Why Do I Need to Know About Material Design
At this point you’re probably asking yourself -”do I really want to dive deeper into this topic?”- particularly if you are:
- not planning to work for Google as a web designer
- not going to develop an application for Google Play any time soon.
Have I guessed right? Well I have an answer just for you!
Here are 4 common reasons why you need to have a clue about Material Design if you work closely with digital fields.
- To keep up with a major trend
If it’s applied by Google on ALL its web projects, then you can bet that it has an impact on the whole industry.
- To understand how design standards are developed now
Having a clue of Material Design guidelines, you are in a position to make a statement whether something is done in the right way or should be reviewed, when it comes to checking someone’s work.
- To adopt the best practices and developments
You don’t need to reinvent the wheel yourself. If you are a web designer or just an interested person, you can download and use pre-made components (bits of code), styles and whole templates, which took the effort of the best professionals to be created. Sounds good? :) By the way, here they are.
- To make your content better perceived
There is a comprehensive science behind Google’s written design guidelines. So, whether you are a blogger, social media manager, occasionally deal with media content or just trying to manage either your own or your company’s web presence; following Material Design principles will allow your audience to understand your brand and have a better grasp on what it is your company represents. . So, why not take it into account?
Specifics of Google Material Design
Okay, at this point let’s get down to business and start out with the general principles of Material Design. As the Google design crew states, there are 3 of them:
In this case the user is to have a kind of tangible experience with a product by means of a corresponding interface. This is realized by using a specific layout of shadows and layers so that the designed appearance creates a kind of physical (read material) experience
Bold, graphic, intentional
All the Material Design elements are taken from print-based design, including typography, grids, space, scale, color, and use of imagery. As a whole, it is designed to guide you visually and give you clear suggestions on how to exercise a particular digital product. The intention is to make your user experience intuitive. And it does :)
According to the Material Design concept, motion is added to provide meaning to your actions and must always be appropriate. It all serves to focus users’ attention and maintain the continuity of the experience. Once again, this feature is also meant to facilitate user experience and to make it as intuitive as possible.
Now, let’s take a better look and see how all these principles are implemented in real design templates.
The unique thing about the surface in Material design is that it is tactile. Unlike the norm in the digita world, the surface also consists of tangible objects, that are able to stretch, connect and change their shape. Each surface has a certain height and it casts a shadow at the bottom – just the same way you can observe materials behaving in the real world. To top it off, all of the surface behavior is in full compliance with the laws of physics.
In Material Design shadows play an important role of setting the structure and hierarchy of elements on the screen. Depth is also supposed to give us certain tips about the interaction of elements and make the user interface be more intuitive. See the picture below:
Print design (concept of digital “ink”)
Digital paper – every kind of surface
in Material Design concept.
Digital ink – everything that is placed
on “digital paper” (images, text, icons, etc.).
The Material Design language applies classic print design principles in its interface design.
Nowadays, the concept is often criticized for narrowing font selections to the single choice – Roboto font. At first sight it may seem very limiting in terms of design, but let’s consider the image below:
If we ignore all the icons and present the text in plain colored blocks, it will become evident that the structure is clearly seen. Moreover, it provides hierarchy and highlights difference in importance via their color shade (more important = darker).
In addition to font style recommendation (which is Roboto font) Material design guideline offers a variety of size combinations (as illustrated in the picture above). However font style matters a lot, but is still not of the greatest importance according to the Material Design guidelines. If your corporate font aligns better with the branded product, it’s more than okay to use it to maintain the corporate identity.
The same applies in classic print design; color is a powerful tool of expression in Google’s Material Design. As for “Digital paper” color is of increasing importance (unlike in previous design guidelines). That is why, in a Standard Material Design color palette colors are divided into main and accent colors.
Specifically accent colors are mainly used to attract the user’s attention to the key elements such as a floating action button.
As it was stated earlier, Material Design tries to be in full compliance with the laws of physics in all considered aspects. Therefore, in the Material Design concept, motion is used to bring meaning and to confirm a user’s action. This feature is also supported by making the interface responsive to user actions.
Hopefully, this short guide has given you a clearer understanding of Material Design. However, nothing can stop you from digging a little deeper into the topic :)
Stay tuned for the next post!