Alistapart Art Direction and the Web

7/30/2019 Alistapart Art Direction and the Web

1/5

Art Direction and the Web: A List Apart

kip navigation.

q up front

q articles

q about ala

q live events

q xml feeds

SN: 1534-0295. 7 May 2004 Issue No. 180

Art Direction and the Web

y Stephen Hay

In mathematics, the whole is always equal to the sum of its parts; two and two invariably

add up to exactly four. In the arts, however, the whole is either much more than the sum of

the parts or much less... Many dramas have been ruined by actors who tried to enlivenserious scenes by being funny. The spectators laughed at the comedy, but they were bored

by the play.

Henning Nelms, Magic and Showmanship

his comment from Henning Nelmss classic text on showmanship for the conjurer can adequately be

plied to web design. Designers, programmers, and other specialists create essential elements of the

hole. But the art director is in a position to tie these parts together for maximum effect, and maximu

usiness results.

he purpose of this article is to introduce our readers to the principles and techniques of the art directo

which relate closely to web design and show how these can influence the overall effect of a

ebsite.

What is art direction?

hats a hard question to answer. In the movies, art directors are usually responsible for creating the

le:///F|/incoming/______________DOCZ_SONNNNNNNNNN...istapart_Art_Direction_And_The_Web/art_dir_web.html (1 of 5)16.02.2005 04:25:19
http://www.alistapart.com/http://www.alistapart.com/articles/http://www.alistapart.com/about/http://www.alistapart.com/live/http://www.alistapart.com/xmlfeed/http://www.alistapart.com/issues/180/http://www.alistapart.com/authors/stephenhay/http://www.alistapart.com/authors/stephenhay/http://www.alistapart.com/issues/180/http://www.alistapart.com/xmlfeed/http://www.alistapart.com/live/http://www.alistapart.com/about/http://www.alistapart.com/articles/http://www.alistapart.com/http://www.alistapart.com/


2/5


ook and feel of the film. In advertising and print work, art directors (often teamed up with a

pywriter) come up with concepts, the creative ideas which communicate with us on a gut level

rough such devices as theme, metaphor, and symbolism. Some art directors do little more than dream

p these ideas and present them to clients, while some oversee almost all aspects of the design and

oduction process. Surprisingly, art direction is seldom taught in schools and there is very little form

formation on the subject; it is often learned in practice.

ill sounds vague, doesnt it? One might argue that art direction cant be explained. But you can get tel of it by studying it. Zeldman has posted a wonderful example, and he accurately describes the

fference between art direction and design. Try checking out the covers of news magazines (in my

pinion, covers ofThe Economistare a showcase of consistently effective art direction), the features

ction of many newspapers, and all types of print advertising. Watch television commercials, and ask

ourself what devices or elements make some commercials work, while others dont.

ow does this apply to the web?

uppose a toothpaste company asks you to come up with a site that will be aimed at all age groups.

omeone purely concerned with design might create a proposal which uses very nice type, blue as a

ckground color because its fresh, and some stock photos of generic mouth and teeth or laughing

odel families. Theyll spend time tinkering with lines and shadows, wondering if theyll use a two-

lumn or three-column layout. They might even have a tube of toothpaste being squeezed on to the

reen and use the straight line of squeezed toothpaste as a navigation bar. It might look nice, but that

the end of it.

n art director would perhaps come up with a concept which communicates the importance of the sm

hat does a smile communicate? Power? Confidence? Happiness? Amusement? All of the above? Th

t director might choose to delve into the smile as a symbol of healthy teeth and gums. She might eve

oose to categorize types of smiles and relate these to types of toothpaste, exaggerating the images u

portray the toothpaste types:

q Cool Minty Fresh: the smile of a climber on Mount Everest.

q Extra Sensitive: the smile of Dr. Phil.

q Extra Strength: the smile of Dracula.

miles of power people paired with success stories. Smiles of comedians laughter is the best

edicine. The smile as an international language of friendship. Why not develop our own smilies o

moticons? You get the idea. Dont just design. Its often just plain boring when compared to a wel

veloped concept.

reat ideas dont just happen

he most important aspect of art direction is the concept. Sure, talent might be an issue when it com

http://www.zeldman.com/daily/0403b.shtml#ma0103http://www.zeldman.com/daily/0403b.shtml#ma0103


3/5


thinking up great concepts, and your idea or your art directors might not win you any award

ut you can develop good ideas. Creativity is a process, and youve got to find your own. Here are so

eas to get you started:

1. Goals, goals, goals. Youve heard it all before, but theres a reason youve heard it all before.

Good concepts accomplish something. And that something should be the objective to which yo

and your client have agreed. Always ask yourself, will this idea help us reach our goal?

2. Use idea-stimulating techniques. Fantastic ideas might just come to some in the shower, but rest of us can be helped along by using techniques like brainstorming. There are plenty of book

on idea generation, and the rules of brainstorming are fairly well-known. Initially you should

generate a large quantity of ideas. Your chances of coming up with a winning idea are usually

directly proportionate to the number of ideas you generate. You can use the method of your

choice. One effective technique, especially if you work alone, is to take a sheet of paper and w

your problem or objective at the top. Then force yourself to quickly write or sketch twenty

different ideas, and do not stop until youve got twenty. It will be difficult, but hey, if it were ea

it wouldnt be called work. Here are some pointers:

r Dont censor yourself. Youll do that later. All ideas are welcome at this point, even (asometimes especially) the crazy ones.

r Sketch quickly, write quickly. Youll flesh out the best ideas later.

r Use symbols, metaphor, or theme. Some of the best concepts utilize recognizable

symbols, as in Zeldmans example. Use your life knowledge and experience. To get a f

for this, take the creativity test at Ron Reasons site and study the test examples.

r Dont design. Youll do that later.

3. Once youve got your ideas on paper, put on the critics hat. Choose the best two or three i

and flesh them out a bit. Now you can permit yourself to think more about the actual design, ty

color, and layout. Test the ideas against your objective. The best idea should win, but stay flexGood ideas can always be made better.

4. Keep the birds eye view Dont get too wrapped up in the details. Work like a sculptor. Start w

a large mass of ideas and refine from there but keep looking at the whole through every pha

of the project. Let the specialists work out the small details, and guide them subtly when neces

to keep everything on track.

irect the art

o youve presented your idea and the client loves it (and you). Now the site needs to be produced. Yb as an art director has just begun now youve got to deal with the client, the programmers,the

signers, the project manager, and anyone else involved in the project. All of these people contribute

eir insight and talent, and its your job to make sure that the end result remains as closely related to

our concept as possible. Here are some tips for the production phase:

1. Know your stuff. As an art director, you need to know what the technologies are and how the

used. You need to know what everyone on your team does, and why. Leave the details up to th

but be sure you know whats involved. It will gain you the respect of your team when they rea

http://economist.com/images/20030426/20030426issuecov.jpghttp://www.ronreason.com/simple/index.htmlhttp://www.ronreason.com/simple/index.htmlhttp://economist.com/images/20030426/20030426issuecov.jpg


4/5


that youre not working in a vacuum, and it will help you think up realistic ideas.

2. Keep the specialists in check. Being a team player is a good thing, but just because John the

primadonna designer has a thing for bevelled buttons and 20-pixel drop shadows doesnt mean

you have to grant his wishes.

3. Be open to those in the know. John the primadonna designer might just have a point (in thi

case, probably not). Test your team members suggestions against your objective and your

concept. If it fits and its okay for the budget, let them do it. They know their stuff, too.

that all there is to it?

ardly. The hardest part about art direction is arguably the development of a sound and creative conc

his literally takesyears of practice in most cases. Finding an idea-generation technique that fits your

wn personality can take just as long. But the results can be very rewarding indeed. Good design is

etty, but good design based on a solid concept will help make your sites much more effective and

emorable, especially when compared to the competition. Youll make your clients very happy.

uaranteed.

nd hopefully, youll enjoy the process.

iscuss

as it good for you, too? Discuss this article.

ative Californian Stephen Hay is co-founder and creative director ofCinnamon Interactive, and has

en designing for the web since 1995. He lives and works just over an hour northeast of Amsterda

iscuss

Talk about this article.

ookmark

Permanent URI.

Designers, programmers, and other specialists create essential elements of the whole. But the art dire

es these parts together for maximum effect and results.

earch

Include Discussions

elated Topics


Search
http://www.alistapart.com/discuss/artdirweb/http://www.cinnamon.nl/http://www.alistapart.com/discuss/artdirweb/http://www.alistapart.com/discuss/artdirweb/http://www.cinnamon.nl/http://www.alistapart.com/discuss/artdirweb/


5/5


r Business

r Culture

r Process

epartments

r Contact

r Contribute

r Credits

r Permissions

r Q & A

ot Topics

r Accessibility 38

r Browsers | X-Platform 31

r Business 42

r Content 44

r CSS 55

r Culture 41

r Design 76

r DOM | Scripting 23

r Flash 9

r HTML | XHTML 46

r Process 23

r Server-Side 24

r Tools 24r Typography 11

r Usability 23

r XML & Pals 12

LA lives at Logicworks.

welboxing. Sweet disc packaging systems. Put your stuff in something nice, will ya?

opyright 19982004 A List Apart Magazine, Happy Cog Studios, and the authors. XHTML, CSS

08.

le:///F|/incoming/ DOCZ SONNNNNNNNNN istapart Art Direction And The Web/art dir web html (5 of 5)16 02 2005 04:25:19
http://www.alistapart.com/topics/business/http://www.alistapart.com/topics/culture/http://www.alistapart.com/topics/process/http://www.alistapart.com/contact/http://www.alistapart.com/contribute/http://www.alistapart.com/credits/http://www.alistapart.com/copyright/http://www.alistapart.com/qa/http://www.alistapart.com/topics/accessibility/http://www.alistapart.com/topics/browsers/http://www.alistapart.com/topics/business/http://www.alistapart.com/topics/content/http://www.alistapart.com/topics/css/http://www.alistapart.com/topics/culture/http://www.alistapart.com/topics/design/http://www.alistapart.com/topics/dom/http://www.alistapart.com/topics/flash/http://www.alistapart.com/topics/html/http://www.alistapart.com/topics/process/http://www.alistapart.com/topics/server-side/http://www.alistapart.com/topics/tools/http://www.alistapart.com/topics/typography/http://www.alistapart.com/topics/usability/http://www.alistapart.com/topics/xml/http://www.alistapart.com/logicworks/http://www.jewelboxing.com/indexala.phphttp://www.alistapart.com/copyright/http://www.alistapart.com/http://www.happycog.com/http://validator.w3.org/check/refererhttp://jigsaw.w3.org/css-validator/validator?uri=http://www.alistapart.com/c/ala.csshttp://www.contentquality.com/mynewtester/cynthia.exe?Url1=http://www.alistapart.com/http://www.contentquality.com/mynewtester/cynthia.exe?Url1=http://www.alistapart.com/http://jigsaw.w3.org/css-validator/validator?uri=http://www.alistapart.com/c/ala.csshttp://validator.w3.org/check/refererhttp://www.happycog.com/http://www.alistapart.com/http://www.alistapart.com/copyright/http://www.jewelboxing.com/indexala.phphttp://www.alistapart.com/logicworks/http://www.alistapart.com/topics/xml/http://www.alistapart.com/topics/usability/http://www.alistapart.com/topics/typography/http://www.alistapart.com/topics/tools/http://www.alistapart.com/topics/server-side/http://www.alistapart.com/topics/process/http://www.alistapart.com/topics/html/http://www.alistapart.com/topics/flash/http://www.alistapart.com/topics/dom/http://www.alistapart.com/topics/design/http://www.alistapart.com/topics/culture/http://www.alistapart.com/topics/css/http://www.alistapart.com/topics/content/http://www.alistapart.com/topics/business/http://www.alistapart.com/topics/browsers/http://www.alistapart.com/topics/accessibility/http://www.alistapart.com/qa/http://www.alistapart.com/copyright/http://www.alistapart.com/credits/http://www.alistapart.com/contribute/http://www.alistapart.com/contact/http://www.alistapart.com/topics/process/http://www.alistapart.com/topics/culture/http://www.alistapart.com/topics/business/

Alistapart Art Direction and the Web

Documents

Transcript of Alistapart Art Direction and the Web