At Google I/O, the Material Design team unveiled new end-to-end features: an expanded design guidance and improved components and tools. These changes seek to help both designers and developers find new solutions for the challenges they face every day. Let’s dig in on what’s new.Material Design emerged in 2014 as a solution to the lack of visual coherence between different devices, platforms and resolutions. Now, it has consolidated as a reference set of principles for designers worldwide and has become an adaptable design system of guidelines, tools and code used in millions of apps. The new update is diverse and accurate and seeks to go beyond being just a visual language.Matching Aesthetics with Product Identity
One of the disadvantages of Material Design has always been guidelines. Even if they have always been quite detailed, they haven’t allowed much flexibility causing a large number of applications to look the same.
Taking this into account, the Google team announced a plugin for Sketch named Material Theme Editor, which allows equipping the Material Design components with aesthetics that are much closer to your product’s identity.
Starting from four predefined templates, we can now modify from a simple control panel the following values: shapes (style and frames), colors (you can build color pallets and check accessibility in order to make products as universal as possible), the typographies (you can choose a maximum of 3 to avoid consistency problems) and icons (previously there was only one option available while you can now choose from five different style variations). These changes apply to all components and thus maintains design coherent.Streamlining the Designer-developer Workflow
Gallery allows us to organize and share our designs collaboratively. It was launched last year as a beta and at Lateral View we participated in it and we even sent feedback with our suggestions. The new functionalities seem to make Gallery a solid tool with a ton of potential.
This new version of Gallery allows us to centralize all our workflow in the same place and organize it by projects. Docs with the first investigations, sketches, tests and the final design which can be uploaded directly from Sketch with the same plugin, all in the same place.
In addition, each time we upload a file with the same name, Gallery creates a version of it, which allows us to track their evolution and get feedback from the different people who are involved in each part of the process.
They’ve also announced Inspect Mode (similar to Zeplin’s or InVision’s Inspect). This tool seeks to make developers’ lives easier allowing them to obtain information about the dimensions, typography used, color codes and all the necessary specifications for the implementation to be pixel-perfect. Obviously it is optimized for Material and its components, although the idea is to make it more and more universal. It has very interesting features such as detecting a Material Design component and showing the link to the documentation or recognizing when you are using a Google resource, such as Google Font or Icons, and show the direct link to download them.
Now, we have new possibilities to find the exact component needed for a particular situation. Some of them had already begun to pop in Google Products but had not been formalized yet in the documentation.
· New Floating Action Buttons: now we have more flexibility on where we can locate them.
· Backdrop: this allows us to show additional information without leaving the screen on which we are.
· Chips: small elements that represent an input, an attribute or an action.
· Text fields: in its two versions, Filled text fields and Outlined text fields.
· Bottom app bar: the well-known lower bar from iOS.
Both new components and tools demonstrate the maturity the product has reached thanks to the massive research work carried out by the Google team to get results that impact throughout the process: from the workflow itself to each and every final component. We will surely find new features in the coming months.