Graphic Fundamentals 1 – The Big Punch

by Joe Gillespie — May 1, 2003

Anybody with a computer and a graphics program can produce Web graphics at the push of a button. Computers have made it easy to do things that trained graphic artists could have taken years to master – lettering, airbrushing, photo retouching and painting with a vast range of traditional and non-traditional techniques.

In taking these shortcuts, many of the underlying principles behind graphic design have been bypassed and the results are not as potent as they could be. In this short series, I want to help to fill-in some of those gaps and provide a better understanding of what it's all about.

Where 'art' is about self-expression, graphic design is not. Graphic designers are generally employed to communicate somebody else's ideas – it could be the typography of a book or magazine, an advertisement or poster, or a Web page. Although the media can vary considerably, the basic principles don't.

Asked why they painted something in a particular way, an artist can say, "Because I like it that way!" and that's fair enough. A graphic designer can't do that. They have to be able to justify everything in terms that the client understands and agrees with. If an invoice query comes down to personal taste, they are on very shaky ground – if it ever gets to an invoice stage! It is a graphic designer's job to provide the best solution to a particular problem. Whether they 'like' the result or not is irrelevant. If they do, it's a nice bonus, but as they say, "looks are only skin deep".

Boxing Clever

Ali No, nothing to do with CSS boxes this time – we are going to take a look at boxing – pugilism, the sport – and see what can be learned.

I've never been a big fan of boxing but it does have some very interesting parallels with visual communication and Web design.

The 'brief' for a boxer is to score more points than his opponent by hitting a well defined 'target' area – or to knock him out for the count. With boxing, you are trying to land a punch and with graphic design, a message or idea. Either way, you will want to drive it home with some clout. To get to the point where you can score in boxing, there will be some intermediate sparring, ducking and diving. A boxing match is rarely a situation where one fighter walks up to the other, bops him on the chin and the opponent is out for the count on the canvas.

With graphics, you can also build-up to the 'big punch' with some preparatory work. This invariably means communicating at an emotive level to break down defences and get the recipient into a more malleable and receptive mood. That's where the 'art' comes in!

In the fight game, one name that immediately springs to mind is that of Muhammad Ali – not only a World champion boxer but also a man of great character and presence. As well as a strong right hook, he had a powerful image. His catchphrase, "Float like a butterfly, sting like a bee" is particularly relevant to this discussion. Lots of boxers can 'dance' around the ring but fancy footwork doesn't win boxing matches – it's that stinging punch that counts. Technique alone will not win a boxing match, neither will a big punch that misses its target. You have to use the technique to help deliver the 'big punch' where it counts.

Where graphics design is concerned, you will see much evidence of this 'fancy footwork' on Web pages, but without the knockout punch at the end, it gets nowhere. If you want to impress with foot gyrations it is better to become a tap dancer, not a boxer.

The primary purpose of graphic design is to communicate – not to decorate or embellish. To communicate, you then you have to deliver that message to the correct recipient in an appropriate way.

Let's break that sentence down a bit because there's a lot going on in there.

"you first have to have a message worth sending"

Well, this is the 'content' without which there is no point in saying anything. People who are totally caught up with techniques will happily deliver pretty envelopes with nothinginside.

When a designer attempts to 'pretty-up' a boring Web page it's a sure sign that they haven't thought enough about the content. Good content doesn't need to be embellished but there is no harm in using imagery to enhance the message and make it even more powerful.

"deliver that message to the correct recipient"

There might be one recipient, or many, but sending a letter to the wrong person, no matter how valuable the contents or fancy the wrapping is a wasted effort. Just think of all the junk mail you receive through your letterbox and your email account that is of no interest to you whatsoever. What happens to it? This 'blunderbuss' technique requires huge volume to get even a small score, is very inefficient communication and invariably ends in failure.

"in an appropriate way"

Sending a love letter in a brown window envelope or a final demand notice in a pink envelope with 'hugs and kisses' is not going to have the desired effect. The messages and recipients could be correct but the techniques are contradictory to what you are really trying to communicate and nullify the contents.

The phrase, "It's not what you say but the way that you say it", is a fallacy. It's what you say and the way you say it that really does the trick.

Creating a positive Image

I'm sure you will remember Muhammad Ali's other famous saying – "I am the greatest!" Maybe he was, maybe he wasn't but this claim is part of his image, his persona, his ethos. Certainly, in the context of heavyweight boxing, it is perfectly credible and therefore accepted as true. An 'image' transcends simple truth. People will believe lies if they are presented in the right way and they're receptive and sympathetic to them. That's the basis of politics, many other beliefs – and marketing. What makes a lie or half-truth become believable is consistent repetition. Tell the same story over and over again and eventually it can become 'the truth'.

"Put a tooth under your pillow at night and in the morning, it will have changed into money."

"Santa Claus delivers presents to children in the early hours of December the 25th every year."

"Beings from other planets are small and grey with big eyes and travel in saucer-shaped craft."

We know these things aren't really true, but we would like to believe them. Because we like the popular image of Muhammad Ali, we are prepared to accept that he is the greatest. If we didn't like the guy, we would be much less likely to believe it. Such a claim from somebody else would just suggest arrogance.

So, 'image' is very important. Whether you are selling expensive automobiles, trendy trainers or a pop star, this super-real facade becomes an iconic representation of the truth. You have to work hard to establish it and even harder to maintain it. People have to want to believe it in the first place and then you must remind them over and over again afterwards.

Graphic design plays a large part in establishing an image. If you examine the process closely, you will see the boxing metaphor again – the delivery technique and the punch. Building an image is not like designing an advertisement or poster, there isn't a copy line embedded in a photograph or illustration. An image may have words associated with it but it is much more than that, it communicates to the heart as well as the mind.

Pictorial images are especially good for getting 'feelings' across. That is where the saying, "a picture is worth a thousand words" comes in. Some ideas are better expressed as pictures or, at very least, a picture can add to and reinforce a textual message – provided it is the right picture.

What is the right picture?

gloves Just like trying to describe the correct foot movement in boxing, the right picture is not so easy to define. It might not be a picture in the usual sense at all, maybe just an abstract, colored shape. We have already established that it shouldn't contradict the primary message but neither should it simply echo it. That kind of repetition can actually devalue a message.

Andy Warhol's multiple image paintings show that when a powerful image like a gruesome electric chair or news picture of Kennedy's assassination is repeated and made into a pattern, the essence of the message is diminished, not multiplied.

A child's picture book could have a picture of a cat with the word 'cat' beside it but the purpose there is quite different, it is to associate a visual object with a written word. Interestingly, the picture communicates to the child before she learns to read and means a lot more than just 'feline animal'. It represents cuddly, playful, soft, lovable – concepts that are much more difficult to represent with spoken or written words at that age.

Pictures are associative and evocative and can slip-in sneaky punches when the opponent isn't expecting them. Get enough of the right ones in, and you will have a better chance of winning.

Sticking to the Rules

Before the 'The Marquis of Queensbury Rules' were introduced in 1865, boxing was just a free-for-all fistfight staged for the entertainment of onlookers. The rules disallowed head butting, hitting a downed man, hitting below the belt and many other dubious techniques, giving the sport an air of genteel respectability. Boxing was accepted as an official Olympic sport in 1904.

There are rules in Web design too. Web standards, overseen by the W3C, help to control the 'free-for-all' of browser design and leads to a better experience for the surfing public.

Simply adhering to the rules of boxing, or Web design, is not enough though. Conforming to the rules is not the purpose of the exercise and sticking a badge that says 'Valid XHTML 1.0' on a Web page is like putting a, 'I follow the Queensbury rules' sign on a boxer's shirt. So what?

Valid markup is a means to an end, not an end in itself. Where its use is definitely encouraged, it is just another aspect of the footwork, the technique that helps to get that vital message across. It is not a message in itself. You still have to be able to land that knockout punch!

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float