Software

Material Design: 10 apps that show off Google's new UI language

By // November 11, 2014, 2:37 AM PST // nickjheath

Image 1 of 10

  • With Material Design Google is hoping to introduce a tactile feel to apps running on its platforms.

    The design guide describes how to build app interfaces from components that behave like physical objects - occupying 3D space, casting shadows, stacking on top of each other and even simulating momentum when moved.

    This physicality isn't just a stylistic choice, but aimed at making interfaces obey a set of rules that mimic real-world behaviour and intuitively make sense to people.

    The distinguishing features of Material Design interfaces are bold colours and distinct components separated by clear white space.

    Google describes Material Design as an attempt to take hundreds of years of knowledge about typography, graphic design and how to structure information from printed media and encompass it in how apps are constructed.

    It's a design language Google will use in its own apps across computers, phones, tablets, wearables and TVs today, and on whatever new platforms emerge tomorrow. Not only that but Google is encouraging third party app developers to follow suit, providing the fonts, layout templates and colour palettes developers need to get started on building a Material Design app.

    Material Design can already be seen in a selection of apps running on Android Lollipop, the latest version of the Google's operating system for phones, tablets, TVs, wearables and cars. Here are a selection from Google's Play Store that show off some of Material Design's key characteristics.

    e-Cal

    The e-Cal calendar app demonstrates how shadows provide visual cues about the relationship between components of the UI.

    Notice how the shadow below the yellow button provides an indication of how fair it sits above the surface below. The elevation of an object determines the appearance of its shadow.

    Image: Google Play Store/E-sites

  • Numix Calculator

    Here you can see the Numix Calculator app showing off a selection of the bold colours that Google suggest using in a Material Design app.

    Google recommends choosing from a selection of 500 shades to use as as primary colours.

    Image: Google Play Store/Numix

  • Reddit News Pro

    One of the most important components of material design apps are cards, as seen on left in this Reddit News Pro app.

    Google describes a card as a piece of paper that contains unique related data: for example, a photo, text, and link about a single subject. Cards are typically an entry point to more complex and detailed information.

    As seen here cards have a constant width and variable height.

    Image: Google Play Store/DBrady

  • Google Play Music

    In its design brief Google recommends breaking underlying edges with cards, as seen in this Google Play Music app.

    Image: Google Play Store/Google Inc

  • Flip Currency Converter

    In Material Design apps Google recommends using Tabs to make it easy to switch between different views or functional aspects of an app, or to browse categorised data sets, as seen in this Flip Currency Converter app.

    Google says tabs should be used to organise content at a high level, for example, to present different sections of a newspaper.

    Image: Google Play Store/Sam Ruston

  • Google+

    The Google+ app shows the standard toolbar layout used in Material Design apps, which Google characterises as a "strip of paper used to present actions".

    Actions cluster on either side of the toolbar, with icons for navigation, such as a drawer menu or an up arrow, on the left, and contextual actions on the right.

    Toolbars frequently form a step above another sheet of paper that displays the content that the toolbar's actions relate to.

    Image: Google Play Store/Google Inc

  • Inbox

    Google's new email app Inbox demonstrates how Material Design apps avoid slicing up the interface into too many regions, instead using whitespace to delineate secondary areas.

    Image: Google

  • Google Newsstand

    When using images Google recommends staying away from stock photos and instead using imagery specific to the associated content - as seen in this Google Play Newsstand app. Where content is abstract it recommends choosing an interpretive shot.

    Image: Google Play Store/Google Inc

  • ​Google Maps

    The Material Design look for the new Google Maps app shows how the language creates distinct layers and buttons in an attempt to make navigation simpler.

    The positioning of the car button also reflects the recommendation to break edges with floating action buttons.

    Image: Google Play Store/Google Inc

  • Topeka

    The Material Design guidelines recommend making system icons - those that execute a command - front-facing, graphic and bold and composed of geometric, consistent shapes.

    Google provides a selection of about 750 such icons to download in a variety of formats, one of which is the tick seen in this app called Topeka.

    Image: Google Play Store

With Material Design Google is hoping to introduce a tactile feel to apps running on its platforms.

The design guide describes how to build app interfaces from components that behave like physical objects - occupying 3D space, casting shadows, stacking on top of each other and even simulating momentum when moved.

This physicality isn't just a stylistic choice, but aimed at making interfaces obey a set of rules that mimic real-world behaviour and intuitively make sense to people.

The distinguishing features of Material Design interfaces are bold colours and distinct components separated by clear white space.

Google describes Material Design as an attempt to take hundreds of years of knowledge about typography, graphic design and how to structure information from printed media and encompass it in how apps are constructed.

It's a design language Google will use in its own apps across computers, phones, tablets, wearables and TVs today, and on whatever new platforms emerge tomorrow. Not only that but Google is encouraging third party app developers to follow suit, providing the fonts, layout templates and colour palettes developers need to get started on building a Material Design app.

Material Design can already be seen in a selection of apps running on Android Lollipop, the latest version of the Google's operating system for phones, tablets, TVs, wearables and cars. Here are a selection from Google's Play Store that show off some of Material Design's key characteristics.

e-Cal

The e-Cal calendar app demonstrates how shadows provide visual cues about the relationship between components of the UI.

Notice how the shadow below the yellow button provides an indication of how fair it sits above the surface below. The elevation of an object determines the appearance of its shadow.

Image: Google Play Store/E-sites

Related Topics:

Software Enterprise Software Developer Open Source Software Mobility Cloud

By Nick Heath

Nick Heath is chief reporter for TechRepublic. He writes about the technology that IT decision makers need to know about, and the latest happenings in the European tech scene.