This article gives a brief account relating to the use of imagery on websites. It covers some basic do's and don'ts as well as providing some examples a imagery in action. By referring to this document during website construction we hope you will be able to create a more reliable and cleaner website design.



Let's face, the big ingredient in graphic design is graphics. No matter how you put it pictures are you weapon of choice and they should be the part of your website that makes you stand out from the rest. The problem is this, having great pictures or graphics is not enough, you have to present them well. Without the proper organisation and presentational choice all your hard work will look out of place and insignificant.

Background Imagery

The deployment of background imagery can literally make or break a website in the first few seconds of a viewing. As you may expect gaudy or very heavy backgrounds make other points of the site difficult to read or focus on. I recommend you stick to fresh light colours such as white, pastels or ice blues. If you want something to spice up open spaces apply a vague watermark or non-complex texture but don't let it overpower the placement of navigation or the pages true content. A big mistake is to use a full coloured image with a box in front as this creates an inverse framing effect where the edges of the site appear more interesting than the centre and content.

As with all graphic design elements you should make sure the contrast between the page elements and your background imagery are right before adding any complex graphics.

Logos and Headers

Logos and header are an important design element of your page but often for different reasons than people initially think. You want your logo to draw the eye but not to take the attention away from your page the whole time. For this reason I strongly advise you do not use animation unless you are working with an establish brand (Nike or BMI Baby for example). At the end of the day your logo is there to stick in peoples minds not get in their way, just remember that. Try to create something unique and catchy and it is often a good idea to have some strong contrast with your background in there. Gradients and curves can be a good tactic here if your page doesn't use them elsewhere, if it does then use sharp edges and solid colours to stand out. Headers should be fairly simple and are usually designed to contrast with the logo and the page. I many designs this is done with shades of a colour instead of a completely different colour but 3 colour designs are still popular on the web and if used correctly can look great.

Product and Feature Imagery

The most important factor in the use of product imagery is how easy it is for a potential customer/user to see what they are looking for. You may think this statement is a little vague but it is only based on common sense. If you are building an ecommerce site that sells toy trains, the most predominant image on the homepage should be something relating to toy trains or you risk the (very high) chance of a user just clicking off. You should also relate everything else to your product imagery so that it appears integrated, remember your product is unlikely to be as easy to change in appearance as your template so build it to suit first and change it as you need to instead of having a theme that looks metallic and smooth and selling blockly wooden toy trains.

You may also wish to use contrast or other design techniques to draw attention to your product or feature image, this is often done with “frame” style effect. This is very successful on product sites as customers are trained to look for these image frames with their potential purchase inside.

We hope this short but informative guide has given you help in website design and analysis, remember the most important thing when designing a website is that you come out at the end with something you would trust and buy from or enjoy looking at, if this is not the case then hire a professional to save yourself the time and effort.