Tips on Using White Backgrounds in Website Design

It seems like everyone is using a white background these days.

Gone are the dark and patterns that have been a big part of the design process for a while.

And while using a white background may seem like the easiest and most safe path to a clean design, that is not always the case.

White backgrounds need to work with both your text and image choices. White backgrounds need to work in harmony with the overall design and not look like an afterthought.

White backgrounds need to have a purpose and beauty in the overall design scheme.

So what are designer’s doing to make white backgrounds work for them? Let’s take a look.

Why a White Background?

ngo

yount

penn

friends

ecology

While using a white background has always been a popular choice – arguably because it is the default setting when working in HTML and CSS – the color has seen a resurgence in use in recent months.

White as a background color for blogs and e-commerce sites is a staple, but what we are seeing more of is that designers are using white backgrounds for all kinds of different (and more creative) projects.

While you can’t directly pinpoint why this is happening, it’s easy to see the number of sites with a light focus. A couple of years ago the trend was to use a black or darkly-colored background.

I have noticed a correlation between white backgrounds and two web design trends:

  1. Responsive design: Responsive design and grid “stops” for a variety of devices has helped the simple, white background regain popularity because it is easy and always looks natural. In some responsive layouts, sites lock to certain pixel-width grid stops and everything outside of those show a background “edge.” If the overall background is white, this edge becomes invisible without any extra design thought.
  2. Flat and minimal styling: Simple is still a major trend (as it was for most all of 2013). And a white background is the epitome of simple. White also makes it easy to pair and use many of the bright, bold colors that are symbolic of flat design styles.

What Does White Say?

squares

estudio

finch

White is a simple color – or the lack of color – and while it has some meanings of its own, it can take on the context of its surroundings.

White, by nature, is the color of purity, faith, light, cleanliness, possibility, softness and is generally positive.

As a background color though, white is more of a supporting cast member. White it maintains some of its own color associations, the hue also absorbs what is around it, allowing the full meaning of the design around it to come through. So white as a background color, for example, will take on feminine attributes when paired with pink and script typefaces.

White as a background color emphasizes clarity and removes visual obstacles and clutter in today’s trending use. The hue is used to add visual emphasis to other important parts of the design – color, text or images – and is frequently part of an overall visual aesthetic that is simply designed and minimalistic.

Other Shades of White

built by

gray squares

spell tower

Other colors or words that represent hues that are white or almost white include snow, milk, ivory, pearl, paper, corn silk, seashell, linen, cream and alabaster.

Other almost white hues include a pinch of another color – typically black – to create a soft white with an undertone for reading on screens.

Some users and designers argue that pure white is harsh on the eye. In print projects, pure white is often the standard.

Tips for Using White

Google

otwarte

hogan

cyclelux

creative

Create contrast: Choose dark or bright colors that will speak to users against the white background. Black is a common choice for type on a white background (dark grays as well) because it is easy to see and read. The same is true of images as well. Select images that aren’t overly white in focus or consider using a black border around images to set them apart from the stark background.

Keep it simple: The essence of white is simplicity. For the most impact, opt for a simple or minimally-styled design scheme.

Use simple images: Photos, graphics and illustrations should mirror the same feel as the overall design. Rather than complex images with a lot going on, keep them simple as well.

Focus on typography: Beautiful type is of the upmost importance in a design outline where everything is simple. This also makes type more of a foal point in the overall design. Pick one or two great fonts and use them well. This will go a long way to creating a visually stunning white-based website.

Space is your friend: Remember, white backgrounds are part of an overall look and trend. Use them well by giving everything on the screen plenty of room. Add extra space around objects, leave wider margins between text and menu items. Try to focus on the space as much as the objects within it.

Focus on an accent color: Pick a color and use it against white backgrounds and black type for a fun. The “pop of color” brings focus to certain parts of the design in a more subtle way. And it works with almost any hue.

Conclusion

While white backgrounds aren’t new, now is the time to design using them in a new way. Working with white backgrounds can bring a modern, sleek and clean feel to almost any type of web design project.

And we’d love to see what you are working on. Share your projects using white backgrounds in the comments.

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

5 Comments
  1. T. Orval Jan 7, 2:07 pm

    I came upon this site by accident yesterday. Love it how the white background matches the sleek design of the products.

    http://www.jolienholvoet.com

    Reply
    +2
  2. Vikram Jan 7, 2:34 pm

    I went white with splashes of muted color, subtle backgrounds and minimalist oddities for my personal site

    Reply
    +1
  3. Melody Jan 9, 3:11 am

    Just redesigned my site with a white background. I took some of these tips in mind, too. Love it melodygordon.com

    Reply
    +1
  4. Anagorn Jan 9, 4:37 pm

    For my own portfolio site I used a white background as well, I would love to hear your opinion about it!

    http://www.renesamsen.nl

    Reply
    +1
  5. Brad Hogan Jan 14, 10:05 pm

    Awesome list! Thanks for including my portfolio, I’m honored. Whitespace, or just space in general, in my opinion, is so important for the user experience. Proper spacing allows users to focus on reading content that you want them to read and creates a logical separation of ideas.

    Great list, thanks again!

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters