Four Design Lessons from Material Design Documentation

  •  5 Comments

Material Design is a new visual language Google created to unify its various products. When Google announced the material design concept, it also released some documentation to allow curious minds to browse through their visual guidelines.

The Material Design document is a wonderful resource about how design should be handled.

Material Design documentation

Google’s document is great for new designers that wish to learn from an industry leader to see how a visual aesthetic is created. It’s also a great resource for experienced designers to see how Google thinks. It’s a well organized and thought out document that brings insight to the minds of Google’s designers. The document includes plenty of lessons; I’ve read through it and want to share with you some great takeaways.

Use Motion to Build Meaningful Relationships

Material Design puts a lot of emphasis on motion and animation within design. A big reason for this is to allow a user to clearly see how his actions impact an interface. Google uses an example of adding an image to an album. If you take a look at the example below you’ll notice that the overlapping interface fades in and out. This is for two reasons: clarity and delight. First, it establishes a visual hierarchy for a user who sees that one of the interfaces in on top of the other. Although this is technically not true because interfaces don’t have layers; it allows the user to comprehend the interface in an easier way. That’s clarity.

Compare that to the next image where the transition is actually nonexistent and the overlapping interface just appears. It’s jarring – which is the second reason fading in and out is preferred – it also doesn’t establish any visual understanding. The new interface just appears and doesn’t give the user any understanding of the relationship between his action and an incoming visual change; that’s a missed opportunity to delight.

With transition

Without transition

“Avoid hard cuts. Hard cuts are jarring and make the user work too hard to understand the transition.”  Visual Continuity

Pay Close Attention to Typography

The Material Design guide has an extensive typography section. The obvious takeaway is to pay attention to typography in order to provide the best possible reading experience. This will help make the overall experience better. So many designs put focus on UI details like buttons but how may actually cater to typography? It’s not something often talked about. Within the typography section you see how much effort Google’s designers put into it.

Standard Styles

“It makes sense that text that is the same color as the background is hard to read. What’s less obvious is that text with too much contrast can dazzle and be hard to read. This is especially true against dark backgrounds.” Standard Styles

Things like line height and color have been specifically defined to bring about the best possible experience for a user. Even Roboto has been redefined to improve its legibility across various platforms. Furthermore, the way a paragraph is displayed matters because having gaps and orphans make reading experience harder. Paying attention to and eliminating things like hanging short words or hyphenated words goes a long way.

Material Design Typography

Take Advantage of Color

One of the first things most people notice about material design is the bold and bright color scheme. If you take a look at the color section of the documentation you will see so many colors. This is a great thing for a few reasons. First, bold colors are an amazing way to give any Google UI a personality. There is nothing wrong with creating a design with a fantastic color scheme; it’s a nice change as when iOS7 came out, it celebrated light gray scale colors. Additionally, the way Google sets up the guidelines for color is clear and makes for a great reference on how to use color well.

Let’s face it, color can be scary especially when there are a lot more hues to choose from. Although Google provides an enormous color range, it has some great guidelines on how to use them. Google starts out by stating the obvious: Limit your color choices, use varying shades of gray when needed and use accent color wisely.

Material Color

“Bold use of color in large fields in the UI is strongly encouraged. Different elements in the UI will take on different parts of the color theme. Toolbars and larger color blocks will take on the primary [color]. This is the main color of your app. The status bar should be the darker […] tint of your primary color.”  UI Color Application

It All Comes Down to Usability

One of the last sections within the material design document seems to be of great importance. The usability and accessibility section mentions a lot of questions a designer needs to think through when creating an app or interface. This section serves as a reminder that your design needs to be accessible no matter what.

“A product is accessible when all people—regardless of ability—can navigate it, understand it, and use it to achieve their goals. A truly successful product is accessible to the widest possible audience.” Accessibility

The document is asking you to answer some serious questions about how your product is accessible without sound, color or a screen. Can a user with disabilities use your product with ease?

This section of the document jumps into specifics for navigation, readability and guidance and feedback to give you a clear idea of what kind of concerns your product needs to address. If you read through it you’ll notice that some of the issues pointed out are obvious things such as making sure that minimum touch screen element is 48 pixels by 48 pixels so that a typical human finger can interact with the element without being too small. Some are more specific, like making sure links have a proper and meaningful title.

Give meaning to your links. Is the purpose of each link clear? Generic anchor text like “click here” does not explain a link’s purpose. Put the purpose of the link in the link text itself. A better solution to “click here” is a concrete link like “Device settings.” Some assistive technology modes let the user scan just the links, ignoring other content, to make navigation more efficient.

With the wide increase of technology users, it’s so important to pay attention to usability. It’s nice to see a whole section dedicated in the material design documentation to usability and accessibility to keep as a reminder that our products – no matter what they are – need to be accessible by all sorts of users.

Conclusion

I encourage you to take an in depth look at the Material Design documentation which is available free online. It’s an amazing resource filed with great advice and takeaways. It serves as a learning tool for new designers as well as people interested in learning more about interface design. It’s also a great refresher for experienced designers who want a sneak peek into the design mind of an industry leader.

Newsletter

5 Comments
  1. Gary Lange Sep 3, 2:49 pm

    Well….

    The new design standards are nice, innovative, and certainly a worthy goal. I also agree that this latest design specifications, examples, and documentation is excellent.

    However, Google does not have a good track record of seeing things through. Examples:
    1. Over a year after project JFK brought redesigned app UI’s and icons, there are still up to three different looks and styles for Google Web apps, Android UI, Android and iPhone apps, etc.
    2. There are still Google apps and Android stock apps that still don’t adhere completely to the documented app and UI design guidelines.
    3. The line of Google web apps have multiple designs and navigation standards
    4. Google hasn’t managed to create and execute a unified UI or design for their products to date. To be honest, they STILL haven’t updated many web apps or added Android apps/features for many of their web apps…and it’s been 5 years! (Tasks, Picassa, Finance, etc)
    5. The Android ecosystem still hasn’t recovered from the elimination of the “Settings/Menu” button from the UI. Instead of a single, consistent button for this navigation, there now exists many different ways of getting to these functions across the popular apps. Rarely can I get to a menu or setting the same way while working with several apps at a time.

    Further complications to this change in design standards will be:
    1. Yet another recent UI design that the host of developers would need to adhere to…which in all probability will NOT happen. There are still highly respected and top selling apps in the Play Store that haven’t updated to the “Holo” design yet.
    2. Very little motivation for developers to make these changes. If their apps are on iTunes for Apple’s line of devices, they make more money there and usually design to those standards; simply porting over the apps with few changes.
    3. Very little to reassure the development community that Material Design is here to stay for a while, and won’t be changed yet again in a year or two.

    Like I said…it’s nice to see Google actually HAVE a well thought out, clear, and progressive design standard and vision. I really hope they manage to execute the vision completely and lead the way forward.

    They just haven’t managed to be successful at it yet. Google’s leaders are a bit like a bunch of teenagers with Attention Deficit Disorder. Bouncing from one exciting new, and “cool” project to another…yet never quite finishing things and ignoring the “boring” stuff.
    Here’s hoping they grow up. :-)

    Reply
    0
    • MaxArt Sep 4, 3:06 am

      Wasn’t this article about what Material Design taught us?
      Which means the design documentation itself, not Google.
      Aren’t those principles still valid even if Google and its ecosystem don’t manage to live accordingly?

      Reply
      0
      • Gary Lange Sep 4, 11:08 am

        You do have a point.

        On the other hand, how much stock do we put into “Material Design” if the creating organization can’t implement it?

        Just a thought.

        Reply
        0
  2. TheRiddler Sep 3, 9:59 pm

    The funny thing. Without the “animation” stuff the design aspects works like good classic design works since years. Withespace, typo, good colors. But the animation thing puts a big plus on it.

    Reply
    0
  3. Cameron Jan 27, 2:11 pm

    “Paying attention to and eliminating things like hanging short words or hyphenated words goes a long way.”

    I love this idea in theory.

    How does one do this in practice though? Text in an application is almost always dynamic. How would I know if my container combined with my text will lead to a short handing word, a big dent or an orphan?

    Are there any patterns, CSS attributes, libraries or other clever things that can help with this?

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!