Using imagery on a website is a great way to capture the attention and imagination of your users. But use too much imagery or do so improperly, and those eyes are just as likely to flick back to Google. We’ve put together these tips – some innovative and new, some tried and true – for drawing those users right in.
Be economical
Never has the term “more is less” been more true than when using images on a website. We’ve all visited sites that don’t follow this advice – sites with links sprawled from one end of the page to the next and graphics squeezed into every available bit of white space. We’ve all abandoned those sites, too.
Avoid this fate by concentrating first on a few key images, including your logo, your primary navigation, and the most important, relevant or current content. Any added imagery should support these features rather than overpower them. This could mean using no photos or extra images at all, or it could mean placing one or two clear, unique and powerful images well above the fold. Just pick your theme, find the most important images to bring that theme to the forefront, and use the least that you can.
If you don’t have access to a photographer or designer, consider using stock photography or stock footage in your design creation.
Use powerful colors
It’s best to be economical when it comes to colors, too, staying true to one scheme. Better yet, stick with just one main color. That way you’ll be able to grab a reader’s attention when you switch briefly to another.
No matter how much you love that bright fuchsia, be gentle on the eye, using flat colors, subtle contrast, and smooth gradients and curves. While it’s fun to experiment, know that many colors show up very differently on different screens. Going too far out of the box can create an unintentionally unpleasant experience for some of your visitors.
Don’t fear the white space
Use white space to contrast with other colors. This will help visitors focus their attention, and it will give their eyes a break. Plus, white space just looks fresh and clean, giving your site an inviting contemporary look.
Play with typography
Typography can help convey tone, voice and message. You can go funky and fun, slick and professional, or purely utilitarian. Experiment with a number of choices before you settle on one. Stick with your choice throughout the site, using no more than two different fonts – one for the headers, one for the body. Just like all other images, make sure typography supports the theme rather than distracting from it. Pay attention to spacing, too, both between letters and between sections on the page.
And last but certainly not least, remember that it’s function before style. Don’t sacrifice readability just because you love how old timey a text looks.
Stay relevant and be direct
The core purpose of having a website or blog is to send a clear message. That’s why it’s so important to stay on theme, no matter how creative your site may be. Users will feel cheated, annoyed or misdirected if Google brings them to your restaurant review site and the feature image is of a Ferrari. With every image you add, stop and ask yourself, “How does this support my site’s voice, theme, or purpose?”
But don’t fear the abstract
That said, relevance doesn’t have to mean a literal translation of your ideals. There are, for instance, far too many business websites out there featuring stock photos of models in suits shaking hands. Showcasing businesspeople just because you’re in business doesn’t tell us much about who you are and how you’re different than the competition. Try experimenting with abstract shots or vectors instead. This will enable you to create images that are truly unique. They’ll still be compelling and relevant if they relate to some aspect of your business, like your voice or emotional tone.
Overall, the images you use on your website should send a clear message about who you are, what you do, and why you do it. With these techniques in your tool box, you’re sure to stand out from the crowd.
Written by Rob Toledo: Rob Toledo loves all things CSS3, staring at source code and no longer supports IE7, he can be reached on Twitter @stentontoledo
