Designing in the material style—without just copying Google

We recently decided to replace our stock mail app prototype with something more engaging and up to date—something that takes Google’s material design principles into account.

But we’ve noticed that many designs following Google’s guidelines end up looking, well … like Google. Super-smart branding move on Google’s part, but not so awesome for companies that want to keep up with design trends and retain the strength of their own brand.

While designing our new mail app prototype, we considered this problem in depth. We wanted to be sure we adhered to material design’s core principles of being rooted in the tactile, using motion to create meaning, and being boldly intentional—without recreating Google Now or Inbox.

So we wanted to share all we learned from building this kit in 2 ways: First, by sharing our thoughts on designing in the material style. And second, by sharing the kit itself—you can grab it at the end of this article.

Color

Google’s long been famous for their use of bold primary colors, from their ubiquitous logo to the outdoor furniture at their Mountain View campus. Material broadens their palette with a secondary, saturation-based spectrum, but remains focused on large fields of flat color devoid of the gradients that dominated web design for so many years.

And although conversations around design trends tend to conflate gradients, drop shadows, and skeuomorphism, material design encourages dramatic shadows to reference back to the tactile realities it’s founded on.

So, we differentiated by immediately presenting the user with dramatic gradients—including stark banding in the app’s main icon. The colors that compose the gradients derive from the material palette, but we blend them in ways Google doesn’t. Then we made the floating action button a bit transparent for good measure. But it also throws strong shadows below the envelope’s fold.

Because material design requires bold, high contrast, and deeply pigmented colors, it’s tempting to use a super-broad palette to fill all the roles color plays in design. But colors don’t need to be disparate to fit the material criteria and accomplish their goals—they just need to be intentional.

For our mail app, we ended up with a relatively simple, analogous color palette that uses shadows and gradients to differentiate from Google and create and communicate meaning.

Typography

Google obviously gets the power of typography in branding. With the creation and consistent use of bespoke fonts for their Android OS—first Droid Sans and Serif, now Roboto and Noto—they’ve created not only clear interfaces, but also reinforced their brand. And they’ve taken it a (smart) step further by sticking to Roboto for web properties like the Play store, the material design site, and the Android versions site.

We wanted a clean, modern look, similar to Roboto—but not Roboto. Roboto’s description on Google Fonts makes it clear that they tried to make it all things to all people—they call it grotesque, humanist, and geometric in just a couple sentences.

So we chose Avenir, another boundary-straddling font that’s derived from the starkly geometric Futura, but incorporates more humanist curves. And unlike Roboto and Apple’s beloved Helvetica, it is not a grotesque.

It’s worth noting that we also steered clear of the humanist Open Sans, one of our own brand fonts. Didn’t want to overstress our own brand either.

Interaction and animation

Interaction, motion, and animation can give users a ton of feedback, marking transitions, letting them know they’ve completed a task, and communicating an app’s architecture. All without spelling everything out in copy.

Google’s animations can inspire you to think about how things connect and transform, how UI elements contribute to user adoption and onboarding, and how your interface components can delight (but not distract) the user.

But make sure it ends at inspiration. Carefully consider what the best interaction metaphor for your app might be. Google’s paper-and-ink metaphor is pretty compelling, there’s no denying that. But it’s only right for your app if it helps people understand what it’s supposed to do, how it works, and how its various elements interrelate.

Using the interactions and animations that make sense for your app and help integrate it into the Android (or iOS) ecosystem will create the best user experience. It always pays to keep your platform in mind—which is why we stuck with the iOS toggles in the settings, altered slightly to retain the material feel.

Now grab it for yourself

Designing this new prototype was incredibly educational for us. And we hope you find the Sketch kit just as informative. It’s got 23 screens total, including onboarding. Download it now, for free!