Material Design- for websites?

Posted In: design, Google by Alex on 21 December, 2014

image

Google’s concern for design has historically been a very internal affair. But they recently released a concept for the design of apps and websites which is beginning to take the web by storm.

Material design is a visual language which is driven by a framework engineered to create native apps for android. However, many of its concepts can be applied to web applications.

  • Material is metaphor
  • motion provides meaning
  • Bold, graphic, intentional

Here are some of our favourite techniques outlined by material design which we have already started to apply to our newer website

Elevation

One of the key concepts of material design is using the screen as a 3D space. When applied intelligently we can draw attention to an action button or a fallout by making it appear closer to the user.image

Elements can appear to move through the Y-axis by correctly manipulating shadows. Imagine making a button move towards your eye when you hover over it.

You can also draw attention to titles and callouts by making them appear a little raised from the rest of the page.

this technique may sound a little old hat but the way Google has specified shadows should be used makes the experience feel much more realistic, making the user feel as though they are looking at more than just a screen.

Responsive Interaction

this is one of our favourites. The spec for material design suggests a lovely ripple effect  so that the user knows instantly where they have touched the button. This is a really cool technique which enhances the user experience and makes the UI feel pristine.

Meaningful transitions

This concept is drilled around making screen transitions and animations mean something to the user. By keeping transitions uniformed and consistent, we can maintain a relationship between elements where necessary.

For example if we have a button which opens a drop down menu, by having the menu appear to grow from the location of the button, that relationship is maintained.

Material design for websites

Material design currently exists as a visual language for building apps but there is a lot we can learn from it as web designers.

As usual we try to stay at the forefront of technology and you can rest assured we will will apply material design to our websites wherever necessary.

Leave a Reply