This is a simple question that what kind of background should use for a website. The designers have the basic content and the layout pretty much nailed down, but the background is either too tedious or too busy and they don’t know how to fix it. We’re going to look a few live sites to grab some inspiration on how to effectively add interesting backgrounds to a web page.
This kind of background became popular a few years ago and still persists today. It springs from the idea of a notebook full of doodles, like that of your typical teenager during English class. Everything has a rough, quickly sketched appearance and the page is a fairly random looking collection of ideas that are all scattered around and placed at various rotations.
Paper textures have always intrigued designers and we’ll likely be using them for ages to come. The current trend isn’t so much the intense grunge of a few years ago but rather a much more subtle effect that you could easily miss if you weren’t looking for it.
A Radial Gradient
Gradients have been getting a bad rap lately from designers who think they are overused. I personally think that they are easily misused and poorly executed, but can’t ever see a time coming when all designs everywhere use purely solid colors with absolutely no gradations. Since gradients reflect reality (we never see pure, unadulterated solid colors in the natural world) designers will continue to use them to make their designs feel more real.
With gradients, it’s often best to just keep things simple. Don’t go mixing crazy colors and creating muddy transitions, opt instead for a simple gradient. One of my favorites is the good old gray to black (or darker gray) radial gradient. It’s clean and easy to implement and looks really classy.
Another solution is to be principally elegant or bold is to put a hard transition right through the page. This is most often done straight but can feel more unique and eye-catching if done vertically.
The idea here is to utilize the magic of contrast. Our eyes are naturally drawn to contrast, we simply can’t help but look! The key to pulling this method off then is to make sure your two colors really contrast. Don’t pick anything that conflicts or clashes, instead try one really dark color and then a really light shade of the same color.
Full Screen Photographs
We all love to look at a good photo so working one into your design makes for a website that everyone loves to look at. Photos provide inspiration for the entire site design. You can grip colors, textures and even typography inspiration from a photograph and create a nice coherent theme. Check out how the dark natures of the designed elements in the site below reflect the look and feel of many of the photos used on the homepage slideshow.
Texture to Color Fade
One trick that I really like that I’ve been seeing a lot lately is to use lighting effects or something similar to throw in just a little bit of texture at the top of a page, which quickly fades to a solid color. Textures can easily reduce the readability of your text and add unnecessary visual noise to an otherwise usable page. Hinting at a texture in one location allows you to reap the benefits of the extra eye candy without sacrificing the overall aesthetic and/or readability on the site.
We too often feel like choosing a texture means we have to flood the background with it using a CSS background image repeat. Try to be more selective with where your texture goes and you’ll find your designs immediately looking nicer.
The sky is a constant and fantastic distraction for humans. Clouds, rays of sunlight, stars, planets, the moon; all of these objects hold a sort of magic place in our minds that makes them irresistible to the eye.
Be really careful when incorporating these elements into your background, it’s super easy to create something ugly. This technique should only be used by designers who have a real feel for aesthetics and how to take an idea like “space” and not make it look like something from an old Windows screensaver.
The site below is a great example of a really beautiful sky scene being used as a strong website background. The planets are rendered beautifully with a vintage color vibe and a subtle texture provided by diagonal lines. This is the kind of attention to detail you should be familiar with before throwing a sky background on your site.