Test out the Material Design UI in the Google I/O app

Roman Nurik, the lead designer for the Google I/O Android app, has posted a lengthy essay on the Android developers blog outlining how Material Design was used in the Google I/O app, and indicating some best practices for developers looking to adopt Material in the process.



surface2b

At the heart of Material Design is the idea that the elements in a digital interface should reflect the properties of paper or other tactile surfaces, and that users should interact with them in the same way. In short, the interfaces should be flat, but layered; the layers add a sense of depth, and the depth provides hierarchy and therefore a logical order for navigating through an app.

As Google’s Design Guidelines for Material explain:

In material design, every pixel drawn by an application resides on a sheet of paper. Paper has a flat background color and can be sized to serve a variety of purposes. A typical layout is composed of multiple sheets of paper.

Layout principles dimensionality dimensionality 04 large mdpi



Nurik also discusses the importance of colour in Material Design, and how it should be “bold, graphic and intentional”, primarily using one primary colour and one complementary accent colour (although the I/O app actually uses a second accent colour). Colours are also used subtly to highlight important features and further guide users through the app.

Grids layouts are also a significant part of Material, and this could arguably be the most important. Google has struggled to get developers to build or adapt their apps for tablet displays. With the grid layout paradigm built right into the heart of Material developer should be able to design able that adapt to the various screen sizes available on Android devices in a way they were reluctant to before.

Material Design looks like a major step forward for the Android UI, and looks genuinely nice to design for. It has already captured the imagination of many develops and designers, and we suspect that when Android L launches in the Autumn Holo-themed apps will age every bit as badly as Gingerbread ones did.

It’s still a while before we can expect Android L to start rolling out. If you want to get an early glimpse of what is in store, download the Google I/O app now.