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
Exemplary information put on bars:
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:
Recommended sites:
Comments (0)