Our experience with Material Design

05.10.2017

Joanna Borowska
Quality Assurance Engineer
Joanna Borowska

Have you ever wondered about an application design that should be simple, pretty and easy for the user? Which approach should be choosen, so that the application is proper? How to fit all the content and objects to make everything transparent?

This is probably the problem of most designers, but even if not, it is worth to get to know the idea of ​​Material Design, which is based on years of experience and research has worked out the answers to these questions. Today we will tell You what we learned while working with this style.

Material Design has been known to Android developers for some time, but it has only recently gained popularity in creating web applications. Why? These mobile applications had the greatest need to present multiple items on a small display area. This idea is so well scalable and versatile that it has begun to appeal to devotees also among the developers involved in creating sophisticated web applications.

The creator of the idea is… Google. The Company from Mountain View first presented Material Design to its users in 2014 with Google Now and was selected as the flagship style of well-known products like Gmail and Google Docs. The main idea is to combine the classics of good design with innovative data presentation solutions.

Needle and thread in motion, so what in practise

Let’s suppose we want to sew a beautiful design. We have a flat canvas in which we have to extract single structures, make them attractive to the eye and easy to read. We have a broad palette of colors, but after all, we cannot use them all and make from our site a complete patchwork. What then?

Arranging elements on the page:

Page elements:

  • cannot bend or break,
  • they cannot occupy the same space at the same time or pass through one another,
  • can combine into one,
  • they may overlap if one of them is appropriately distinguished – for example, it will be slightly “higher”.

material design

Three-dimensional plane

This is one of the most characteristic features of Material Design. Elements are in three layers, to give their hierarchy on the page. The most important ones should at the most on the outside, the less important – more in the depth. To emphasis them use a shadow border – the deeper shadow, the more “convex” the element is, and thus the more important.

material design

Intuitive icons

Simple, eloquent icons with rounded edges are supposed to give quick information about the features of a particular item, while saving valuable space on the page. This allows the user to be free from reading all informations.

Color scheme

The chosen color palette should be consistent, lively and eye-catching, but it cannot glare us. The recommended text color is always black, we can only manipulate its transparency, which should be 87% for main text, 54% for additional text and 38% for inactive text and icons.

Motion

The icing on the cake is the movement and its animation. However, not to make too much mess, we must hold on to some rules. Elements must come out of something or somewhere. Their appearance on the screen must be a process, but they may disappear any time their function is finished. They can move in any direction, but they should adhere to it and the Z axis is reserved for user interaction with the system.

Our experiences with Material Design

We have come up with designing a sizeable and rather complicated web application, available on both computers and mobile devices for restaurant management. Many forms, many fields, how to bite it? For the implementation we used C #, JavaScript and Angular Material.

Ania, our designer chose Material Design, because its foundations are based on years of experience, and it gives us a guarantee of a friendly interface and saves time needed to come up with a new wheel.

Font Signika instead of Roboto

We have intentionally not followed the proposed font of Roboto. Why? Ania wanted to make all the texts as readable as possible, regardless of the size of the screen or the lighting, which is often weak in the restuarants to provide a cozy atmosphere. Instead, she chose Signika font, invented by Polish designer Anna Gabryś. This is a font created primarily for the needs of wayfinding, with nice x-height and distinguishable letterforms that are very legible.

Icons and text information

Icons instead of text have been introduced to save space, but since we have enough space to help the user recognize the function of the icons, we will also add text to them, giving an additional form of informing the user about the function of the item.

material design material design

Colors

In this aspect, we did not fully apply to the Material Design assumptions, because we were doing a new layout for an already existing project. Our users were accustomed to the color scheme, so we kept our branding.

Tabels

Angular Material does not support tables, and we really needed at least something similar to them. Instead of the popular HTML <table> tag we used a combination of divs and spans to achieve the desired effect.

material design

Programmer problems

Arek, our programmer who has been working on translating new layout to the code, admits that the biggest challenge was to match ready components with our needs. Interposing modules in motion also required not a little effort, but it was worth it. The business site with great enthusiasm has adopted a new version of the project.

Summary

It is good to make use of the years of experience and research of one of the biggest corporations (Google), but it is even better to have the ability to add something from yourself. Although Material Design is a demanding and restrictive style, we think it’s worth a little effort to get such results.

Bonus:

Material Design Lite for WebDevelopers – a Google-powered service offering a substantial database of ready-to-download items, styles and templates, along with a set of rules to follow.

Angular Material – translation of Material Design into finished components in Angular.

Sources: