Great Looking Grey in User Interface Design

So many leading brands are taking advantage of grey to make clean design more attainable in complex situations

Take a look around the most well known apps on your phone or in your web browser, and you’ll find a nice little technique that is being utilized to keep the web clean and tidy.It’s the use of grey, and its really useful for User Interface designers like myself.

What’s so great about grey?

In an online world where we are bombarded by content and media of all kinds, most brands are becoming hyper-focussed on “clean design” for all their online user experiences. Clean design is typically characterized by solid colors and lots of breathing room between elements, and there’s one really big element that is often needed: white space. Oh that’s right, good o’l white space.

How can we get more whitespace while also organizing complex layers of information and interaction? That’s were grey comes in. It allows designers to reduce the prominence of inactive content, emphasis important or active content, and all while maintaining a squeeky clean user interface. Take a look at some examples below:

Google Inbox manages hierarchy with various grey densities, those elements in white support primary viewable content.

Primary content remains in the white space, while secondary actions (such as reply) are possible in some light grey areas. The placement in a traditional location (bottom of the message) is also invoked to help the user find the action they need.

Grey background in the inbox holds white message previews. This would feel a lot different with a white background and grey message previews.

Easy on the eyes light grey holds message previews in Google’s Inbox design.

Section headers get a 2nd degree of grey in Google Inbox.

Two shades of grey are used to denote hierarchy of information and place content further in the forefront of viewing. Interactions for closing a message, or closing a thread of messages can all be found with the “check” icon located in its respective hierarchy (according to grey).

Amazon.com creates space between elements and organizes information on their order tracking page with grey headers.

Browse all of the Google iOS products and you’ll find this trend continues in nearly the complete set because it’s a pretty central element in Google’s Material Design.

Continue browsing the web with a grey alert in your mind and you’ll find its particularly utilized in News Feeds such as that of Facebook or Pinterest (as shown later in this article).

That’s me, @Nathaniel_CA

Twitter uses white cards contained in an light grey landscape.

Some of these shades are more difficult to spot because often Twitter cards are pushed right up against each other. This makes sense for use of space on a mobile device, but when card interfaces meet desktop web browsers these elements tend to spread out and show the grey ether supporting their existence in space.

For that reason it can be less often that grey is noticed on a mobile device, oh but its there.

In many card layouts, grey fills in the left/right padding on a screen that would otherwise be whitespace the page were instead a text article. The latest “Apple News” for example is hyper-white, with almost no grey at all in its support of content. Even still, take a look at the navigation bar in Apple News and you’ll see its about as close to white as you can get without typing 6 “F’s” in a row on a CSS file.

Take a look at Pinterest and Apple News

Below Left: Pinterest holds material in LCD-land with useful structural matter: grey.

Below Right: Title and Nav Bars in Hyper-White Apple News shows us that if you don’t want to take away the clean feeling from all that white… use the next best thing.

Using grey for all the right reasons.

So let’s talk about the specific ways that grey improves a designs ability to manage content and exactly why it works (in most cases)

It’s easy on the eyes! Well that’s for sure. There is little more soothing to the eyes than some light shade of grey in various hues. In fact, it’s easier on the eyes than even white! All the more reason it makes the content shown in white pop more content in grey.

Grey matches everything. This is true whether composing your outfit from the closet, choosing colors for you home, or designing layouts for an app. You’ll run into color-clashings with Black, Brown, and certainly blue, red, orange, green, (you name it). But every color looks good next to grey.

Allows greater contrast for buttons and CTA’s. Using color is a powerful element in a designer’s tool kit, so being able to hold back on color when establishing layouts and hierarchies means that when it comes time to fill in that call to action (CTA) button, go crazy… use the brightest color you can think of. The result is a clean layout with vibrance and excitement that draws visual attention to our user-goals. How great is that?

Enables many levels of hierarchy. This is because [news flash] there’s not simply one shade of grey! Ugh… the clichés stalk me in this article. As one famous novelist has shown, there are many shades of grey, and that’s just on the black/white spectrum, pure grey hardly exists in nature, so it’s a better idea to incorporate some amount of tint into your grey concoctions.

Places content in the cleanest place possible (white). With grey being used to support content in a layout, this allows the content itself to be shown on white material, directly attributing to your clean design.

Draws attention to content. The whitest brightest area on the page gives content the emphasis it needs. After all, content is the truth, and so it deserves preferential treatment.

It allows you to use more whitespace, and white space on top of white space. Grey almost looks white, so you can incorporate some grey to divide white sections without complicating the design or hardly even being noticed at all.

So grey allows us to design content and user interfaces so that secondary elements and structural guides are out of the way from visual or conscious attention, which is exactly what a good design is always aiming to do.