Lessons Learned From Analyzing Material Design Components

DesignPaula Borowska • October 20, 2014 • 5 minutes READ

If you read through Google’s material design documentation you know how detail oriented and extensive it is. When you look through the document you can learn many things. One of the greatest lessons is that it proves that it’s possible to create complex visual style guides. By no means is it easy but it is possible, especially for the complicated array of products that Google has.

If you want to learn a few things about visual design you should take a closer look at the way material design handles individual elements or components. The documentation specifies 18 different design elements, from buttons to menus to tabs. So, what can be learned from analyzing them?

Accept Variations

There are many rules just for buttons. There are three different button types within material design: floating, raised and flat. It’s difficult to have a single button type working across the various interfaces material design could be used to make.

It’s also difficult to keep consistency in mind with all the various interfaces. Yet, material design embraces three different types of buttons in order to make the best of its design. The alternative is to pigeonhole the design into something that may not work well at times.

“Choosing button type for your main buttons depends on the primacy of the button, the number of containers on screen, and the overall layout of the screen.” – Buttons Usage

There are certain guidelines for buttons that are specific and some guidelines that are more vague. All in all, the guide is well thought out. The guide has specific details about how to and not to use buttons so it’s easy for the designer to work. And that’s the beautiful thing about this whole guide; design decisions are left at the designer’s discretion.

Pay Attention to Often Forgotten Elements

How often when you design an interface to you take into consideration a pop up or an alert module? The material design documentation has a section dedicated to dialogs. These boxes are not something designers often use to begin with. But when they are used, they are still part of a design and need to be addressed.

The guidelines regarding dialogs are specific. They outline the kind of button you should use and why. The anatomy of the dialog is spelled out too; it’s informative and thorough.

“Side-by-side buttons are recommended when the text of each label does not exceed the maximum button width, such as the commonly used OK/Cancel buttons.” – Dialogs

“When text labels exceed the maximum button width, you can use stacked buttons to accommodate the text.” – Dialogs

They guidelines specify the type of content and actions that should be included within a dialog box. The type of detail that this extends to is fascinating and interesting, as it’s a design element often overlooked. It goes to show that in order to create a powerful style guide and a powerful design language, no element is too small or unimportant.

It’s All About Affordance

There is a lot of emphasis on affordance within the documentation. The sole purpose of creating a new and unifying design language is to provide cross browser/device affordance. A quality style guide will accommodate affordance into the design language in order to create a high quality design guide.

“A tab provides the affordance for displaying an associated grouping of content. A tab label succinctly describes the tab’s associated grouping of content.” – Tabs

The way tabs are described within the material design documentation is brilliant. Material design doesn’t use tabs as a form of navigation, it uses them as an additional way to browse through content. It’s refreshing to see that specific elements, like a tab bar, have limitations. It’s good to know that the designers who crafted material design thought through the functionality of the elements in addition to the style so that it cannot be misused.

If functionality of different elements is clearly defined then the elements will be used only in a certain way. In turn, this helps build affordance. If an element is reused in various ways it will confuse the user; that’s unclear and unfair to the user.

“Tabs make it easy to explore and switch between different views or functional aspects of an app, or to browse categorized data sets.” – Tabs

Create Your Own Elements

“Snackbars provide lightweight feedback about an operation in a small popup at the base of the screen on mobile and at the lower left on desktop. They are above all over elements on screen, including the floating action button.” – Snackbars and Toasts

“Toasts are similar to snackbars but do not contain actions and cannot be swiped off screen.” – Snackbars and Toasts

The material design document has an interesting section for components called “Snackbars and Toasts.” It’s a design term you don’t hear everyday; snackbars and toasts are a design element we already know. If you read the quotes above and take a look at the image below you’ll realize that the concept of snackbars and toasts is a simple pop up notification.

But the lesson here is grander. Material design divided up the various pop up types. The design language needed it and so it was done. Snackbars and toasts are similar to dialogs but different; therefore, they are separate. Material design simply divided them up because it needs them to preform various functions. It’s okay to create new elements. And just like with every other component of material design, snackbars and toasts too have specific guidelines — use cases, measurements and colors.

Often, we forget that these elements can’t be used in various or new ways. It’s interesting to see how something simple like defining two different functions for pop ups can go a long way. Let’s not forget to innovate design by including elements that may be deemed out of style or elements which you wish exited but don’t. It’s great to innovate on the little stuff as they make a great difference within the design down the road.

You and Material Design

Take a look through the material design documentation and let us know what you learned from it. It’s amazing how combing through such a straightforward document can teach you so much about design.