But they were stuck.

What they’d hoped for was an image that would convey three character attributes of their company — integrity, resilience and commitment. These are wonderful qualities. Problem is, any one of them is almost impossible to convey in a graphic (quick! what does resilience look like?), not to mention all three.

Not only that, but they’re inward-facing; that is, they have meaning not to the customer but only to the company.

My recommendation: Turn and face the customer. One hundred years in business, all by itself, speaks plenty about values and vision. The company has stood the test of time and all that that implies — and the customer will get it.

I cobbled together a rough and said how about if we picture it this way:

It’s a Model T wheel and a modern car wheel, a compact image that spans a century of automobiles. Use it as a badge and stick it on everything all year — Web site, stationery, print advertising, signs, posters, invoices, all of it, wherever the company name or logo also appears.

It of course needs refinement, and whether they use the image or not remains to be seen, but I pass along the idea because I’m sure there are many old-new topics that can be depicted in a similar way.

Think about yours.

—————

©2010 Before & After | Design Talk. All Rights Reserved.

Do you recognize this typeface?

Catull is a calligraphic-style font created for Berthold in 1982 by type designer Gustav Jaeger. Its faintly curved strokes and flat-nib serifs and terminals are natural characteristics of handwriting and convey a sense of age, warmth and intimacy — the opposite of cool, modern and digital.

Which is something that designer Ruth Kedar had in mind in 1999 when she chose Catull for her famous logo . . .

Said she, “Catull borrows elements from traditional writing instruments such as the quill and chisel, with a modern twist. Search, by nature, is an activity that requires we look into the past. Therefore, Catull’s historical ties seemed appropriate, as did the bridging between the old analog world and the new emerging digital era.

“It must be remembered,” she told Haaretz.com, “that at the time, many people were afraid to use the Internet, and it was important to broadcast something user-friendly both on the home page and in the logo. Something simple, that you didn’t need to be scared of, something catchy and full of life.”

Hmmmm.

I see the reasoning, but . . .

Had you made Google’s connection between new and old? I hadn’t. Not even subliminally. The cues are too subtle. A word that looks like goggle and sounds like oogle and feels like giggle in colors like kindergarten isn’t going to connect historically unless the connection is obvious, more like this . . .

I exaggerate, but only a little.

It’s something to keep in mind. This is a case where the appeal is in the word itself. G-o-o-g-l-e. When you find yourself here, generally speaking you don’t want to add a visual trick. And understatement, as in this case, rarely works either.

I think Google would be better off with a typeface that looks, well, googly.

For more on the development of Google’s logo, check out Wired magazine.

For more on how to design a text-only logotype, check out our article.

.

©2010 Before & After | Design Talk. All Rights Reserved.

©2010 Before & After | Design Talk. All Rights Reserved.

The iPad will cause change. No one knows in what way, though. That’s what makes it fun. It’s an unwritten story, full of possibilities.

What’s this have to do with design? Only everything. But before we go there, let’s talk about vision, and I’ll start by digressing.

One of the thrills of youth is that everything is possible. At 18, you can attend any school, follow any profession, travel anywhere, marry anyone or no one. There are practical restrictions but no conceptual ones. The freedom is exhilarating!

As you make choices, the possibilities diminish. Choose one school and you eliminate a thousand others. Marry one girl, and you forsake all ­others. Travel here, and you can’t afford there. Find a profession, and it becomes what you do. The better you get, the more distant alternative professions become. There is some irony in this. As you build your life, decision by decision, the possibilities of youth go away.

For some, this is a good thing. Possibilities are unsettling. Certainty, predictability, routine create a comfort zone. Life feels secure. These people become product reviewers.

But this is not you.

You have a life.

Interviewing Apple’s Steve Jobs for the April 1 issue of Time magazine, author Stephen Fry writes,

“In five years, Jobs has emerged from two serious health scares. His obituaries had been written, much as Apple’s had been back in 1997. ‘Is this then the curtain dropping on your third act?’ I ask. ‘Will you perhaps leave Apple on this high, a fitting end to your career here?’ ‘I don’t think of my life as a career,’ he says. ‘I do stuff. I respond to stuff. That’s not a career — it’s a life!’ ”

Indeed.

Jobs’ vision is not clair­voyance. It’s belief. Call it your gut, call it the love of the game. You do the work and put it out there, then watch the world respond. The combined response is what makes tomorrow happen. What it will become is too complex and inter­woven for any but the most superficial guesswork. Tomorrow is the story that we — you, me, everyone — write together.

So how do you design for this? Make your work beautiful. Make it simple. Make it clear. Put it out there. Cast off the illusion that you can control the results. People respond by comparing to things they already know, so prepare for criticism. Ignore most of it. Listen to the bits that resonate. Understand that the more original your work is, the less others will be able to help you.

Your design may be an iteration of one that has gone before. This is fine. But when you truly envision something new, when you feel that vibe, don’t back off. That’s the one that may change things.

.

—————

The post above is my back-page publisher’s letter from print issue 49, which is currently in the mail. The publisher’s letter has been a staple of Before & After for 20 years and is one difference between our print and PDF formats.
.
.

©2010 Before & After | Design Talk. All Rights Reserved.

Verizon’s logo is made from familiar and rather ordinary ingredients — masculine black and red colors (think NASCAR), Helvetica Black type (lightly modified), and a red z, which is the visual trick and vaguely resembles an electric spark. It also has a big, red check in a different line weight, with different angles, that looks like the corner of a box.

But why does the check exist? It has no useful association; it establishes no tone or air, and it conveys no information. Worse, it’s not benign — it competes with the z; both are red and both are angled. Basically, you have two focal points.

This becomes evident . . .

. . . when you remove the check . . .

The logo is simpler and stronger. A simpler logo has functional benefits, too. Because it’s triangular and mostly air, the red check occupies, and deadens, a lot of space. Without it, Verizon will fit many formats that are otherwise awkward to design, and it can be bigger. Here it is on a service van . . .

The thing to keep in mind as you design is that every element must contribute to your image, and if it doesn’t, don’t use it. The ideal image is the simple one in which every element — a line, a space, a color, a type choice — has a purpose that you can articulate. When you find that your design isn’t quite “working,” suspect two causes — either the goal hasn’t been clearly articulated, or the graphics contain a rogue element like Verizon’s check.

Can you name other examples?

.

©2010 Before & After | Design Talk. All Rights Reserved.

Reader Skip Savage, commenting on Eight design tips for the Web, makes a beautifully articulated observation regarding site content. He writes . . .

“Great comments here. Such an important topic and whenever it gets discussed you get to see how the various schools of thought are evolving.

“Unfortunately, you always get a few third-hand ideas that have been recycled so often they come across as gospel.

“The one I worry about for designers and clients is the caution on long content.

“ ‘Nobody reads’ is a half-truth, and a whole lie.

“Truth is, if your reader doesn’t care about your topic, no content is short enough. And if they don’t care, you don’t care. Your site is not for them.

“But if they find your topic interesting, then don’t shortchange them with skimpy content. Give them the detail they’re looking for. Be their source.

“For example, this comment is well down a long page of text. You may have skimmed some comments, but here you are.

“So there’s no content that’s too long. There’s only content that’s too boring.”

…

©2010 Before & After | Design Talk. All Rights Reserved.

. . . and none of it below . . .

Except for some novelty typestyles, all type is drawn this way; the round letters are slightly bigger. Here it is in Helvetica Neue Bold . . .

The reason is to overcome an optical illusion. Since round letters touch the line only at one point, if they aligned exactly they would look too small . . .

. . . which may be easier to see if I remove the blue lines . . .

It applies to lowercase letters, too. The round ones extend slightly above the x-height line . . .

. . . which is easier to see up close . . .

Note that the flat parts stay on the lines.

It’s a small detail but universal. Here it is in Century Schoolbook . . .

. . . and Adobe Garamond, which has no straight lines at all. Note that the pointy serifs also extend beyond the lines. Same optical reason . . .

The effect is even clearer in print, with its higher resolution, than it is onscreen.

* * *

While we’re on the subject of type, MyFonts last week released an entertaining variant of Helvetica called Sketchetica, by Ossi Gustafsson of Hiekka Graphics in Finland . . .

.
Sketchetica is basically Helvetica sketched with a pen or sharp pencil. Back in the day, this is how designers would mock up pages for the typesetter and the layout people. It will be useful for any project that needs that rough-stage look without appearing hand-drawn. Ossi’s giving away the light version for free, which has Sketchetica near the top of MyFonts’ popularity list. Check it out.

.whi.

©2010 Before & After | Design Talk. All Rights Reserved.

.

Dear readers: In response to our post Eight design tips for the Web, reader Jay Leek sent the following note, which is worth a post of its own.

—————

Jay writes: This is a great primer on visual literacy for the Web. As you point out, many of these tips should be familiar to print designers, but their disciplined application has never been so critical. Many of the rules of print design were just asking to be broken (always intentionally and beautifully, of course!). The Web, for all of its incredible flexibility, actually demands more discipline from the designer.

So I started musing on this idea and a bunch of thoughts came to mind. This brief note is just to say that the following ideas need a lot of baking, but having written them, why not send them! Pretty much stream of consciousness from here on out . . .

Funny. All through my print career I found restrictions freeing. A set of fonts and a few required images would result in an explosion of inspiration. A blank sheet of paper, on the other hand, well, you know about those! Now we have the Web, the most versatile medium in history (blank sheet of paper cubed?) and we must be more limited than ever in our approach to its use. There must be an inverse equation in that somewhere.

When you can do anything, you must (or will?) do nothing. When you can do nearly everything, you must do very few things. When you can do three things, you must do at least nine things with them (as much with them as you can, anyway). When you can do nothing, is everything possible?

Blank sheet of paper = paralysis = can do nothing = everything remains possible . . . hmmmm . . . .

—————

Readers, what do you think? Do you find unlimited options liberating or paralyzing?

.

©2010 Before & After | Design Talk. All Rights Reserved.

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.

.

©2010 Before & After | Design Talk. All Rights Reserved.

On most designs, there’s something that you don’t know how to do.

Maybe you have a poster to make for the company retreat, and you’re stuck for an idea. Or you don’t know what typeface to use or how it should be illustrated.

Yet you sense that there’s an answer. And this sense pulls you into the work.

You dig for images, set type, try layouts, looking. Are you hoping that something cool just happens? Or is there a vision, unarticulated, that you’re working toward, and you’ll know it when you have it?

What do you know that you don’t know you know, and how do you find it?

.

©2010 Before & After | Design Talk. All Rights Reserved.