What You Can Learn From Google’s Material Design

By -

Not too long ago, Google introduced Material Design, a brand new set of guidelines for designers and developers alike. Material Design introduces a fresh perspective on user interfaces, motion, and interaction states, and are a great foundation for you to build a product upon.

Introduction

In essence, you can summarize Google's Material Design by two components:

Material
Motion
Material
Material provides context in design, the surface and edge of a "material" provides us visual cues. Let's compare this to real life. We understand the dimensions of a room, because we see walls. At the same time, the interior provides us an understanding of the context of the room. Your kitchen looks very different than your bathroom for example.

The same is applied in Material Design. The combination of style and content provides context to the user in a digital space, much like physical walls and interiors. A user has a better understanding of the user interface, because the designed material provides context for the interface.

A card provides contextual design and is a commonly used element in Material Design. A card provides context in itself, as well as by having a relationship with other cards.
Motion
The concept of Motion in Material Design has a very similar story. Motion provides context in a design through the flow of an application, especially when it comes to the continuity of a product, a user has the feeling of being uninterrupted. There are no obstacles, such as inconsistency in design or a confusing navigation.

How exactly does motion work? Here's an example. There's a home feed that consists of a list of cards. When you tap a single card, the material of the card expands to become the full width and height of the screen instead of the dimensions of a single card.

Notice how this example applies both material and motion. A card is the material. When a user interacts with it, through motion it will expand to show more content. This provides continuity to the user as it shows how their input affects the user interface.

Material

Let's explore material a little bit more. In essence, material is the combination of your static design elements. Think of shapes, color, typography, and the variety of tools you use to create designs. All of this together forms a material.

Color
Color is a great matter for designers as well as users. It has a tremendous amount of influence on the look and feel of a design, as well as the psychological effects on a user. Color can make a design trustworthy, exciting, utilitarian, and much more. In Material Design, we have access to a large palette of colors, which we can use as the foundation for designing a product.

I highly recommend having the following reference of colors saved as a bookmark, it's a convenient reference to design a color palette for a user interface.

Typography
Roboto, the standard font for Android, has been polished to improve it for cross platform usage. For designers who aren't very familiar with typography, Material Design provides guidelines that handle the design of typography for you.

The easiest way for yourself to get started with this grid is to download the following sticker sheet. The guidelines will provide you with a structure for your typography when you start a new design.

Roboto font files
PSD source file
AI source file
Sketch source file
Layout
Designing a layout in Material Design uses some of the core principles of print design, which Google indicates as a source of inspiration for Material Design. There's a strong emphasis on building user interfaces that scale well between different types of devices. As you're aware, scalability has become crucial for designing products that are successful on multiple devices.

This illustration visualizes the concept of depth in user interfaces.
One of the core concepts is stacking. When you're designing a user interface with Material Design, you use drop shadows, contrast in color, and z-positioning to give the user a sense of depth in the user interface. Depth creates context for users. Floating elements on top of stacks, such as a button, emphasizes the call-to-action in a user interface.

Example of three layers of depth: a menu, the top navigation bar, and the content area.
For more advanced designers, the guidelines include baseline grids. The metrics and keylines page in the Material Design guidelines go in great detail and provide you with resources to experiment with.

If you'd rather work with a pre-made layout, you can download Google's white frames template.

Example of a designed layout.
Motion

Motion goes hand in hand with material as described earlier in the card example. Motion is what makes designed material come alive.

Easing
When you start learning the basics of motion design, one of the first principles you'll learn about is easing.

When you ease an animation, you attempt to make a motion more natural. Instead of animating the movement of an object at a consistent speed, you increase the speed in the very beginning of the animation and reduce the speed at the end of the animation.

Think of a moving car in traffic and how a car accelerates and brakes, it's a ve ry natural movement. Easing tries to replicate that so a user deems the movement of an object as natural.

The easiest way to get acquainted with easing is to see some design examples. The following resources are a great bookmark:

Animation Principles in UI Design: Understanding Easing (Medium, by Suresh Selvaraj). This is an excellent piece to learn the basics of easing.
Authentic Motion (Google). This is a more extensive reference and includes several examples.

This illustration showcases easing, as featured in "Animation Principles in UI Design: Understanding Easing".
Responsive Interaction
When a user interacts with a design element, in most cases the element should provide feedback. In Material Design, the goal is to delight the user with motion feedback as well as provide context for the material the user interacts with. The beauty of responsive motion is that you acknowledge the action of the user, which improves the usability of your product.

The most beautiful example I've seen is the touch ripple, a visual highlight when the user interacts with a particular element.

Another example is opening or expanding elements. When you tap a particular element to expand it, new material expands from the point the user touched. The growth of an element feels natural when it grows directly from the center of the user's touch. For more examples of responsive interaction, visit Google's Material Design website.

Last but not least, the transitions between interfaces is important for responsive interaction. It's the most crucial form of motion to design continuity for the user. For incoming and outgoing screens, the point of origin provides context. A user interface can dynamically grow and expand, which gives designers plenty of room to play with beautiful transitions. And best of all, they can make them meaningful.

Useful Resources

Material Design Reel (YouTube, by Google)
Default Design Themes: Light & Dark (.ai)
Iconography Reference Sheet (By Google)
Card Design Reference Sheet (By Google)
750 System Icons (.zip)

Advertisement
Inspiration

Below are a few great examples of Material Design created by excellent designers.

Google - Material exploration by Aurélien Salomon

Alarm Material UI by Ehsan Rahimi

Aviasales L (Material Design) by Mark M
Conclusion

This is a brief introduction to Material Design. If any of the above sparked your interest, I highly recommend to read more in the official guidelines by Google.

Please approach Material Design with a creative mindset. A lot of what is presented is a reminder of what makes great design great. Simultaneously, they are only guidelines, which means that for the sake of growing as a designer you are more than welcome to give it your own twist.

I encourage all of you to create a design with these set of guidelines in mind. It might mean you're taking a different approach than usual, which is great to keep your skills at the edge and grow as a designer.

What do you think of Material Design? What have your experiences been so far? Please share it below in the comments, I'm very curious and I'm sure many others are as well.

Comments

Post a Comment

Popular posts from this blog

How to Create a Yoga Goddess Illustration in Adobe Illustrator

By -
Image
As the music begins to play, a soft breeze fills the space with the undeniable smell of magnolia blossoms. She gracefully enters and begins a “tree pose” with her hands in Namaste form. Our female figure is inspired by the Indian culture for its gorgeous use of color and the grace of its yoga formations. I hope you’ll enjoy the journey as we retrace, step by step to enlightenment.  1. Becoming Flesh and Blood Step 1 Our first step will be to bring in our sketch. I've scanned her in at 300 dpi to catch as much of the detail as possible. I'm not as picky about my choice of initial drawing tools, and this particular project was completed with a mechanical pencil. We'll be working with a clean line quality from Adobe Photoshop and now we can begin to work. I'm working in Adobe Illustrator at a size of 8.5 x 11 inches for this specific project. When I'm ready to start my layers, I'll label my first layer as "Sketch" and lock the layer to make su...
Read more

How to Create an Icon Set using Adobe Photoshop

By -
Image
In this tutorial, we are going to design a set of icons in Adobe Photoshop. An icon set needs to have the same background and theme. For learning purposes, we are going to design a sun icon, an ice flake icon, and an RSS icon. Let's get started. 1. Preparing the Canvas Step 1 Start by making a new file with size 350 px × 350 px . Click the small box next to the  Background Contents  option to change the new canvas color. Step 2 In the Color Picker dialog box, select grey ( #e0e0e2 ) for the canvas background color. Step 3 It is always a good idea to keep your work structured from the start. Make a new layer group and name it  sun . This is where we will place all layers used in the sun icon. 2. Designing the Icon Base Step 1 Use the  Rounded Rectangle Tool  to draw a rectangle with size  83 px × 64 px and  8 px  radius. To get accurate results, use the  Properties  panel. In this panel, you can simply enter the exact siz...
Read more

Android Essentials: Using the Contact Picker

By -
Image
This tutorial will not only show you how to launch the contact picker and get results, but also how to use those results in Android SDK 2.0 and above. Getting Started This tutorial will start out simple, but then we’ll get in to some of the technical details of using Contacts with the ContactsContract class, which was introduced in API Level 5. Make sure you have your Android development environment installed and configured correctly. You’re free to build upon any application you have, start a new one from scratch, or follow along using the InviteActivity code in our open source project . We’ll then be adding functionality to allow a user to choose one of their existing contacts and send a canned message to them. We’re going to dive right in, so have all of your code and tools ready. Finally, make sure your device or emulator has some contacts configured (with names and emails) within the Contacts application. Step 1: Creating Your Layout There are two essential form control...
Read more