Creating Impact With Photographic Backgrounds on the WebBy Jennifer Farley
As web designers, we generally try to design sites with three main goals:
1. Grab attention
2. Communicate a message
3. Create a lasting visual impression
Sounds simple enough, doesn’t it? Your design and layout plays a big part in determining if visitors will stay long enough to view your content and see what you have to say. By creating visual impact you grab the viewers attention and (hopefully) get them interested enough to read your message.
There are several ways to create visual impact and in the past I’ve written about Contrast, Value and Color which are all very important elements in design. Many skilled designers are using photographic background elements to to create eye-catching sites while not losing the message in the middle. Let’s have a look at some examples. These sites are a mixture of Flash and HTML based sites.
Chicago L Shirts site displays their t-shirts as full-sized background images.
The Culinaria Food And Wine uses large photographs of food and drink with text overlaid on a semi-transparent white box.
In the Formoda site, the main background image changes in each section. The images are brightly colored yet leave plenty of white space for the main heading and brief message on each page.
Future Management And Marketing uses the same photographic image in the background throughout the site. The text is overlaid on a semi-transparent background.
Each section on the Green Infrastructure site features a photographic close-up a nature scene – leaves, shells, bubbles which complement the text on the page.
Go To China has some beautiful photography. Again each section has its own background image and information appears in a white text box above the image.
My Big Dog Bakery has an unusual collection of background image, but the home page (below) has a sweet old-fashioned image of a girl with a pack of Irish Wolfhounds.
What do you think of these sites? Do you like the use of large photographic backgrounds?
- 1 Three Keys to Being a Productive Software Engineer
- 2 Easy AngularJS Authentication with Auth0
- 3 Create Your Own Yeoman-Style Scaffolding Tool with Caporal.js
- 4 Make Your Own Social Network, Game Server, or Knowledgebase! - Sourcehunt
- 5 How to Improve Site Performance (and Conversions) with Dareboost