Introduction to Material Design
If you are not familiar with the concept of material design, I have you covered.
Material design is a rather new (and constantly evolving) way to design applications and websites, launched at the 2014 Google I/O and publicly released with Android 5.0 Lollipop update in November 2014. The idea behind material design is to develop a single underlying system that allows for a unified experience across platforms and device sizes.
Principles
Material is the metaphor
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
Bold, graphic, intentional
An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.
Motion provides meaning
All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.
Guidelines
Google has created a dedicated website will all the documentation and visual examples of do and don’t about material design. Templates can be downloaded, together with color palettes, fonts and icons. New content is added on a regular basis, and summarised in the Updates section.
Frameworks
In an attempt to bring Material design to the Web user interface, many third party web UI frameworks have come to existence following Google I/O 2014. The post from Kanishk Kunal – 7 Material Design Web UI Frameworks – provides a very detailed list of existing Material Design Frameworks for the Web, such as
No comments