When to Use Graphics in Web Design
In this blog post, I urge web designers to view graphics as just one of the tools at their disposal. Content, not graphics, should be the main concern of any web designer.
You should be able to justify the inclusion of each and every image used on a web page, by asking, “Is it more effective and efficient to use this image than to leave it out or use text instead?”.
I look at the relative strengths of text & graphics, and examine 5 key areas where graphics can be essential for communicating effectively.
“Like what?! Grandpa, web design is graphics – dur!”
I used to think the same thing. And I love cool graphics as much as the next guy. I get really excited about visual effects, from huge art splashes down to neat button styles.
I also know that neat graphical imagery has little to do with effective web design. I’ve seen great sites that really work – as in they lead me through to what I want, keep my attention, create an enjoyable conversation, and make me want to share the word – which use hardly any graphics at all.
Web Design isn’t Graphics
Actually, web design is communication: creating something that communicates information, or an experience. That’s all design is – an exercise in communication.
Visual design is crafting communication using visual means. Web design is crafting communication through a web user agent (which, by the way, isn’t always a graphical browser).
It’s possible to have a great, really effective web site that doesn’t use any graphics. And some sites depend totally on imagery to achieve their goals.
Graphics and photos are just one of the tools you have in your design toolkit, not the only one.
Actually, I’d argue that they shouldn’t be the main one either. If you’re a rounded web designer, fully committed to making every site you make the greatest success it can be, your #1 tool is words.
Words and Graphics are Both Valid Communication Tools
(So are Photos, Colour, Typography, Video, Sound, Timing, Texture, Space, Surprise, Beauty, and Ugliness.)
Let’s be totally clear: there’s nothing wrong with graphics. What I’m saying is, to be the best designer you can be, you have to develop the sharp discipline to discern the best tool for any job.
When do you use words, and when do you use graphics? Let’s take a look!
Rule: Use text… unless…
Sometimes words are best; sometimes graphics are best. Generally, words are most efficient, and you should always seek to use text in place of graphics, unless you have a good reason to be sure that a graphic will be more effective.
Text has several innate strengths, which can give it natural advantages over graphics.
The logo on Matt Lawrence’s disability advocacy and web / project management site is pure text; very lightweight, yet impacting.
These strengths make text a noble and worthy ally. But it’s not always the best. Let’s consider some times when you may turn to graphics.
So, Mister-Smarty-Pants-Living-in-a-Non-Graphical-Telnet-Medieval-DOS-Prompt-World-of-Misery, when do you use graphics?
1. Content Imagery!
Obviously, sometimes your content is the image.
If you’re a photographer and you’re showing your work, obviously your content will be photographic images.
If your content is a news story, showing a picture of the thing your story is about helps reinforce the page’s getability.
The content and the message on Chris Gloag’s photography folio is visual, so here the focus should be entirely on the content imagery.
This BBC News item on Barack Obama’s environmental goals benefits from featuring a recent picture of the man himself.
Seeing Barack in an outdoor setting helps reinforce the “aboutness” of the page, and helps you quickly get the context. Supporting content imagery like this can also help to make dry text appear more appealing.
2. Extra Visual Impact
Today’s commonly-supported CSS styles give relatively little control over the styling of text. It’s pretty much limited to: size (not exact), colour, background, and position. Sometimes your design needs to draw the eye strongly towards certain content. Graphics often give the extra attraction (but remember attractiveness is relative – if everything on your page tries to draw the eye, the eye gets lost and the page becomes less effective).
Say you have a huge page with lots of stuff on it, and you want to draw attention to an offer, you could use white text on a red background (just using CSS), or you could put white text on a red star (a graphic).
The star adds dynamism that the text alone can’t (through adding radial diagonal lines and breaking the text out of the horizontal), which may add the attraction your design (your communication) needs.
The hard information communicated is the same with both techniques: There’s a sale, and prices are cut 50%. The only difference is in visual impact.
Counting the Cost of Graphics
Bear in mind that the star graphic uses 3586 bytes (and an additional HTTP request to the server), whereas the text uses only 138 bytes, most of which is CSS that could be abstracted to a stylesheet, and doesn’t have the extra resource hit.
While file size and speed are not unimportant, the biggest cost to most businesses is time. If my client wanted to change the discount from 50% to 75%, it would take me about 5 minutes: to open up the Photoshop file, edit the text, cut out the new star graphic (making sure it’s the same size as the original), choose my optimisation settings, and upload.
To make the same change in text, on most of our sites, would take maybe 60 seconds: navigate to the client’s CMS, click the log-in button, navigate to the page, select the include, edit, save, publish.
It may not seem a big difference, but with a large project, these additional 5 minutes can really add up.
3. Achieve Exact Visual Requirements
If your web site represents a recognised brand (or one that wants to become recognised), putting a graphical logo in the dominant position on the page in exactly the right font, colour, style, and proportions, states clearly that, “This is a Xerox/Nike/Apple… web site.”.
You could try doing that in text, but you may not succeed in communicating the essential value (that it’s an official brand site).
If you need text to appear in exactly the right way – just so – sometimes you have to show it graphically. While CSS gives you a lot of control over how text is displayed in browsers, it’s not always possible to specify the size extactly, and you’re always dependent on the fonts installed on each visitor’s computer. So if it’s really important
The logo from the Freelenz site could not be rendered in text retaining any of this character.
4. Communicate Essentially Visual Properties
If you need to describe purely visual characteristics: whether form, beauty, colour etc., a photo or graphic can convey the information instantly.
While text can be great for creating mood (ever read a good book?), if you want to create a particular mood or style very quickly, and you can’t depend on your visitor having time to read a body of text, graphics are the way to go.
A screenshot on Expression Engine’s home page shows the software product’s user interface.
Showing the actual form of this real product shows that it exists, and conveys some key properties (looks appealing & straightforward to use).
The LA County Museum of Art’s home page has a splash area that cycles through their curent big exhibitions.
When you’re communicating the fact that famous or intriguing art is on show – or anything which is visual in nature – the obvious means is visual.
Another great thing about graphics is that, because they’re not text, they’re potentially more widely understandable. You don’t always need to speak the language the site’s written in, in order to get the meaning of a graphic.
This can apply to both hard and soft information.
Example of Hard Information
This close-up of the Google Docs UI shows a number of icons that are instantly recognisable to most people, whatever language you speak.
Because they’re iconic (recognisable), it’s possible for icons to communicate meaning on their own, without the text that accompanies these.
These icons denote specific meanings through a more universal visual language, rather than spoken or written language.
The test should be: Is the icon recognisable enough to make it more efficient than a text label? Or, is language-independence crucial?
Example of Universal Soft Information
This snippet comes from Satsu’s print and web design portfolio site.
The site has a rich grunge style that communicates the designer’s personality and approach in a way that’s univerally instantly understandable.
So here, the communication of style and mood are central to the site’s message.
6. Building Trust through Visual Proof of Existence
We’re all pretty cynical, especially on the web. When someone tells us something, we tend to run mental tests to see how credible they are, and whether we can believe their story is true.
However, we tend to trust the evidence of our own eyes more. So when what you want to demonstrate is a visible product – whether it’s a boat, a t-shirt, or a software widget – showing it existing in the wild helps build confidence in your visitors’ minds.
Example of Building Trust through Visuals
These screenshots, from issuu.com’s Smart Look, help you believe that the software is a real product, because you can see it in a browser with your own eyes.
Showing the product in action on the web, on a media kiosk, and on an iPhone not only communicates the fact that this one solution can be accessed in several ways, but also reinforces in the visitor’s mind that MinistryGive is a real live application that they can believe in.
Stonetire’s site shows a pile of tyres, which leaves you in no doubt what their business is about!
This image communicates quite a few things, in fact: We do tyres; we do big, chunky, rugged ones; we’re a low-key approachable business (as the tyres aren’t stacked and labelled on gleaming metal racks).
7. Summarising Complex Data
Sometimes, it’s easier to get the big picture visually than to take on all the raw data.
Example of Making Complex Data Easier to consume
This graph from Google Analytics summarises the visits to key pages on a site over time.
It’s much more efficient to get the big picture, which can convey quite a lot of information in summary form (if less exact) than the equivalent table of data.
Graphics are essential tools, but they can be such powerful visual attractors that they must be used wisely.
Learn to use graphics and imagery consciously, when you’re actually trying to communicate, not decorate.
Try This Test
Try going through one of your own page designs, and for each image used ask:
- Which of the 7 reasons for using graphics applies to this image?
- Does the image actually communicate something (or is it just decoration)?
- Is the visual impact/attractiveness of the graphic appropriate to the importance of its meaning?
- Could a text alternative be just as effective?
- What would happen if I removed this?
I hope this viewpoint has been useful to you, and encouraged you to think in a new way about the way you use graphics in your own sites.
I’m motivated to look round the web for examples of really effective web sites that use few (or no!) graphics, and yet communicate powerful messages.
Watch this space… If you know of a site that achieves this, please do let me know. Cheers!