Effectively Integrating Large, Noticeable Images into Your Website Design

On almost all modern websites, there are slider ads, background images, marketing graphics, or any number of other creations to avoid blank space. As page development becomes increasingly inexpensive and user-friendly, designing a website that features movement and rotating hero shots is now the norm. The trend is catching fire between large corporate and small business sites alike.

We can see the strategy used here to a medium degree on the Ikea homepage:

Retrieved from ikea.ca

And to an even larger degree on the Scotiabank page:

Retrieved from scotiabank.com

How the large image trend became a trend

All the marketing geniuses of the world wouldn’t be using large images on homepages if it wasn’t effective for some reason. For the most part, if used correctly, it can be as sleek as it is sexy. Especially when used as a background picture, the image works two-fold as it doesn’t take the room of precious content, and it makes the page immediately unforgettable. If it’s a flashy product or an attractive person, interest levels have a way of automatically rising. So, what could possibly go wrong?

You know how you feel ill when you see those commercials with a middle-aged man and wife, their 2.2 kids, and a golden retriever? It’s a similar case if you use stock photography on your website. So, in order for your large images – or any images for that matter – to be effective, invest in high-quality, personable camera work. This is just one of the many small discoveries that have been made during the investigation of the effectiveness of large photography on the web.

Effectively using a small image versus a large image to invite user reaction

Papiris wanted to increase the number of submissions on their Contact Us page. They kept the old page while going live with the new in order to compare, and made the following adjustments:

• Removed bullet points to be replaced with short, sentenced copy
• Removed the ability to scroll and navigate to other pages (to an extent)
• Inserted a large background image and solidified the print

After these simple transformations, the newly designed page decreased the number of users who immediately left the site by 27%, and increased the number of submissions by 36%. The company used this data as a starting point and continued to apply background image tests on their other pages with success.

Large images on your website work, but to what extent? Four basic guidelines:

The problem with the above case studies is that they already had popular, optimized websites. Their raised conversion rates can’t be well rationalized or purely credited to graphics. The large images weren’t added to a failing website or just because they were trendy, so their effectiveness becomes very difficult to judge. Can this design type still work for moderate or small businesses?

To tell the truth, I really like this design type. If there isn’t a picture there – it’s just space. Too much writing is a hassle and also a turn-off for most users. So what’s left? Keep in mind it’s not Facebook or Instagram, so having a multitude of images is redundant and cluttered. Large-scale, beautiful, singular graphics seems to be the most optimal of solutions.

Overall, though this started as an analysis, but this article ended up to be well into the ‘for’ column in support of mega-images. But, they’re certainly not to be taken for granted. Consider the following when applying this design:

1) Give the user the option to scale them down

This can be as simple as a small “hide” selection or a mouse-over function. While they’re attractive at first, they can become too annoying or distracting. So if the viewer has the choice, it’s kind of the best of both worlds, right?

2) Make sure they aren’t too busy

The sports equipment image worked well because it was a landscape; there weren’t too many colours or textures. You will have to put text and content overtop the image, so make sure there’s not too much going on at once that will distract or confuse the user. The hue and brightness schemes become vital at this stage as well.

3) Be personable

We can’t state this enough! Use an image – or images depending on the number of pages – that are unique to your website. It’ll be much more effective than some drab graphic that was dragged from a stock image selection.

4) Test, and test again

You may love your page design, but as you quickly learn, others may not. Have any friends and colleague at your disposal take an unbiased look at your new design that features a fantastic, large background image. Test functionality and clarity, and be as objective a judge as you can.

The web-world is constantly changing and you won’t keep up, especially if you don’t have the dollars that the big marketing corporations do. Trust your gut, do your best, and your website will take care of itself. You just have to ask, what’s the best image I can input that will have the most effective cosmetic and meaningful impact?