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 An Overview Of Backgrounds In The Overall Design Of A Website

Adlucent

David Loop

Texas-based graphic designer and art director.

david loop An Overview Of Backgrounds In The Overall Design Of A Website

David Loop

Dias Dos Anamorados

A Portuguese Facebook avatar design portal.

dias dos anamorados An Overview Of Backgrounds In The Overall Design Of A Website

Dias Dos Anamorados

Elitist Snob

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

elitist snob An Overview Of Backgrounds In The Overall Design Of A Website

Elitist Snob

Solid Color

Finch

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

finch An Overview Of Backgrounds In The Overall Design Of A Website

Finch

Wilson Miner

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

wilson miner An Overview Of Backgrounds In The Overall Design Of A Website

Wilson Miner

Solid Color and Texture

Jarad Johnson

Jarad Johnson is an interactive web designer based in Missouri.

jarad johnson An Overview Of Backgrounds In The Overall Design Of A Website

Jarad Johnson

Matt Spiel

The lead designer at SPI Creative in Missouri.

matt spiel An Overview Of Backgrounds In The Overall Design Of A Website

Matt Spiel

Gradient Color

Icebrrg

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

icebrrg An Overview Of Backgrounds In The Overall Design Of A Website

Icebrrg

Mediastroika

A media solutions company based in Paris.

mediastroika An Overview Of Backgrounds In The Overall Design Of A Website

Mediastroika

Newism

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

newism An Overview Of Backgrounds In The Overall Design Of A Website

Newism

Photographs

Presence Driven Music

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

presence driven music An Overview Of Backgrounds In The Overall Design Of A Website

Presence Driven Music

Design By jilinteractive.net

Mastro Coffee

Mastro Coffee is an Italian coffee company.

mastro coffee An Overview Of Backgrounds In The Overall Design Of A Website

Mastro Coffee

Design By Sinapsia Studio, Italy

Radim Kurka

Homepage for Czeck pilot and racecar driver, Radim Kurka.

radim kurka An Overview Of Backgrounds In The Overall Design Of A Website

Radim Kurka

Designed By Madeo Interactive

Nappy Cakes

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

nappy cakes An Overview Of Backgrounds In The Overall Design Of A Website

Nappy Cakes

Sharing is Caring
Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Comment Rules

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i><q cite=""> <strike> <strong>

Kindly use a valid Name and Email address. Spam or unrelated comments will be deleted

If you are a regular commenter, be sure to check our Comment Contest.