An Overview Of Backgrounds In The Overall Design Of A Website

The appropriate use of backgrounds in website design can quite literally make or break the success of a site’s overall design. The background serves as a canvas for the more detailed ideas and images that make up the site.

A painter begins with an off-white piece of muslin stretched on a frame. They then choose how to utilize the white space, making conscious choices about the balance between the negative and positive space. Interior designers work with three dimensions the same way. So why does so much web design seem to ignore the basic tenets of good design? This may be due to the fact that a web designer has an almost infinite range of design options. If necessity is the mother of invention, then rampant abundance can occasionally lead to laziness. The end result is web design that leaves much to be desired.

A successful background is one that both sets the overall tone, or feeling, of a website, while simultaneously remaining secondary to the text, images, and other content that comprise the site’s pages. Backgrounds can be made up of a solid color or multiple colors, patterns, a single photo, more than one photo, painted images, drawn images, the list of potential backgrounds is endless. New techniques for creating custom backgrounds appear every day, as well. In the last two years, for example, more and more band websites began to appear with photographs that had been altered using Adobe Illustrator’s “Live Trace” effect.

If you like this article, you might be interested in some of our older articles on Common Elements In Music And Design, Mistakes To Avoid While Designing Your Website, Choosing The Right Website Layout, Website Design Trends Of 2011, and What Is An Unconventional Layout.

The black and white outline image created by the effect was used, quite literally, everywhere. Initially striking, it began to lose its impact simply because it was overused. Which brings us to yet another issue with website design; it’s continual evolution. What was popular circa-1995, when we were sitting on our sofas absorbed in our Myspace sites, causes cringing and grimaces in 2011. Our collective understanding of what is possible in the world of web design has expanded exponentially. Unfortunately, our collective understanding of what constitutes good design in general has not followed suit.

While beauty is somewhat in the eye of the beholder, it is fairly easy to tell when a website’s design is functioning appropriately and when it is not. Backgrounds that fight with, or overrun, the content of a site are a clear example of poor design. On the other hand, backgrounds that use textures or patterns appropriately, can increase the beauty of a sight, by adding a dose of subtle visual interest.

Using a solid color background is always a safe option, but if the rest of the site’s design does not make optimal use of the interplay between negative and positive space, then the design can end up feeling too spare, too cluttered, or at worst, flat out boring. Below are 15 images of websites whose background use is successful. Whether the designers used solid colors, patterns, photos, drawings, or some other type of art, each of the backgrounds used draws the eye in, but never dominates.

Textures

Adlucent

Adlucent is a predicative marketing firm based in Texas.

Adlucent

Adlucent

David Loop

Texas-based graphic designer and art director.

David Loop

David Loop

Dias Dos Anamorados

A Portuguese Facebook avatar design portal.

Dias Dos Anamorados

Dias Dos Anamorados

Elitist Snob

Elitist Snob is the weblog of tech writer and designer, Kent Pribbernow.

Elitist Snob

Elitist Snob

Solid Color

Finch

The (very cool) site for designer and writer Franciso Inchauste, the UX Specialist at Universal Mind.

Finch

Finch

Wilson Miner

Wilson Miner is a San Francisco-based designer and web developer.

Wilson Miner

Wilson Miner

Solid Color and Texture

Jarad Johnson

Jarad Johnson is an interactive web designer based in Missouri.

Jarad Johnson

Jarad Johnson

Matt Spiel

The lead designer at SPI Creative in Missouri.

Matt Spiel

Matt Spiel

Gradient Color

Icebrrg

The web form design arm of Oklahoma-based internet and software development company, Element Fusion.

Icebrrg

Icebrrg

Mediastroika

A media solutions company based in Paris.

Mediastroika

Mediastroika

Newism

A web design and development firm based in Newcastle, NSW, Australia.

Newism

Newism

Photographs

Presence Driven Music

The homepage of Gospel music composer and perfomer, Derek Thomas.

Presence Driven Music

Presence Driven Music

Design By jilinteractive.net

Mastro Coffee

Mastro Coffee is an Italian coffee company.

Mastro Coffee

Mastro Coffee

Design By Sinapsia Studio, Italy

Radim Kurka

Homepage for Czeck pilot and racecar driver, Radim Kurka.

Radim Kurka

Radim Kurka

Designed By Madeo Interactive

Nappy Cakes

Website for Nappy Cakes, a British company that designs personalized baby gifts.

Nappy Cakes

Nappy Cakes

Sharing is Caring
  • http://www.pixel77.com/ Adriana

    I personally think that, asides from the main graphical elements in a web page, the background design is very important. It can set the feel to the entire page and sometimes it can even bring that extra “something”.

    • Jai

      You’re right Adriana. I agree with you that the background design sets the feel of the entire page. You have a very great pint to that.

  • https://www.facebook.com/nikhil.sharma.982845 Nikhil Sharma

    Actually a successful background is one that both sets the overall tone, or feeling, of a website, while simultaneously remaining secondary to the text, images, and other content.

  • Tarun Jaitely

    Background design is important part of a well designed website. Thanks for sharing this post.