BACK
BACK
BACK
Loading...

Blog /  Everything You Need (yes, you do) to Know About Material Design

October 29, 2015 - Nataliya

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!

beauty and simplicity of material design

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?
material design from mobilunity

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:

material designMaterial is the metaphor

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

material deisgn

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 :)

motion in material designMotion provides meaning

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 surface

surface in material designThe 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.

Depth

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:

depth in material design

 

Print design (concept of digital “ink”)

Print design

 

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:

Digital paper

 

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).  size combinations

 

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.

Material Design color palette

Specifically accent colors are mainly used to attract the user’s attention to the key elements such as a floating action button.floating action button

Meaningful animations

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.


https://youtu.be/EjBUbFVBcVE

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!

Resources:

 

Request a quote

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Contact us Request a Quote

Your email address will not be published.

Required fields are marked *

Attach File

(max file size 5MB; allowed extensions: doc, txt, pdf, docx)

subscribe to newsletter

Your email address will not be published.

Required fields are marked *

Ask a Question

Your email address will not be published.

Required fields are marked *

Attach File (max file size 5MB; allowed extensions: doc, txt, pdf, docx)

Sorry, this page isn't quite ready yet

redirecting to the old site

5

Mobilunity

cannot account for customer alterations, as the site may reflect changes made after the project was completed.

5