Top

Material design

material design main

While reviewing given article you will find links that according to our opinion are good examples of works performed in material design.

Given the world not so long ago the own vision of user interface of the future, Google has combined the principles of good design with innovations and new technologies opportunities, improving both visual and functional part. materialize MaterializeCSS is a modern responsive CSS framework based on Material Design by Google Google experienced a real design revolution with the task to create a visual language that would help unite the entire user experience, regardless of the variety of platforms and devices. Soon the work started and it introduced a new design standard known as Material Design. matrox

Matrox is a Material Design Multi-Purpose HTML Template

Such trend as Material Design allows to improve UX, causing a desire to turn back to the resource again and again. Furthermore one of its key elements is an opportunity of seamless interaction of different functions on a single platform.

halo Halo – Material Design Mobile Template

Simple and useful applications of Material Design began to transform and now stand out from the crowd with magnificent and thoughtful design. The company began to focus not on tiny changes in colors shades, but to develop a philosophy which was to unify all platforms subordinated to Google. uplabs

UpLabs is a place for designers and developers to find, share and buy inspiration and resources to build apps and sites.

Material Design is a common concept of construction of the logic for both services appearance and applications. It unifies all the Google products to make as easy and intuitive experience for user as it possible. The idea is so ambitious that will transform not only the appearance of all the Google’s products. Coming of the new concept will change the role of the company in people’s lives. mdb

Material Design Blog is a great blog where first-class Material Design resources.

What are the features of Material Design? Surfaces and edges of elements in Material Design combine visual images and signals, by that creating tips which help user to intuitively navigate on a site (as if all this was happening in the real world). Material Design is characterized by rich and smooth colors, large typography and a lot of padding between elements. Together these elements create a new reality with the conceptual meaning and a host of features that give the user unique UX. Interface structure of Material Design borrowed lot of “tricks” from print design, though they are not applied in its original appearance, but in improved one. Material Design adds to these “tricks” unlimited scalability and change the page size that allows to adapt design to any device such as a tablet or smartphone. All of these features give a feeling of supreme comfort while working with navigation and interface (as the unlimited opportunities are subject of simplicity principles) and evoke a sense of confidence. Animation in Material Design is often used to create a smooth transition, but we should not only be confined to this framework. With the help of animation many details of the interface and navigation pane can be improved. In addition, you can use small details in icon menu that will not only add clarity, but also emphasize your concern for applications aesthetic. Note that Material Design focuses on usability and not only on good design as such. Its principles may become the best starting point for building an application that will conquer the huge audience with its elegance and comfort.

Layers in 3D-space have its coordinates on x, y and z axis (z-axis is perpendicular to the plane of the screen display sideway user’s view). Each of them occupies one position in z-axis and has an unwavering standard 1 dp thickness (abstract unit of measurement that allows applications to look the same to a different resolutions). Except physical characteristics, material design has unique properties. Layers can instantly change its dimensions in x and y axis. The round shape could turn into a square one, and a small dot could stretch out to dimensions of the whole screen. The layer can arise from nowhere and disappear just as suddenly, it can be divided into several segments and join several parts, creating a single canvas.

An important aspect of Material Design are shadows. They arise due to two sources of lighting: directed and diffused light. Directed light produces pronounced shadow, which can be clearly seen in motion, and scattered light evenly illuminates the entire surface of the layer. Shadows give an idea of how high the objects are on top of each other and allow user to quickly navigate the new interface for it.

The purpose of Material Design is to unite and make common the logic of work to all services, make it look convenient for users.

The main thing in Material Design concept is that the objects properties and its behavior on the screen should be as clear and predictable as normal events in a person’s life. Pressing the button should trigger action that affects the entire interface completely, regardless of device’s size and screen diagonal.

Material design rule: Motion provides meaning. Motion strengthens the user as the prime mover. Primary user actions appear to be inflection points that initiate movement, changing the entire structure. All the action takes place in a single environment. Objects are presented to user without disturbing the continuity of experience, even to the extent of transformation and reorganization.

Conclusion: In a short time Google will not be perceived by users just as a search engine, Android-smartphone, Chrome browser or a separate GMail service. The concept of unified interface design and the integration of all the services will create an entirely new user experience. This cutting-edge technology can simplify the user’s life and save his time, demonstrating that Material Design is more than just an elegant user interface.

Ilya Pavlov

Ilya Pavlov

Creative director, web designer, developer and founder of Fruitful Code.