Material Design Research

Material Design is something that was initiated in it’s operating system after the flat design trend took off. It was designed to add levels of depth into an otherwise completely flat enviroment. The idea is that material is a metaphor for the “unifying theory of a rationalized space and a system of motion, this is emboldened by print based design techniques that fully take advantage of typography, grids, space, scale, color and use of imagery. This means  it creates a brilliant visual hierarchy, meaning, and focus. Another element of material design that perfectly fits my brief is that by adding motion to the techniques previously mention, the user is then presented with an easy to understand UI that is visually pleasing to most users.

A lot of techniques apply to material design, and they improve the overall look of the UI. The first is the use of light and shadow;

Screen Shot 2016-02-23 at 18.33.55.png

Depths of the elements also matter;

Screen Shot 2016-02-23 at 18.34.38.png

The use of images create really powerful pages and amplify the meaning of the content;

Screen Shot 2016-02-23 at 19.07.19.png

There are even specific colours that should be used, there are multiple resources in which you can find them.

Screen Shot 2016-02-23 at 18.38.55.png

It is also important to remember there are multiple tones to remember;

Screen Shot 2016-02-23 at 19.00.18.png

Below are screenshots of the iPhone adaptation of the Google Calendar application, you can see a great example of the shadow technique being employed.

Next up is the Google Maps introduction, note here the use of the colours, the same ones found in the palette shown above.

These examples perfectly show how to mix the palette and images to create the perfect visual content




The Boardmasters website is really good, it offers the user everything it would need straight from the homepage. It’s simple design means that the users find easy to buy the tickets and find the line up.

Screen Shot 2016-02-23 at 15.53.09.png
As you can see below, the lineup looks well presented, but has limited interaction, offering the use only a video and small description.

Screen Shot 2016-02-23 at 15.52.54.png

The tickets page itself well contained and easy to understand, it shows the options easily to the consumer.

Screen Shot 2016-02-23 at 17.20.19.png

While the gallery page doesnt show the images in the best possible way, by simply putting them under one another on one page however the page layout with the side is clear, and understandable, exactly what the user needs.

Screen Shot 2016-02-23 at 17.26.02.png