Skip links

Backgrounds and Value: How to Create Rest and Depth

To avoid overwhelming the viewer on websites and marketing materials, it is important to give the viewer’s eye an area to rest, such as small empty spaces, appropriate spacing between text and photos and avoiding busy backgrounds. This will also help balance any energized or bright colors and photos, making the viewing experience comfortable. Furthermore, a variety of values will help more the viewers eye around your page, in and out of energetic and restful spaces.

Value refers to the lightness or darkness of a color and creates depth and movement.

Looking at your page as a whole, a dark, middle and light value will move the viewer’s eye through your design, creating depth, contrast and texture. In general, dark values are great for depth, definition and contrast whereas light values move the viewers eye around the page to focal points and forward and can effectively create a harmonious push and pull.  Middle value colors are great resting places for the eye. They are relaxed and less demanding, making them great background colors for webpages.

When thinking about background colors, look at your imagery and branding and base the background color on this. Make sure to think about the branding of your business (i.e. if it’s a calming massage studio, make sure your background and images portray that message). Once you have your color in mind, test the value of that color with your imagery.  Middle value colors are a good place to start testing. Darken or lighten the value and see if it makes your imagery “pop” or washes it out.

Depending on what makes sense for your business, texture can be introduced to the background if the combination of images, text and background color feel too “flat.” You don’t need texture to have a successful site, but it can compliment certain designs. If you’re using textures, ask yourself why. Do you work with textural elements? Does texture create a natural or cozy feeling that connects to your business? Remember to keep your texture on a small scale. If it gets too large, it will compete with your text and imagery and darken the overall look of your site.

Photos or graphics as a background are tricky. They are beautiful as page introductions, even with your business name as a text overlay. However, behind the main body of text and as your background, they can be very distracting. The majority of photographs have quite high contrast, which means that they are not ideal for use as a background image. On a large scale, these background designs compete with your text and photos. Small scale photos and graphics that are repeated (generally referred to as wallpaper) can be more successful if they contain analogous, similarly valued or low contrast colors . If you are set on using something more lively as you background, consider using them as side panels or lowering the contrast to reduce the competition on the page. Furthermore, if you want to overlay text on a background image, the image must be low contrast in order for the text to be legible. Image editing applications such as Photoshop and GIMP have tools that allow you to manually adjust your images to have lower contrast. Another option for when you want to overlay text on an image with high contrast is with a semi-transparent background color (or “screen”) behind the text to improve legibility.

Can you think of a site that has a great background? What about a horrific one?  What do you react to best (or worst)?