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

    Remote Device Management and Wiping Policy

    The purpose of this policy from TechRepublic Premium is to establish guidelines for the remote management and wiping of personal devices used in a bring your own device program. This policy aims to ensure the protection of sensitive company data in the event of security breaches, device loss, theft or termination of employment or contract. ...

    Downloads
    Published:  December 10, 2023, 4:00 PM EST Modified:  December 11, 2023, 8:01 AM EST Read More See more TechRepublic Premium articles
  • TechRepublic Premium

    Incident Reporting and Response Procedures Policy

    The purpose of the Incident Reporting and Response Procedures Policy from TechRepublic Premium is to establish a clear and efficient process for employees to report security breaches, device loss, or data exposure incidents involving personal devices used for work purposes. From the policy: CONFIDENTIAL REPORTING Employees are strongly encouraged to promptly report incidents, and they ...

    Downloads
    Published:  December 7, 2023, 4:00 PM EST Modified:  December 8, 2023, 8:02 AM EST Read More See more TechRepublic Premium articles
  • TechRepublic Premium

    Quick Glossary: Cryptocurrency

    Cryptocurrency is a popular technological worldwide trend. As with any investing avenue, the revenue one can make dealing in cryptocurrency can vary depending on the time put into the endeavors, market fluctuation, choice of investments, available capital, how loss averse you are, your short- and long-term strategies and other traditional investment factors. Be forewarned, scams ...

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

    What Is Artificial General Intelligence?

    Artificial general intelligence, or AGI, is a hypothetical form of AI designed to perform human-level cognitive functions, such as the capacity to self-teach. AGI is regarded as very powerful since it can autonomously solve a wide variety of cognitive tasks, as opposed to weak or narrow AI systems that carry out only particular or specialized ...

    Downloads
    Published:  December 6, 2023, 4:00 PM EST Modified:  December 7, 2023, 7:51 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