Skip to content

TechRepublic

  • Top Products
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • TechRepublic Academy
  • Innovation
  • Cheat Sheets
  • Big Data
  • Tech Jobs
  • TechRepublic Premium
  • Top Products
  • AI
  • Developer
  • Payroll
  • Security
  • Project Management
  • TechRepublic Academy
  • Innovation
  • Cheat Sheets
  • Big Data
  • Tech Jobs
  • See All Topics
  • Sponsored
  • Newsletters
  • Forums
  • Resource Library
TechRepublic Premium
Software

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

By Nick Heath November 7, 2014, 8:48 AM PST

Image
1
of 7

e-cal.png
e-cal.png
Material Design: 10 apps that show off Google’s new UI language

\N

Image: Google Play Store/E-sites

\N

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
calc.png
calc.png
Material Design: 10 apps that show off Google’s new UI language

Numix Calculator

Image: Google Play Store/Numix

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.png
reddit-news-pro.png
Material Design: 10 apps that show off Google’s new UI language

Reddit News Pro

Image: Google Play Store/DBrady

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
currencyconverter.png
currencyconverter.png
Material Design: 10 apps that show off Google’s new UI language

Flip Currency Converter

Image: Google Play Store/Sam Ruston

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
inbox.png
inbox.png
Material Design: 10 apps that show off Google’s new UI language

Inbox

Image: Google

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-play-newsstand.png
google-play-newsstand.png
Material Design: 10 apps that show off Google’s new UI language

Google Newsstand

Image: Google Play Store/Google Inc

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
topeka.png
topeka.png
Material Design: 10 apps that show off Google’s new UI language

Topeka

Image: Google Play Store

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
  • Software
  • Account Information

    Share with Your Friends

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

    Your email has been sent

Share: Material Design: 10 apps that show off Google's new UI language
Image of Nick Heath
By Nick Heath
Nick Heath is a computer science student and was formerly a journalist at TechRepublic and ZDNet.
  • Account Information

    Contact Nick Heath

    Your message has been sent

  • |
  • See all of Nick's content

Daily Tech Insider

If you can only read one tech story a day, this is it.

TechRepublic Premium

  • TechRepublic Premium

    Payroll Processing Checklist

    Some operations and tasks don’t require painstaking attention to detail. Unfortunately, processing payroll isn’t one of them. With sensitive salary and wage information, bank and direct deposit accounts, Social Security numbers and other personal information in play, the stakes are high. This guide — and the accompanying spreadsheet — from TechRepublic Premium will help you ...

    Published:  November 30, 2023, 4:00 PM EST Modified:  December 1, 2023, 9:00 AM EST Read More See more TechRepublic Premium articles
  • TechRepublic Premium

    Quality Assurance Checklist For Outsourced Projects

    Quality assurance refers to the processes being used to manage the project and to build the deliverables. This is in contrast to quality control, which refers to the activities used to create the deliverables. Because you are not responsible for the creation of the deliverables (quality control), you need to be comfortable that the outsourcer ...

    Published:  November 29, 2023, 4:00 PM EST Modified:  November 30, 2023, 9:00 AM EST Read More See more TechRepublic Premium articles
  • TechRepublic Premium

    Cloud Computing Policy

    The list of advantages to cloud computing include lowered operational costs, greater technological flexibility and the ability to rapidly implement new systems or services. Gains in business continuity are an especially noteworthy attraction to cloud services, which operate via remote systems that remain running in the event of a local disaster, such as a hurricane ...

    Published:  November 29, 2023, 4:00 PM EST Modified:  November 30, 2023, 10:00 AM EST Read More See more TechRepublic Premium articles
  • TechRepublic Premium

    Quick Glossary: Business Intelligence and Analytics

    Business intelligence and data analytics give tech decision makers a clearer idea of how well their companies are running and whether they’re meeting goals. Because BI incorporates data from across the enterprise — revenue operations, sales, supply chain and logistics — its insight is beneficial in areas such as customer profiling, customer support and market ...

    Published:  November 28, 2023, 4:00 PM EST Modified:  November 29, 2023, 9:00 AM EST Read More See more TechRepublic Premium articles

Services

  • About Us
  • Newsletters
  • RSS Feeds
  • Site Map
  • Site Help & Feedback
  • FAQ
  • Advertise
  • Do Not Sell My Information
  • Careers

Explore

  • Downloads
  • TechRepublic Forums
  • Meet the Team
  • TechRepublic Academy
  • TechRepublic Premium
  • Resource Library
  • Photos
  • Videos
  • Editorial Policy
  • TechRepublic
  • TechRepublic on Twitter
  • TechRepublic on Facebook
  • TechRepublic on LinkedIn
  • TechRepublic on Flipboard
© 2023 TechnologyAdvice. All rights reserved.
  • Privacy Policy
  • Terms of Use
  • Property of TechnologyAdvice
CLOSE

Create a TechRepublic Account

Get the web's best business technology news, tutorials, reviews, trends, and analysis—in your inbox. Let's start with the basics.

Already registered? Sign In
Use Facebook
Use Linkedin

* - indicates required fields

CLOSE

Sign in to TechRepublic

Not a member? Create an account
Use Facebook
Use Linkedin

Lost your password? Request a new password

CLOSE

Reset Password

Please enter your email adress. You will receive an email message with instructions on how to reset your password.

Check your email for a password reset link. If you didn't receive an email don't forgot to check your spam folder, otherwise contact support.

Back to login
1 Finish Profile
2 Newsletter Preferences
CLOSE

Welcome. Tell us a little bit about you.

This will help us provide you with customized content.

No thanks, continue without
1 Finish Profile
2 Newsletter Preferences
CLOSE

Want to receive more TechRepublic news?

Newsletter Name
Subscribe
Daily Tech Insider
Daily Tech Insider AU
TechRepublic UK
TechRepublic News and Special Offers
TechRepublic News and Special Offers International
Executive Briefing
Innovation Insider
Project Management Insider
Microsoft Weekly
Cloud Insider
Data Insider
Developer Insider
TechRepublic Premium
Apple Weekly
Cybersecurity Insider
Google Weekly
Toggle All
No thanks, continue without

You're All Set

Thanks for signing up! Keep an eye out for a confirmation email from our team. To ensure any newsletters you subscribed to hit your inbox, make sure to add newsletters@nl.technologyadvice.com to your contacts list.

Back to Home Page