Free download: Sketch UI Kit

Following Google’s Material Design principles results in engaging, and up to date designs. But also produces an end result that ends up looking like…well, Google. Super-smart branding move on their part, but not great if you want to retain the strength of your own brand.

InVision set out to create an email design that adheres to Material Design, without looking like a Gmail clone. It’s a great success, so we’re delighted that they’ve agreed to offer it as a free UI kit to WebdesignerDepot readers.

Color

Google’s long been famous for bold use of color, and Material Design broadens that palette with a saturation-based spectrum. It remains focused on large fields of flat color devoid of gradients that used to dominate the Web. 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 this download differentiates itself immediately by presenting the user with dramatic gradients, including stark banding in the design’s main icon. All of the colors are drawn from Google’s Material Design palette, they’ve simply been blended in a new way. 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.

Typography

Google clearly understands the power of typography in branding. Their bespoke fonts create clear UIs and reinforce their brand. Invision wanted a similar, clean modern look to Roboto, without using Roboto. So the template uses Avenir; another clean font that has geometric origins, with a humanist warmth.

Interaction and animation

It always helps to keep your platform in mind when designing, in order to produce a consistent experience for the user. That’s why this template has an iOS style, albeit one that works well on Android too.

Google’s Material Design has some great things to say about how interaction and animation can delight, and not distract, your users. But Google’s Material Design examples are also very specific, make sure that when you use animation and interaction, it’s the right animation and interaction for your project. This UI kit has been designed to allow a variety of different approaches, so you can employ whatever strategy best suits your design.

Download the file beneath the preview:

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.