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.

You can set mood with words or graphics.

You can attract attention with words or graphics.

You can describe a product or service with words or graphics.

You can indicate an option or action with words or graphics.

You can convey an idea or concept with words or graphics.

You can show who you are and what you do with words or graphics.

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.

“Always use text, unless graphics are more effective.”

Text has several innate strengths, which can give it natural advantages over graphics.

Text is:

  • Smaller
  • Readable by Search Engines, Text-to-Speech Readers, and all other user agents
  • Quicker to make
  • Easier to Change
  • Easier to Abstract (translate, store in a database etc.)
  • Easier to create using code
  • Often clearer and more meaningful
  • Less susceptible to personal taste
  • Easier to expand and reformat, for the benefit of people with vision difficulties

Example

Close-up of Matt Lawrence's text logo

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.

Examples

Chris Gloag's photo portfolio

The content and the message on Chris Gloag’s photography folio is visual, so here the focus should be entirely on the content imagery.

BBC News Story on Barack Obama

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

Sale! 50% off! sale flash 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.

When you use graphics for this reason, ask whether the payoff of the additional impact is worth the extra cost of the graphics.

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 key is to be brutally honest about when it’s really important, versus just really nice for your text to appear just-so.

Examples

Freelenz logo

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.

Examples

Close-up of screenshot of Expression Engine's software

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

Crop of Los Angeles County Museum of Art home page

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.

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

Close-up of icons on Google Docs

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

Close-up showing rich visuals from Satsu portfolio

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

Close-up showing rich visuals from Satsu portfolio

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.

Shot of Ministry Give - donation management software

MinistryGive, from ChurchMedia, is a solution to help organisations manage charitable donations.

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.

Close-up of Stonetire's home page

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

Shot of graph from Google Analytics

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.

(Edward Tufte has done some interesting work looking at the limits of this in his pioneering of sparklines.)

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!

3 Comments Leave a comment

  1. Pingback: World-Wide Web Design: Hints and Tips for Designing a Cross Cultural Website | tripwire magazine

  2. Alex says:

    Thanks this is actually a very good article. Your logic and clarity of thought is useful. As someone from a graphic design background who came in to web design soon after graduating, I find that I often have to deal with people’s expectations of what I should do as web designer. Often from developers and people within the industry. You see, they are not impressed by simplicity… they do not see the skill in simplicity or minimalist design. They expect that as I come from a design background, my web design should be very expressive, and ‘impressive’ from a visual perspective. What I am learning more and more, is that this is not what users really need / want and therefore does not lead to results. What people really want is design that gives them a subtle nudge of confidence and makes their experience pleasurable and easy. I don’t know what my point here actually is except that I struggle with a feeling of needing to ‘impress’ my company with my skills ( no-one wants to see something they think they could have done themselves without any Photoshop or illustration skills )… and doing what I believe is actually effective and important… which is actually very skillful too. So as usual, I am torn and lost!

  3. Pingback: Building Your Own Website | AdamCece.com