The Importance of Imagery in Web Design

Good quality website imagery has the ability to grab our attention, trigger emotion and even compel us to take action.  As an agency working with clients of all shapes and sizes, we know from experience that not all organisations have access to original images that reflect their brand and values.

In this post, written with input from our design team, we take a closer look at why imagery plays such an important part in web design and why you should consider investing in professional photography for your website.

The importance of good imagery

The old adage 'a picture paints a thousand words' is actually a useful metaphor when explaining the importance of imagery in web design. Research shows that we remember pictures more readily than we remember words, so choosing the right imagery for your site isn’t just important in creating a positive first impression, but a lasting one. Images play a crucial role in so many aspects of your website’s performance and overall experience:

Making the case for bespoke imagery

It’s easy to understand the temptation to use stock imagery. Today’s online image libraries are often relatively affordable and easy to access. Despite these advantages, stock photography will only ever serve as a close approximation of your brand. A professional photographer or designer on the other hand can work with you to help communicate your brand’s identity, resulting in a suite of images far more relevant and useful to your organisation and its website.

Let’s think about this in the context of web design. ‘About us’ sections are a common feature of many websites. They commonly act as a way for users to learn more about an organisation, its staff and its values. Using photographs of actual staff members can help provide genuine insight into a company, and can even build greater trust in the organisation. In fact, user testing has shown that people are more likely to buy from websites that use genuine staff in their photographs as opposed to stock imagery.

An online shop is another good example where stock imagery often fails. Is a user more likely to buy a well-photographed product with several different detail views, or a badly photographed item with tiny images which are poorly lit and badly cropped? Perhaps if the user knows what they’re looking for it won’t always matter. However, with high quality consistent imagery, your shop and products are going to feel more professional and if your customer service matches, hopefully users will continue to come back and shop.

Grovemade is a company based in the US. They have obviously taken time and care in producing a suite of images for their website designed by Yuji Tomita and Peter Baston. Every team member has been photographed on the same background and hovering over each person gives you a second photo hinting at their personality. The photography overall has a slightly faded look to it giving a consistent feel.

Team Photos Grovemade detail

Grovemade also have great imagery in their shop, a mixture of detail images and context images, all very clean and clear giving the user a real feel for the product and suggesting they might like to recreate the feel of the context image in their own home enticing them to buy more products.

Product Photos Grovemade detail

Illustration, icons and infographics

We place great deal of emphasis on storytelling within our websites. Infographics are a great way of telling a client’s story, as they help to condense large amounts of information into a single image meaning users can understand key messages quickly and intuitively.  A lot of our clients have useful data they want to incorporate into their website, often detailing the quality of their product or service.  Infographics and bespoke imagery can help condense statistics and complex concepts into a more easily digestible format.

Icon design is an art in itself. Again, getting it done properly and having a suite of icons or infographics in a consistent style makes all the difference. The following icons have a similar line thickness, a consistent colour palette and a similar overall size. They fit together nicely and add interest to what otherwise might be a dull text page. They are also quite simple making them easy to see at small sizes as well, on a mobile screen for example.

Good icons Geckoboard detailGood icons A day in Big Data OgilvyOne detail

Whereas these icons below use a mixture of styles, colours, sizes and line thickness. They don’t sit together nicely as a group and most likely on mobile they will render badly.

Bad icons STAR Housing originalBad icons Salix Homes Limited originalWhen designing the Edinburgh Festivals website, we decided we needed an extra element to add to the photography for certain pages. We created an illustration style based on a map of Edinburgh created for the Arts Festival. These were three simple black and white images of a similar size to help illustrate snippets of information about Edinburgh. Together they look consistent and balance the use of photography nicely. The client is free to place whatever they want in these areas, as our CMS is flexible.

Good illos Ed Fests detail

To help illustrate the impact of these bespoke illustrations, look how out-dated and inconsistent these stock illustrations would look on the site if used instead.

Bad illos Ed Fests detail

Improve your imagery

We would strongly suggest, that if you have the means to do so, you consider commissioning professional photography and illustration for your website. As part of our strategy process, we provide advice on the type and style of images you may need for your website and how to go about sourcing these. If you would like to find out more about how we can help, speak to your account manager directly or drop us a line.