24.06.15, Helsinki. /Material design/

From Flat design to Material design.

1. Material design is a design science. Article that introduce the main idea of Material Design.

2. Google introduction manual to the material design philosophy.

“We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.”

Our materials are space, time, light and shadows.

Space. The material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness.  There are certain rules how this environment inside your mobile device is functioning, and all of those a natural extension to the surrounding.

Every command and every operation has its own depth scale in this 3D space and follows the common rules. Illustration of the elevation principle.

Light and shadow. Within the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles. Shadows in the material environment are cast by these two light sources. In Android development, shadows occur when light sources are blocked by sheets of material at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows the card with a height of 6dp.

Time is working as a connector between elements and create a smooth authentic motion while user’s browsing. Smooth and natural animation mechanics, connected to the physics theory and following the principles of reality around.

“Motion design can effectively guide the user’s attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.” Main ideas are visual continuity, hierarchical timing and consistent choreography.

And finally, colours.
“Color in material design is inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights. Material takes cues from contemporary architecture, road signs, pavement marking tape, and athletic courts. Color should be unexpected and vibrant.” Less is more. Or just enough.

Icons. Build and prototype.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s