Colouring-in Team

Branding too strong? Design in greyscale

I hesitated a bit before beginning this blog post for fear that this is actually something that other designers everywhere do all of the time, and I might end up looking like a feckless idiot tapping out egg-sucking instructions for the benefit of no one but the aesthetically deaf. However, as I can't find anyone else talking about this after a full 20 seconds of searching, here goes...

When doing the first visual design for a new website, why not start off in greyscale? That is, design for the final layout and typography, but only using shades of grey.

I first did this quite recently, as a result of inspiration failing to strike in the face of what seemed like the perfect starting point. I'd taken the client through quite a thorough UX analysis and design phase, resulting in a wireframed prototype that seems to be on the money. I had brand guidelines, a good understanding of how the UX requirements should influence the graphic design, and a good feel for what the client and end users would want to see. And yet no matter what I did, I just couldn't seem to get started.

(I don't know if anyone else finds this, but when I'm trying to come up with a new site design, I often find there is a sort of tipping point when the design takes on a life of its own. It's as if the first bit is all uphill, and then suddenly it finds its own direction and you coast down to a completed concept.)

In the end it crossed my mind that the bolder-than-bold corporate colours in the brand guidelines where too distracting, and somehow made 'good' aesthetic decisions harder to make. So I started again with just a greyscale version of the logo in the top left, and began to add the elements specified on the wireframes, but this time only using shades of grey. This seemed to make it easier to focus on the balance of the individual elements on the page, their contrast with each other, and the specifics of the typography. More impact for an individual element might mean a darker grey, or making it bigger, or even a different design. But by not having to worry if I'd picked the right colour from the brand palette I could focus purely on the clarity and balance of the composition.

The outcome was that once I started working this way I very quickly had a completed page mock-up I was happy with, albeit one best suited to hamsters. The next step was obviously to add those missing brand colours, trying out swatches and tints until the colours were talking the same language as the rest of the design.

Unfortunately I can't share the real design work, as the company is big and has put a lot of effort into a rebrand that has yet to launch. But the concept isn't exactly complex, so I doubt anyone needs to see the same design in colour and mono to get the point!

In many ways this is almost a natural progression of the very aesthetically conscientious style of wireframing that I know a lot of UX-ers prefer. I suppose design is like most problem-solving, and if you split one large problem into two smaller ones you have a better chance of getting to the right answer.

So if you find yourself facing a similar problem, and your design is all perspiration and no inspiration, have a go at taking the colour out of the equation - you might be surprised at how much it helps.

Categories: Design, Web design

Tags: ux, web design