The internet is full of click-bait inspired titles about how one thing or another is going to destroy design, websites or the entire internet, but one of the more legitimate(ish) subjects in this ilk is material design. A ‘visual language’ created by Google, material design’s goal is to make itself universal for websites, which can utilise it using the tool Google provided, Material Design Lite (MDL).
Google’s guide dictates a set of rules and specifications for design, the specifics of which even go so far as to define what colours to use and the exact density-independent pixel (DP) elevation of your elements. Material design has generally received a good reception, with many designers adopting the style, if not with the MDL, then utilising the techniques and styles from the Google material design guide in their own website design. According to our technical director, Jamie, “With the growing number of material design frameworks, this trend will continue to influence web designers.” Once upon a time, design was all about pseudo-3D effects style, skeuomorphism, until the minimalistic flat design took over with its user-friendly interfaces. Now, Jamie tells me, it looks like material design has taken the lead from flat design as the hot design trend.
Not everyone has been keen to take up material design, however. Several writers/designers have approached the new design language with scepticism. A recurring concern is this: with rules so specific and strict, can a brand maintain its visual identity (i.e. the visual elements that make up the brand identity)? Matt King, our Director of Creative Technology, falls into this sceptical camp.
“Material Design was originally conceived of to ensure consistent user interfaces across Google’s own web properties. Put another way, it forms Google’s own design guidelines for their own products and sites. Creating a publicly available design framework based on it is commendable, but should probably be restricted to prototyping or personal projects. That’s not to say that in and of itself Material Design is bad, it’s just that it’s so entwined with Google’s brand I find it hard to see how a different company that simply lifts it for use on their online properties can hope to retain a recognisably unique brand.
Maintaining your brand guidelines on your website can be tricky, but that’s not to say you shouldn’t even try. Design frameworks like MDL are not the answer for businesses serious about having a strong online brand, but that doesn’t mean the general design trend can‘t be an influence.”
Material design is not law
The first thing you need to acknowledge is that material design is a toolkit. As much as Google would probably like their new rulebook to be exactly that, you don’t actually have to follow it to the letter. It’s there to be used when appropriate and can be really helpful when used in the correct context, but you don’t need to use it if it doesn’t fulfil your needs properly. A hammer works really well for getting a nail into a piece of wood, but you wouldn’t use it to chop down a tree.
DIY your visual elements
Visual elements are one of the key identifiers of your brand – users see your site before they read what’s on it. These elements, such as icons, buttons and controls, can still abide by the laws of material design, but you can create them yourself using the Google instructions as a guide, rather than a template. This way you get all the advantages of Google’s visual language design and are able to differentiate the visual elements on your site from competitors.
Don’t be afraid to use your own typeface
Your company will likely have guidelines on how to visually represent the brand. This will include several areas, one of which is typography. Google, however, have said that Noto is the standard typeface for Chrome in all languages (Roboto on Android). But that doesn’t mean you need to follow this rule. If everyone on the internet used the same font then internet aesthetic would become uniform, so mix it up. Make your typeface match your design, even if that ends up being Noto after all!
Some people might be concerned about different typography in the context of phones, however. Many users feel comfortable with the typefaces that have become standard on phones. In this case, their user experience is enhanced with a familiar typeface. Designers developing a responsive website will be able to adjust the font of the site for phones, should it be a concern for them.
Find contrast within your brand colour palette
Lastly, arguably one of the essential factors in brand identity is the colour palette. Material design is inspired by bold hues contrasting with muted environments. Google even go so far as to provide you with colour swatches. But, again, this is merely a guide: a tool in your toolbox. If you don’t already have an established colour scheme for your brand, you can play with pastels, darker shades or less saturated themes to find what works for you. The material design guide states that there should be enough contrast between different UI elements, which should be true in any case for the purposes of a better UX. With all that said, we have to insist that, unless absolutely necessary, you avoid colours for your typography and stick to white or black!
There’s been a lot of hyperbolic rhetoric about how material design is going to make all websites feel aesthetically similar, or how some of the elements make for a worse UX. But it’s been a while since Google introduced material design and, despite a few websites giving off a familiar structure and style, the internet has remained in one piece. Brands shouldn’t need to worry about maintaining their identity in the wake of these new guidelines because that’s just what they are: guidelines. The guidelines are very helpful and have been developed to create a better UX (which will, in turn, improve your SEO), but a good designer knows how and when to stray from the guide and work for what’s best for the brand.