Design Inspiration

Bringing Stories to Life with Material Design

Meg Cannistra By Meg Cannistra April 26, 2016

One of the most interesting developments in the digital design space over the past few years has been material design. Popularized by Google, material design incorporates the best parts of skeuomorphism and flat design to create user-friendly and aesthetically appealing content. By integrating elements such as layers, shadows, realistic movement, and animations, material design is a responsive visual language that appeals to both brands and consumers alike.

Typically minimalistic and bold, material design feels both futuristic and intuitive. Designers have taken to it with enthusiasm, using it to craft stunning visual designs that encourage interactivity. These designs nearly leap from the screen and deliver a more immersive experience than both flat and skeuomorphic design.

Explore our 6 favorite examples of material design below and get inspired for your next web project.

1. Android Wear

George Otsubo’s redesign of Google’s send animation from Google I/O 2014 uses bright colors to emphasize the cheerful motion. The animation is fluid and incorporates realistic movement to make it feel less clunky than a traditional send notification.

Android Wear Material Design

2. Checkout Flow

This checkout flow created by Ramakrishna Venkatesan is incredibly intuitive and features a ripple click effect that gives users a visual confirmation of their selections. What makes this checkout flow even more user-friendly is that the card design changes based on the user’s card number. So, if you’re entering an American Express number (as seen below), the card’s appearance will change to reflect this.

Checkout Flow Material Design

3. Interval Timer

This interval timer, developed by Javier Salmona, utilizes animated buttons and menus that respond to interaction with realistic movement. The timer is also fully customizable based on the user’s needs and integrates color and motion to create a visual cue for when to switch exercises.

Hybrid Interval Timer App Material Design

4. Side Menu Animation

Developed by Dmytro Prudnikov, this side menu animation is a great example of material design. It blends both art and science with its responsive, user-friendly menu and colorful, creative illustrations. The side menu also incorporates hierarchical motion. When selected, the buttons appear from top to bottom in a logical pattern rather than all at once. This effect illustrates the idea that motion has meaning in material design.

Side Menu Animation Material Design

5. Screen Rotation

Noticing a lack of a smooth screen rotation in Android, Miroslav Vitula developed one for the GooglePlus app. Vituala tells 9to5Google that he designed this feature because he had been “craving the ‘smooth rotation’ (as seen on iOS) since ICS.” The transition is sophisticated and fluid, with each element on the screen moving in a realistic fashion to fit the new dimensions.

Smooth Rotation Material Design

6. Alarm

This alarm designed by Ehsan Rahimi features bright colors and dynamic animations to create an intuitive user experience. The ripple click effect on the button adds a level of responsiveness, while the transition from calendar to alarm feels meaningful, serving as a clear visual cue that a change has occurred.

Alarm Material Design

 

What are some of your favorite examples of material design? Be sure to let me know below!

Featured image source: Museperk

 

Brand Storytelling eBook


[if lte IE 8]
[if lte IE 8]
[if lte IE 8]
[if lte IE 8]