When to Use Graphics in Web Design

“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.

Text is:

Example

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.

Examples

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

Examples

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.

Examples

5. Language-independence

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

Example of Universal Soft Information

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

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

Conclusions

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.

Next

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!