How to Use Visuals in Website Design

Using visuals in web design is the easiest way to grab – and keep – attention. High-quality photos usually make the best website visuals but illustrations, abstract pictures or sometimes even just shading or computer-generated patterns and texture can be effective.

Website Design: Top
A modern way of creating an immediate impact in website design is to use band(s) of colour (or texture) that stretch the width of the top part of the screen and then to superimpose a large (often 950px wide) visual in the centre. Alternatively, by using this band of colour/texture as the focal point, it is possible to superimpose a smaller picture with text to the side and still create an eye-catching effect.

Lots of small visuals in a grid can reduce the impact of each visual and make your website design look cluttered, but using a large focal photo with several smaller photos to the side can be effective. The smaller photos could be hyperlinked to take the viewer to the appropriate page/bookmark or a CSS or Jquery image gallery could be used to enable the user to change the central photo when a smaller one is hovered over/clicked.

Optionally, a visual can rotate to display more photos in the same website space – be aware, however, that some people find rotating images annoying; be very careful of having multiple rotating images – or of combining rotating images with spinning logos and scrolling text. Overuse of gimmicks can make your website look tacky, poorly designed and poor quality.

Where possible, use the top photos to inform and sell – as well as to grab attention. For example, in our own web design Bury St Edmunds site, we use screen prints of websites that we have created for previous clients to backup our claim that we create attractive websites.

Website Design: Content
If possible, place photos next to the appropriate text. For example, for a landscape gardener website, do not just state that drives are laid with drainage in mind – illustrate this with a photo of drainage shingle between the property and drive.

Sometimes, left or right hand columns (or even central image galleries) can be used to display photos that don’t match specific text – on our website designer Suffolk page we have examples of recent website designs for Suffolk customers in a column to the side of the main text and also have a small image gallery of Suffolk web designs in the main content.

Website Design: Background
Some modern websites use a full screen background picture and a semi-opaque colour for the website content, thus allowing the text to be easily read whilst still allowing the background image to show through.
Other websites just use a background visual across the top of the screen and then fade this down to a background colour to reduce the image size.

Website Design: Menus
Menu items in the form of small photos/images can sometimes be very effective  – especially if a feeling of animation is achieved by using a different hover image such as a different colour, a different angle or even a different image.

Website Design: Footer
Modern footers often use full-width photos or photo collages to further reinforce the sales message of the site.
About the author: – John is a web designer from Bury St Edmunds, but also offers a web design service to other parts of Suffolk such as:  website design Newmarket.