Where to Use Visuals in Website Design

The simplest way to create a website that is attractive to look at AND that grabs your attention is to use one or more good visuals. The best visuals are usually photographs, but illustrations or abstract patterns can also be used.

Masthead

A simple (but not mandatory) means of making your website look professional is to use a visual that stretches most of the width of the masthead.

If you need to use a number of smaller visuals, then consider putting them into a grid with coloured lines tying the visuals together. Alternatively, a simple row of three or four visuals can also be effective.

If possible, the visuals in your website masthead should be chosen to work together with the website slogan to tell viewers at a glance what product/service is offered and what the unique selling point of your product/service is. For example, if a children's nursery sells itself on offering a fun environment for children, a photo of happy, smiling children engaged in a fun activity gets this message across far better than paragraphs of text.

Website Content

Where possible, try not to have a group of photos at the top or bottom of the website content. It is usually better to choose photos that illustrate different selling points and to put them next to the appropriate text. For example, with a self-catering complex, do not just say that there is an indoor heated swimming pool: show a photo of this pool with an appropriate caption.

Sometimes, if photos do not match the text, they can be put into the left or right hand columns, again with captions to bring out the relevant selling points. This is usually better than putting visuals in a group at the top or bottom as it adds visual appeal throughout the page.

Background (the Body)

It can sometimes be very effective if you use a full screen background picture for the body section of a website and use a transparent or semi-opaque colour for the rest of the website. In experienced hands, this can look stunning.

Other visuals that can be put into the body include lines or shading spanning out from the main website container.

Menu Items

Using small photos or pictures for menu items can sometimes work well. It can sometimes be very effective if you use two different versions of the same photo for the main menu item and the hover menu item - for example, the viewer sees a wide-angle photo for the main menu item and then the website zooms into a close-up of the same photo when the viewer hovers over the menu item.

Footer

Putting some form of visual interest into the footer is a way of making your website stand out from the crowd. Whilst not many designers use large photos in the footer, gradients in shading can be used to great effect and echoing the shapes/designs used elsewhere in the website can also be highly effective.

Janice is a web designer from Suffolk. Her latest blog posts are Installation of Malsup Jquery Cycle and Bathroom Website Targetted by SEO Vultures.