The Elements of Style for Designers

With some exceptions, what is good for words is good for pictures too.

The creative act of writing is always bounded a bit by the audience: journalism is not writing a novel. The same can be said of design: it is not art. Yet the materials are the same—words and pictures—and it is no big surprise that what is good for fiction is good for nonfiction. The surprise comes when one discovers that, with some exceptions, what is good for words is good for pictures too. And thus we discover The Elements of Style is just as relevant for young designers as for young writers.

E.B. White finishes The Elements of Style with a “List of Reminders.” It could have easily been “Ten Rules for Clear Writing” or “A Writer’s Manifesto” or even “Hanging Commas 99% Bad” but he opted for the gentler term: reminder. He did so because rules were meant to broken—learned first, but broken. And so he reminds us as we innovate and play what those rules were in the first place, and reminds us that breaking a rule can sometimes be hard to pull off. In that spirit, I will try to translate his writing reminders into design reminders. After reading them, you can go off and exuberantly ignore them.

1. Place yourself in the background.
Write in a way that draws the reader’s attention to the sense and substance of the writing, rather than to the mood and temper of the author.

You’re the best designer in your graduating class; you had three job offers the instant you started looking. Now you are designing a bank site, and someone tells you to use blue. What do they know?

Of course you are good, but no one is so good that her whims should override the conventions and constraints of the design. Just because you have a flamboyant style doesn’t mean it is right for every project. If someone can spot a site and know it’s yours, perhaps you are getting in the way of the work.

2. Write in a way that comes naturally.
Write in a way that comes easily and naturally to you, using words and phrases that come readily to mind. But do not assume that because you have acted naturally your product is without flaw.

The seduction of fashion, the desire to impress or stretch your skills are all pitfalls unless you temper them with your natural skills and temperament. Still, talent is not enough.

3. Work from a suitable design.
Before beginning to compose something, gauge the nature and extent of the enterprise and work from a suitable design. … Design informs even the simplest structure, whether of brick and steel or of prose. You raise a pup tent from one sort of vision, a cathedral from another.

It’s worth saying twice, both in the thin book and in this article, because it is so often forgotten. Context is everything.

4. Write with nouns and verbs.
Write with nouns and verbs, not with adjectives and adverbs. The adjective hasn’t been built that can pull a weak or inaccurate noun out of a tight place.

The nouns and verbs of web design are objects and widgets. If you have chosen the wrong widget, no amount of help text or arrows will fix the issue.

5. Revise and rewrite.
Revising is part of writing. Few writers are so expert that they can produce what they are after on the first try.

It’s painful when a client or a boss rejects your first design. Sometimes that initial effort seems perfect. But revision is a way to reach a better design. Or sometimes—and only sometimes—shed light on the perfection of the first. When this odd event occurs, it’s best not to be upset because no one recognized your initial brilliance. Instead, remember that design is as much process as result, and part of your job is to get everyone participating in the design to the end goal.

6. Do not overwrite.
Rich, ornate prose is hard to digest, generally unwholesome, and sometimes nauseating.

Beware of gratuitous use of flash, AJAX, and gradients.

7. Do not overstate.
When you overstate, readers will be instantly on guard, and everything that has preceded your overstatement as well as everything that follows it will be suspect in their minds because they have lost confidence in your judgment or your poise.

How many Verisign and trustE logos do you need in your sidebar? How many awards plaques?

8. Avoid the use of qualifiers.
Rather, very, little, pretty—these are the leeches that infest the pond of prose, sucking the blood of words.

In web design, the “qualifiers” are often styling. Just because you can create your own look and feel for a scroll bar doesn’t mean you should. Many of the browser defaults work quite well; do not overburden your users with your desire to show off your mastery of CSS.

9. Do not affect a breezy manner.
The volume of writing is enormous, these days, and much of it has a sort of windiness about it, almost as though the author were in a state of euphoria. “Spontaneous me,” sang Whitman, and, in his innocence, let loose the hordes of uninspired scribblers who would one day confuse spontaneity with genius.

Here White speaks to fashion. Just because Jeffrey Zeldman did it doesn’t mean you should. Or Jason Freid. Or IDEO. When you see a hyper-simple site, or one with scrolling photos, or one with 64 point type, ask yourself if you can and if you should pull it off.

10. Use orthodox spelling.
In ordinary composition, use orthodox spelling. Do not write nite for night, thru for through, pleez for please, unless you plan to introduce a complete system of simplified spelling and are prepared to take the consequences.

White goes on to quote Strunk:

The practical objection to unaccepted and oversimplified spellings is the disfavor with which they are received by the reader. They distract his attention and exhaust his patience. He reads the form though automatically, without thought of its needless complexity; he reads the abbreviation tho and mentally supplies the missing letters, at the cost of a fraction of his attention. The writer has defeated his own purpose.

Web standards. Don’t Make Me Think. Pattern language. Enough said.

11. Do not explain too much.
It is seldom advisable to tell all. Be sparing, for instance, in the use of adverbs after “he said,” “she replied,” and the like: “he said consolingly;” “she replied grumblingly.”

A lesson I have learned by working with web search is: if you want people to notice something useful, the worst thing you could do is adorn it with lines, colors, or animation. A light touch actually indicates to users that this is worth paying attention to; blue and underlined is often the most effective. The most usable is often also the most used.

12. Do not construct awkward adverbs.
Adverbs are easy to build. Take an adjective or a participle, add -ly, and behold! You have an adverb. But you’d probably be better off without it. Do not write tangledly.

We can now invent widgets from anything. Anything on the page can open, close, launch, select. Sometimes it is the perfect metaphor for the job—such as clicking a thumbnail to see a larger image—sometimes it just bewilders. Do not design tangledly.

13. Make sure the reader knows who is speaking.
Dialogue is a total loss unless you indicate who the speaker is.

When you read a rapid-fire conversation in a book, often the author drops the “he said” “she said.” But have you ever had to stop and count forward from when quotes stopped being labeled? It is the same with design; it’s better to have a hint unobtrusively available than to ask your audience to memorize and track everything on the site. It’s always a thin line between assuming your audience is a pack of morons and expecting them to remember the shortcut key you offered on the homepage. Try to strike a sensible balance.

14. Avoid fancy words.
Avoid the elaborate, the pretentious, the coy, and the cute. Do not be tempted by a twenty-dollar word when there is a ten-center handy, ready and able.

Yup. Do I need to translate?

15. Do not use dialect unless your ear is good.
Do not attempt to use dialect unless you are a devoted student of the tongue you hope to reproduce. If you use dialect, be consistent.

Are you imitating an established style? Be sure that you understand it, and that you can keep it going throughout. The Onion is the reigning king of this proposition; their adherence to being a respected newspaper goes beyond the content to the design.

16. Be clear.
Clarity is not the prize in writing, nor is it always the principal mark of a good style. There are occasions when obscurity serves a literary yearning, if not a literary purpose, and there are writers whose mien is more overcast than clear. But since writing is communication, clarity can only be a virtue.

Clarity can only be a virtue. Tape that to your monitor.

17. Do not inject opinion.
Unless there is a good reason for its being there, do not inject opinion into a piece of writing. We all have opinions about almost everything, and the temptation to toss them in is great. To air one’s views gratuitously, however, is to imply that the demand for them is brisk, which may not be the case, and which, in any event, may not be relevant to the discussion.

You ought not say anything if you can’t say anything nice. Stick to the minimum to make your point. Just because you don’t want that item on the homepage doesn’t mean you have to make it khaki.

18. Use figures of speech sparingly.
The simile is a common device and a useful one, but similes coming in rapid fire, one right on top of another, are more distracting than illuminating.

Pick your poison: replace the term “similes” with “photos,” “diagrams,” “giant fonts,” “orange,” and so on …

19. Do not take shortcuts at the cost of clarity.
Do not use initials for the names of organizations or movements unless you are certain the initials will be readily understood. Write things out. Not everyone knows that MADD means Mothers Against Drunk Driving, and even if everyone did, there are babies being born every minute who will someday encounter the name for the first time.

How many folks label a button “go” because they haven’t much space, or worse, remove the submit button completely because “everyone” knows you can just hit enter. Bite the bullet and redo the design, and make it clear.

20. Avoid foreign languages.
The writer will occasionally find it convenient or necessary to borrow from other languages. Some writers, however, from sheer exuberance or a desire to show off, sprinkle their work liberally with foreign expressions, with no regard for the reader’s comfort. It is a bad habit. Write in English.

The showy “foreign language” of the web is the language of early adapters. Really, not everyone uses del.icio.us, flickr, Google Earth, and not everyone speaks the language of their interfaces. Be cautious in your adoption of new paradigms.

21. Prefer the standard to the offbeat.
Young writers will be drawn at every turn toward eccentricities in language. They will hear the beat of new vocabularies, the exciting rhythms of special segments of their society, each speaking a language of its own. All of us come under the spell of these unsettling drums; the problem for beginners is to listen to them, learn the words, feel the vibrations, and not be carried away.

In art school, I was asked to copy master works. I didn’t understand why, until I began copying them; when you imitate you do actually learn. You don’t just copy, you understand why the brushstrokes went left then right, you know why bright green was used in a face. And when writing, I always wrote with the voice of whomever I was reading. Hemmingway made me economical, Salinger verbose.

When you work you can try on many hats but in the end, you have to find a way to once again hear your own voice and see your own design.

Your turn
These reminders are just the beginning. Try adding your own as you learn hard lessons, try collapsing some of his into a simpler reminder set. I often use “clarity, brevity, concreteness” to remind myself what I want from my work. It’s up to you to take from this source, or any other source, and incorporate it into your style and your approach.

I’d like to invite all of you now to share the interpretations or lessons you’ve learned that would enhance a list of reminders for designers. No one has all the answers, but by being open to learning from others we can all get a little better.

Posted in Design Principles, Forerunners, Learning From Others | 10 Comments »

10 Comments

  • Dave Malouf

    July 25, 2006 at 1:13 pm

    Christina, I think this is one of the best and most useful articles I have seen on B&A for a long time. No disrespect to the other authors, but I love the way you put this together. It is really so clear, concise and really follows the example of the point you are trying to make.

    I think there is a book in there, if you are interested in going that route again. A UX Design Guidebook. I don’t think anyone has outlined it quite as well as this in the past and it would be such a great resource for the UX design community, indeed.

    Basically, I’m hungry for more of this thinking and elaborations and collections of examples (good and bad) in each case. Maybe it would fit in a book in Rosenfeld Media size? Or could be done in a series.

  • Masood Nasser

    July 25, 2006 at 5:18 pm

    Christina, very well put. I would make it mandatory to my collageaus to read this article before quoting so and so “rules” or “guidelines”. “Reminder” is a nice word. Loved the Quote “exuberantly ignore them’

    Now lets see if I can come up with my own “reminder” sets on yet another boring flight tomorrow:-)

  • Rebekah Sedaca

    July 25, 2006 at 8:27 pm

    Thanks for this thoughtful and thorough comparison and for following up up on some of the questions raised in the interview with Eric Reiss posted on b&a in May.
    (http://boxesandarrows.com/S/2947).

    Thanks for the reminders! Now, back to evaluating their worth in context…

  • Madonnalisa G. Chan

    July 26, 2006 at 4:32 am

    Useful in any environment. I’m wondering though if text messaging/IM have changed the way we have communicated…of course under a certain age. I will definitely commit them to memory and use often.

  • Joe Sokohl

    July 31, 2006 at 1:49 pm

    Great use of Strunk & White. Too, your article supports the thesis that technical writers make great user experience designers, primarily because of their long-time attention to knowing their audience.

  • Joseph Tate

    July 31, 2006 at 3:46 pm

    First, without doubt: a useful article that should be required reading. But this isn’t the first time I’ve seen Strunk and White quoted lately and it isn’t the first time I’ve wondered if web writers realize much more (and dare I say) much better has been written about writing since. Amid the all the applause, I just want to interject: Strunk and White can be useful reading, but it’s not faultless. Consider the injunction to not overstate (no. 7). Then read no. 14: “Avoid the elaborate, the pretentious, the coy, and the cute. Do not be tempted by a twenty-dollar word when there is a ten-center handy, ready and able.” If that’s not overstating, what is? The first sentence uses four words where one would work and the second sentence, well, restates the first. The book is rife with these sorts of inconsistencies, some of which are tongue-in-cheek, some of which are endearing lapses of the “do as I say, not as I do” variety.

    I think the article closes on the best advice: “No one has all the answers,” and Strunk and White have only the barest handful.

  • Christina Wodtke

    July 31, 2006 at 5:56 pm

    Nothing is faultless; Strunk and White are useful in this context because of their reach. I would love to see more books listed (or even reviewed! get cranking, Joseph) on writing well. In the web, writing seems to be the forgotten child — how many web companies have writers? How many have enough writers to actually cover the writing needs? Even worse than design, writing is viewed as someting anyone can do.

    Endearing lapses indeed! But also possibly illustrations that poetry should sometimes override policy.

  • Luke Kowalski

    August 9, 2006 at 10:59 pm

    So many of these are universal. They apply to visual presentation quality, too (Interface, industrial, or architectural design). All of the design sciences rely on a base vocabulary and style that people seem afraid to deconstruct…Good to see this enumarated on boxesandarrows.

    One book that deals with the perception of art, nature, and style (written word) comes from Herman Miller. Normally known for his smutty trilogy / Tropic of Cancer he actually wrote a very different work titled “Big Sur and the Oranges of Hieronymus Bosch”. It taught more about perception than any art history or cognitive psych texts…
    :)
    I wander if there is a list of “Related Fiction and Non-Fiction Books for Designers”? I would put that on it in addition to all the Alexanders, Normans, Karwowskis, Coopers, Derridas, Kierkegaards, etc.

  • Austen Austen

    August 11, 2006 at 2:54 pm

    Another book that gives great advice on writing well is Patricia T. O’Conner’s “Woe is I.” In addition to great grammar and punctuation advice, she has chapter called “Saying is Believing: Write What You Mean.” It includes a lot of helpful advice that could easily translate to writing for the web, and even design:

    “Say what you have to say.”
    “Stop when you’ve said it.”
    “Don’t belabor the obvious.”
    “Be direct.”
    “Don’t make yourself the center of the universe.” [Something I think many designers are guilty of.]
    “Put descriptions close to what they describe.”
    “Make sure there’s a time and place for everything.”
    “Put your ideas in order.”
    “Read [your own writing] with a felonious mind.”

    I have this book by my side every day. I highly recommend it.

  • Livia Labate

    September 25, 2006 at 1:32 pm

    “Clarity can only be a virtue”… Thought I often assume it goes without saying, it does not. This little assumption seems to be fading further and further away from our collective designer minds. With the shared awe of game design across our industry as a source of inspiration (for design in various domains), clarity can often come second to the “interestingly obscure” and “excitingly complex”. For a fresh dose of the virtue of clarity, read Scott McCloud’s latest ‘Making Comics‘. It’s a great segway from reading Christina’s parallel between writing and design, because it talks about comics as a communication tool combining words AND images (with the purpose of being clear), not that different from most of our design endeavours.

Sorry, comments are closed.