Designers define layouts, type styles and colour schemes when designing a new website in order to form a consistent visual identity. These styles can’t normally be changed by anybody unless they have access to the website code. Images, however, can usually be uploaded by anybody with an admin account. Inconsistencies in the style and quality of these pictures can play havoc with otherwise carefully designed blogs, news feeds and product archives.
In the years that I’ve spent designing websites, it has become painfully apparent to me that images can often make or break a design. Every effort can be made during the design process to maintain a clear and consistent aesthetic, but once a marketing executive is let loose upon a content management system, a website can quickly begin to look a dog’s dinner.
This is not unlike what I’ve seen plenty of times. Poor-quality images, naff stock photography, dodgy crops and even enthusiastic use of ms paint — surely these things can be avoided?
The mistake that designers — including myself — make is that we assume choosing a good image is a simple task. It isn’t like designing a logo or writing code right? But for those without the tedious attention-to-detail of a designer, it can be a struggle.
In this article, I’ll look at the steps that designers must take in order to ensure websites don’t get ruined by bad images. I will also suggest some ideas for ways in which images can be easily modified in order to extend a consistent brand aesthetic.
Steps to improve uploaded images
1. Define Automated Processes
First of all, we must implement basic automated processes to ensure that image uploads are output onto a web-page in a consistent format. We need to define a set of image ratios that can be used site-wide. The closer these images are to standard ratios (such as 3:2 or 4:3), the easier it will be to ensure that pictures will still look good if they are cropped automatically by a CMS.
Long, narrow ‘hero’ images, whilst very popular, can be particularly problematic to ‘art direct’ automatically.
2. Create Image Guidelines
Next, we need to create simple, easy-to-understand guidelines for content editors that explain how to select (and maybe process) appropriate imagery for a website. Despite the steady interest in style guides and pattern libraries for the web, guidelines relating to images are something that I think are still overlooked by big and small publishers alike. I’m talking about defining simple methods to ensure a cohesive ‘look’ across every image used by a brand, from pictures that accompany blog posts to hero banners and product photography.
Macmillan Style Guide
Unsurprisingly, Google does this rather well. They have a fantastic set of guidelines for their material UI design system. Macmillan also defines image use guidelines very comprehensively in their brand guidelines.
Consistent image treatments as part of a digital identity
For the most successful brands, you simply need to glance at the fonts or colours used on a web page to instantly recognise the brand it belongs to. Why can’t the same level of recognizability also apply to the images uploaded to a website?
Retro filters
Below is an image from Coca-Cola’s 2016 “Taste the Feeling” campaign. Over 100 photographs were shot by fashion photographers for use in print and on the web. Whatever you think about Coke or the campaign itself, it’s hard not to admit that these vivid retro images look stunning. The shots are so uniquely stylised that even if you were to remove the product from the images entirely, you would still be able to connect the ads to Coke.
“Taste the Feeling” is a multi-million-pound campaign that employs the expertise of world-class photographers. But there’s no reason why website images couldn’t be ‘branded’ in a similar fashion by simply applying consistent filter effects to well-chosen photography. This video by editing studio GradeKC demonstrates the power of professional colour grading to create different moods. What mood do you want your brand to convey?
Here’s our fictitious business blog page. Some slightly better stock images have been chosen and these have been treated using a simple retro colour filter to try to unify them.
Simple Colour Treatments
Spotify was rebranded in 2015 by New York agency Collins in an attempt to reposition the business as a music brand rather than a tech company. One of the most interesting parts of the project is how the team solved the problem of using images consistently. Spotify are reliant upon photographs of musicians from a vast range of different sources. They needed an easy way to unify these images so that they looked instantly ‘Spotify’ without the need to plaster logos all over them.
The design team came up with a very simple colour-wash effect inspired by concert posters produced on a budget in the 1960s. When applied to a series of images from a range of sources, this effect creates instant brand recognition for Spotify. The team even created a simple tool (“the colorizer”) that could be used by Spotify’s designers to generate this effect.
Here’s our example blog page again with some simple colour effects applied. The Verge do something similar on their homepage using CSS alone, although I’m not certain that it is completely successful.
Illustrations
For me, one of the nicest ways to build a consistent online identity is to dispense with photos entirely. I love to look at websites that use custom illustrations to accompany the content that is published. A List Apart have been doing this for years and it still looks great — the drawings have become integral to the brand. HelpScout’s blog uses simple illustrations very effectively as does the Dollar Shave Club blog. I also love the work of designer Paul Woods and his Adloids project. And there’s the excellent WaitButWhy. Creating custom graphics is an approach that I’ve tried to take for my very own blog (albeit less successfully!).
Producing custom illustrations for new website content isn’t a particularly practical strategy as it requires constant access to an illustrator or designer. I’ve recently been experimenting with ways in which content editors can fake a similar aesthetic however using simple online tools.
There are a number of free web-based image editors that can be used to quickly apply effects to an image. The great thing about these is the fact that they are accessible to anybody — you don’t need to be a designer with expensive software.
On a recent client project I played around with the photo effects on BeFunky.com. Many of the filters are pretty naff, but decent results can be obtained if you stick to a select few. By defining these in an easy-to-understand guide, a client can turn even the worst photo into something a little smarter and on-brand.
Conclusion
A picture supposedly speaks a thousand words. Left in the wrong hands however, those words will be all be synonyms for “crap”.
As designers, we must take control. We need to define simple guidelines that can be followed by anybody who is responsible for publishing new content to a website. We need to ensure that technical processes are put in place that output images in the correct format. And we need to clearly define what an “on-brand” image looks like. We should also consider the use of simple images treatments in order to strengthen the visual identity of a digital brand.
Don’t let websites get ruined by crap images.