White on White Web Design Style
I've recently found myself talking about my current web design style as "white on white".
"White on white" feels like a super-modern, clinically clean and well-lit environment that gives an aura of calm and professionalism.
Check out these 9 examples of recent UI designs, and consider if "white on white" could be a useful addition to your designs.
Join Me For a Breath of Fresh Air
Save the Pixel is the web design discipline that teaches a minimal approach to using pixels.
Following the pixel-saving standard, web designers should use pixels with care, as though they are a precious limited resource.
Pixels should only be used to communicate with the site’s visitors, whether by presenting hard information (text & data), or using images and graphics to convey softer meaning.
Either way, your site should usually use more busy pixels to draw the eye towards the unique content of each page.
I’ve been doing pixel-saving web design for years, and over the time my designs have become simpler and simpler. They don’t tend to feel stark and minimal, as I make sure to splash out with colour and contrast where it’s needed – to draw my visitor’s attention.
Over time, my design has taken the following direction:
- Backgrounds have tended towards soft light grey, giving nothing to draw the eye, with softer gradients.
- Headings have grown bigger and more contrasting; larger text in black or strong colours drawing attention to the primary meaning of the page.
- I’ve stripped “page furniture” down to the basics, to the point that if you take out all the content, there should be very little page left to see.
- Layouts are simpler and plainer than ever, usually conventional, and having fewer columns, often distinguished just by shades of tone.
White on White Environments
If you follow the path of pixel-saving through, you end up at a place where the empty page should feel very light and empty, a clinical super-modern space, like a surgical theatre or art gallery.
White is generally the best base colour for web pages, because you need your content to have lots of contrast against its background.
That means you need either light content against a very dark background, or dark and intense content against a very light background. I find dark backgrounds make pages feel too sombre and heavy, so I almost always find my main content area is pure white.
The background, or page canvas, tends to be light grey, for the following reasons.
- I usually have a background tone because almost all the layouts we do today are zoom-width (i.e. master width defined in ems in CSS), to avoid the layout and line length being stretched too wide.
- It’s good for your background to look like a background, distinct from the content area, so that it’s clear for visitors where to look to get what they need.
- You don’t want your background to contrast too much against the content area, because this would create a high-contrast edge, which draws the eye away from the content.
- And if our content area is white, the background should be a close plain tone, which means light grey or very pale colours.
Letting Content Stand Out
When you have a simple, plain, fresh environment, it gives you a great space to show your content for high impact and good, clean communication.
The term “white on white” comes in where, not only is the background spacious and well-lit, but when you find the main “furniture” elements are taken from a bleached-out palette.
Imagine a shiny, super-modern apartment space, where the walls and woodwork are all white or glass, and your eye is irresistibly drawn to the feature of the room. That’s what I try to do with my web pages.
Your eye is drawn to colour and contrast that stands out, so when we white out the background of the page, you have to look at the content, and the designer can easily make the most important bigger, bolder, and more contrasting to make visitors see it.
The main principle here is that we use just enough contrast in tone and colour to let you distinguish one element from the next, but no more, in order to minimise the visual draw of background graphics.
A Few Examples
Here’s a cute way to show a thumbnail image. A subtle page effect is suggested through a single organic shadow shape, and the image itself gets a thin white border that gives it a little bit more contrast against the drop shadow (which can then be a little lighter).
A white-on-white form, using a thick flat border (which I’m using more and more). The 3D shadows at the corners of the box (which you’ll also see on this page) give a pleasant feeling of shape while also adding fewer pixels.
White on white is great for navigational features. In this expandable side navigation list, you’ll see the secondary column is very pale grey, letting the panel just stand out enough using a very thin border image. A small amount of colour draws attention to the down-arrow.
Here’s a white on white table. I’m wanting to distinguish the header cells (both the column headers in the table head and the th at the start of each row in the body), and use just enough tonal contrast to do that, while allowing me to use dark text.
Note how the gradient on the column header cells creates additional tonal contrast between the headers and the table body, while still letting the text in the cells stand out.
Here’s a white-on-white “supertooltip”. On this table, I’m using a row hover colour effect. The supertooltip is white, again, and to make it stand out against the table I use a drop shadow in combination with a solid coloured border that emphasises the shape of the popup and ties it to the drop shadow.
This set of callouts uses the same “curled corners” effect as the form above. See how easy it is to place a simple image (easy to find images like this against a white background on any stock imagery site), combined with a heavy, dark title to great effect.
The eye is drawn to the content and the title, while the page gives a lovely, soft, organic feel.
I call this little technique the “sticker effect”. This icon stands out nicely against the white background just by the addition of a white outline and a mid-tone drop shadow. It helps create a subtle extra layer that just makes the image stand out a little bit more.
Where the extra plane created by the sticker effect is flat to the screen, here’s another plane that goes into the screen, suggested by the now ubiquitous shiny table effect.
This example shows how, when your background is white, it’s easy to add a shiny table reflection anywhere you like. This form adds pale colour, reinforced with a bolder border, to attract the eye to the call to action without overwhelming the balance.
I hope this explanation has been thought-provoking. If you want to learn more about the exquisite art of simple web design, please pick up my ebook “Save the Pixel” only £27.
One Comment Leave a comment
Leave a comment
I really like the white on white feel that you gave to our website. Try Ben’s pro web design course it is great and a fun way to learn!