During the presentation of Android L, Google introduced a new way of thinking user interfaces, the Material Design. A clean break with the Holo interface we were accustomed to use, the new Material Design will be gradually applied to all applications of the big G.
“We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science.”
Layout
Material design utilizes fundamental tools that have come from the world of print design, like baseline grids and a common set of structural grids, which allow you to maintain a consistent look across pages. The layout is designed to be easily adapted to various devices with different screen sizes.
Developers can find in the documentation a set of guidelines regarding the margins to be used in the various views of their app, the minimum size that icons should have, and the ratio of the images.
Characteristic feature of MD is the use of depth: the contents of each application will be divided in layers, and each element will be positioned above or below another layer based on its importance.
On lowest level of the app there will be the background that will be superimposed by the content card with the information content, the new Floating Action Button, that provides a series of quick actions contextualized according to the app, the Status Bar and the Navigation Bar.
Another important element of the Material Design are shadows that help to emphasize the division between the various layers.
Style
One of the key principles of Material Design is that interfaces must be “bold, graphic, intentional”. The color becomes disruptive element compared to Holo. Where once abounded blacks and blue are now being used bold colors that are well suited to the new style that Google wants to give to his OS.
In the MD there is a main color and one or two accent color. The primary color is what characterizes the entire app, every type of application has a primary color associated with it. The accent color is used instead of the application one to give greater visibility to certain items, such as a selected tab or a toggle on.
Special attention is also given to the images, which must be consistent with the rest of the layout and must be “optimistic, delightful and honest”.
Animations
The Material Design makes extensive use of animations, but in a very careful way.
The animations shouldn’t surprise the users with spectacular effects but support them during the user experience. Animations should provide a sort of visual continuity in the transition from one state to another, must be clear and not confusing.
Animations, however, are not only used during the change of state but can also be applied to individual pages to emphasize user interactions, for example when the icon menu becomes an arrow after user’s click.
“Users do notice such small details”.
Leave a Reply