Company blog

Material Design – philosophy of design

Post date 23.11.2020
0 Comments

Material Design is a visual language for which Google created a set of rules.

Creators’ assumptions:

– design must be simple and clear

– Elements of created applications should be lifelike looking, mirror things that we see everyday in the real world

– Interface components cannot penetrate nor occupy the same space simultanously – the should appear as if made from the tangible material

– final effect should evoke an impression of touching individual elements, emmersing in the presented world even though the whole composition exists only on screen

– Application should look coherent on diffferent platforms and devices, work regardless the way of interaction (it should not matter if we mainly use mouse, keyboard or screen reader).

The impression of presented content tangibility is created thanks to the usage of a virtual paper also called „smart paper” or „quantum paper”. It mirrors  effects characteristic of the real paper constructions – e.g. light reflection and throwing shade. Individual elements are „divided” in such a way as if they were floating above each other. What is interesting, Material Design creators built interface paper mock-ups and then they recreated them in the virtual reality.

Crucial guidelines

Below I gathered some crucial issues which Material Design adresses/tackles. Not all of them can be found in the specification.  If you are interested you can read all about it here: https://material.io/design/

Color

Color is an essential element – Material Design uses bright and vibrant colors/tones.

Example: We establish the color palette according to the guidelines and number the tones (from 50 to 900):

Main color – 500

Main dark color – 700

Accent – completely different color contrasting with main colors

You can use a tone palette generator while choosing colours: https://www.materialpalette.com/.

Theme

During a creation of a theme a main color, an accent color and their darker and lighter tones have to be used.

Novelty in the Material Design – Dark theme:

– it is suggested as an addition to the basic theme. It requires limitation of colorful elements.

Dark theme suits well if a page or an aplication is used in a dark room or in other dimly-lit space. It reduces eyes fatigue, and, in the case of OLED screens, it helps saving energy as black pixels do not emit light and do not absorb power as a result.

Typography

Depending on their place of use, following units describing font size can be distinguished:

Web – rem

Android – sp, min 12 sp

iOS – pt

Roboto is a default cut used in the Material Design. When it comes to alphabets other than the Latin one the default cut is Noto.

It is allowed to use fancier fonts in headlines as they intensify and diversify the effect and draw clients’ attention.

Examples of different styles can be found here: https://fonts.google.com/?category=Display,Handwriting

Color of the text is also important – usually brightening method with use of a transparency is used.

Icons

Product Icons

Product Icons represent products as well as a brand, e.g.:

All icons should be consistent with a theme of a given brand. 

In the proces of icons creation some Material Design rules can be used, e.g. layeredness, shadowing/shadows, folds/bends. For example:

System Icons:

System Icons are nothing else than geometrical shapes, simplified drawings that have to look good on every screen size. / on every size of a screen

They point out actions, folders, catalogues, etc.

They have one set shape – 24 x 24 dp,

Examples below:

Animation

Movement helps a user understand how interface elements are connected with each other. It gives an impression of a smooth running of an aplication. What’s essential in the Material Design is a material reaction – after touching/cliking an element reacts, moves upwards as if a finger or a cursor draws it to itself.

Components

The most characteristic components of the Material Design

  • Buttons
  • Cards – contain other gathered inactive elements (elevation 2dp, heightened 8dp),
  • Bars
  • FAB – Floating Action Button – button calling to action (call to action has specified parameters: an icon should be 24×24, button parameter – 56, elevation 6dp; Default 56x56dp; Mini 40x40dp) as you can see in the picture below:

Exemplary information put on bars:

It contains information about the given screen (e.g. navigation, title, action icons, an additional drop-down menu). It can disappear while scrolling down and appear while scrolling up.
It contains navigation and key actions (e.g.control unfolding the navigation, FAB, an action icon, an additional drop-down menu). It is used when there is more than one action on the given screen.

How to use it?

It’s very easy! You should join the CSS and Java Script project in Material Design.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

You will find the instruction here: https://getmdl.io/started/index.html. You should also check out a framework/library using Material Design, e.g. https://material-ui.com/. 

It’s worth a try!

Author: Patrycja Adamczyk

Sources:

  • https://medium.com/beginners-guide-to-mobile-web-development/a-guide-to-google-material-design-977315149ea5
  • https://getmdl.io/started/index.html
  • https://material.io/design/
  • https://material.io/design/components/

Recommended sites:

  • https://pay.google.com/about/#friends
  • https://www.dropbox.com/business/
  • https://rework.withgoogle.com/
  • https://material.io/design/
  • https://www.materialpalette.com/
  • https://fonts.google.com/?category=Display,Handwriting
  • https://getmdl.io/started/index.html
  • https://material-ui.com/

Comments (0)

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

All articles

Do you have a question?
Write to us!