Advertise here
Dreamstime - Royalty-Free stock images

Website Design: How to Use Visuals

Article by John Pitcher - June 30, 2009

The easiest way to make an attractive, attention-getting website is to use good visual(s). Visuals can be photos or illustrations or sometimes just even gradients in shading.

Website Masthead

A large visual the width of the masthead is a simple (though not compulsory) way to make your website look professional. Giving the visual a wide (for example, 20px-30px) border can frame the visual very effectively.

If you want to have different, smaller visuals then consider putting them into a "collage" - maybe overlaying the edges of the visuals with coloured lines to create a grid effect.

Where appropriate, make the visuals tell a story. If your hotel has a swimming pool or is on a safe, sandy beach or is surrounded by rolling, green fields or has cosy log fires and oldie oak beams, then don't just mention this somewhere tucked away in paragraphs of text: show it up front in the visual.

Website Content

When using visuals in the content, it is often most effective to intersperse them with the text so that they illustrate and validate what is being said rather than sticking them all in a group at the top or bottom. Don't just talk about how your restaurant shows exquisite, attractive-looking food: show photo(s) of this beautifully presented food alongside the appropriate text.

In a two column design, the smaller column can be used to provide general visual interest if the visual(s) relate to the page / website as a whole rather than to a specific paragraph.

Website Body

It is sometimes effective to use a picture or photo - or even just horizontal lines or shading - in the website body. This is often most effective when it provides an extension of the masthead out into the body.

Website Navigation

It is sometimes effective to provide a photo/picture relating to each menu item, especially when these are genuine photos of the business.

Creating Visual Interest When Visuals Are Limited

If you only have one visual and you would like more, then consider homing in on small section(s) of the main visual and then repeating these mini-visuals throughout the page. This can be particularly effective when it appears that you are showing close-ups of important features; it also adds a consistent look-and-feel to the page.

Creating Visual Interest When There are No Obvious Visuals

If your website has got no obvious visuals, then don't despair. Look in one of the internet visual libraries (for example, Microsoft Clip Art) and find a picture that represents the key business operations. Or use an abstract image - for example, a complimentary medicine site might like an "uplifting" picture of the sea, or sky or flowers.

Another technique that can be useful is to take key points (for example, your key selling points) from your text and turn them into a visual by simply putting them in a bold typeface on a different coloured background. This removes some of the "verbal clutter" from the main text and adds visual interest at the same time! We used this to effect in a recent Quick Property Sale Suffolk website for a Suffolk property developer.

And if all else fails, consider using a package such as Macromedia Fireworks to create a textured background (gradients in shading, different size lines etc) as a backdrop for the masthead slogan.

About the author
John is a Suffolk Web Designer who runs a Bury St Edmunds Web Design company, which offers attractive, affordable websites to businesses in Suffolk and Norfolk.




Back to articles

Find the articles you are looking for

 Web  Stockvault Articles
Follow Stockvault on Twitter