Eight design tips for the Web

The Web is finally, fully here — central, essential media. Not embryonic, not peripheral, not optional. It is fluid, interactive, and useful in ways that no other medium has ever been. It is changing everything.

Including our design lives!

For me, as for many of you, it’s been foreign. My own sense of design — the intuitive “feel” that comes with artistry and experience — is tuned to a static page. On a static page — a magazine page, for example — the designer controls the entire experience. The size, color, style and position of every element creates a visual harmony, like a painting. You move through the page in the way and at the pace I’ve designed. If I want you to feel tension or curiosity or delight, I can probably make that happen.

But not on the Web, at least not usually. The Web is not a page. It’s a place. It’s the mall, the market, the town square. On a good day, it hums. On bad days, it’s chaos, loose paper, a million filing cabinets dumped open, the TV left on, a picnic in the wind.

The biggest part of design is editing. Editing — whether prose or music or movies — is a matter of deciding what to include and in what sequence. Who wants to read the end of a story first? What freshman sits down in senior Greek and expects to get it? Data has no meaning until it’s sorted, edited, presented. Without this, there is no story. There can be no thrill, no surprise, no delight. We go to movies not to see explosions but the right kind of explosions, in the right places, at the right times. We go not to hear people talk but to hear a certain kind of talk, with a certain air and emotion. If the audience could click its way through a stack of scenes, jumping here, shuffling there, in any sequence, it would be bored by what it produced more often than not.

The Web has no transcendent rhythm. Everything comes at you differently — flickering, stuttering, demanding. There are few pauses, few silent spaces, little room for contemplation or even real thought. Get in, move around, move on. Hurry. Skim. Jump. Click. Don’t stop. It’s an agitating environment that, unlike a book or a song, has no end. No climax, no closure. There is always another click.

Here are a few tips before you dive in.

1) Before you start designing, know what you want to say and what you want to have happen. Getting clarity up front is a make-it-or-break-it first step and the hardest part of any design. Failure to define a vision — and work to it — is the most common failure on the Web and why the Web is so dissonant.

2) Think not in pages but in sound bites. Condense a message to a few words, a picture, a square inch. That’s good practice in print, but it’s essential on the Web. Viewers don’t see pages, really; they see bits.

3) Think top-down, like a newspaper — big news first, less important as the page descends, the inverted triangle. It sounds obvious, but the viewer can’t see the page all at once.

4) Limit your links. A page with 50 links each leading to 50 links puts 2,500 destinations within two clicks. People can’t process that many options! Focus your choices, too. It’s easier to decide between two shirts than bleu cheese, a new sofa, and a back rub.

5) Be consistent. If your navigation button is in 11-pt Verdana, upper right corner, leave it there on every page. Imagine your car radio buttons rearranging themselves tomorrow.

6) Limit your fonts, sizes and colors. Every difference alters the message in some way, so don’t use differences arbitrarily. On this page you’ll see only two text typestyles, all black or gray or blue, a clear hierarchy, very deliberate.

7) More of a personal opinion than design advice, avoid shocking colors that don’t occur in nature. Even if you’re selling cotton candy, an entire screen in radioactive pink may cost your viewer his lunch.

8) Before approving your design, ask yourself three questions: 1) Is it beautiful? 2) Is it simple? 3) Is it clear? You want a yes on all three.

That’s my list. What are your experiences designing for the Web, and do you have any tips that you would add?

———-

By the way, we’ve recently indexed Before & After articles by topic. You can find 23 that are useful for Web design here.

.