Designing interesting looking websites in greyscale, minimal tones

Question

I know a business that wanted a website to match their brand, and it would seem that they are allergic to colour. I think designs in greyscale can look amazing, especially in print, but it feels near impossible to apply to website design.

In this case, the business was centered around social networking and new technology but a greyscale design I feel is rather outdated and didn't reflect at all what they did, even though, apparently that was their brand. (They said they were going for that 'Apple like minimalism style and sophistication' but perhaps they were thinking of Apple ten years ago) The business's website today is about as bland as cold white rice, (like one of those warranty documents you get with a new gadget you bought).

I recently received a request from a client who, for an architectural practice requested the same look and feel, without colour.

What do think makes a website look modern and interesting while lacking colour?

Answer 1

The challenge with greyscale on screen is a lack of richness. That is, if you stick with strict greys. There are of course variations of grey that are in fact chromatic neutrals. IOW, they are not completely devoid of saturation.

Albert Munsell, had some great theories about the use of color that may be helpful to you. In particular, his thoughts on color balance come to mind. In his own work as a painter, Munsell explored the idea that the artist should carefully balance color according to it's strength.

Take this image for instance. There is a tremendous amount of cool, neutral color but it's the much smaller quantity of intensely saturated warm tones that enliven the scene.

Here's another by Jacques-Louis David.

Following this principle, your primary palette could consist of slightly chromatic neutrals. You could then punctuate that palette with a sparing amount of color you think your client might tolerate. In fact, I think you'll hit exactly what they're after.

In this example, the grey on the left is at zero saturation. On the right, I boosted saturation to give the grey some life but not so much that it becomes "colorful" (God forbid!). Accenting either of those greys with a strong yellow charges the palette with some energy.

Khoi Vinh's blog is a great example of this idea in practice. Notice the spark of color in the nav on hover.

Answer 2

In a situation like this, I go back to the basic design elements and principles. These are all tools in the toolbox, so if one tool is unavailable, then you've gotta pick some other ones! Think about how you can use different lines, shapes, textures, spaces, and forms to create something interesting without color.

Contrast is also a very critical thing. And not just black and white with the shades of gray in between; think big vs. small, textured vs. smooth, moving vs. stationary.

If you ever look at engraved art (get some hi-res scans of U.S. currency as an example), you'll see that people can do amazing work with a limited color palette. The art of Lissitzky came to mind as well...there's color there but he was really good at working with minimalistic shapes and making them look good.

B&W photography could bail you out in a pinch too, if you get some cool shots and use them well.

Answer 3

The problem with greyscale web design is that you're removing a key dimension from your work.

If you're just designing a poster or creating an illustration, this isn't such a problem, but web design has specific requirements where reducing your palette to greyscale makes it incredibly difficult to meet design and usability requirements.

A big example of this is hyperlinks. On a grayscale site, you can only make the links darker or lighter than regular text. This makes the links much harder to see (even if they're underlined) than on most sites.

On top of that, if you use a darker/lighter shade for links, then what do you do with headings that aren't links? You end up with, either, the inability to use text color to distinguish different text roles (or indicate importance, such as required fields), or you end up with so many different shades that your composition just looks a grey mess (the more shades you use, the less contrast there will be between each shade, reducing their effect, and blending the text together).

In most cases, I'd recommend the designer not to even try it unless it's a really artsy-type website that is heavily media/graphics-based with minimal text content, or something like a creative minimalist personal landing page.

I've personally worked on 2 black/grey/white designs recently, and they were both incredibly difficult to develop and still ended up pretty mediocre. (On the flip side, this experience made me appreciate the use of color in design a lot more. It's like training with one hand tied behind your back for several months, and then finally being able to use both hands again. It's amazing what a touch of color, even just one color, can add to a design.)