.

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.

I should start by saying that I love you readers! Bright, perceptive, articulate — you just rock! What a pleasure to have an audience of colleagues!

Earlier this month, the day the 2014 Sochi Olympics logo was unveiled, a friend e-mailed me the Transformer Studio Olympic logo, saying that he liked the image and its symbolism, to which I couldn’t help but agree. It’s pretty, full of motion and dance and fire. It works in full color and one color, at all scales and in all media. It satisfies Transformer’s creative brief beautifully. I liked it, too.

At least, I liked it as a classroom assignment, where I’d give it an easy A. But the longer I looked, the less I liked. Out in the real world, to represent the real Russia in the real Olympics, the circle seemed vaguely . . . empty.

That sent me exploring, where I discovered that this was not the logo of the 2014 Sochi games at all, but merely a runner-up. The official logo is this one, from Interbrand . . .

. . . which consists of the logotype and the ice crystals, too.

Both entries were designed in Moscow.

Having seen the firebird first (and perhaps because I’d seen it first), my response to the official logo was like some of yours — meh. But that lasted about 10 seconds, and then I started to like it. A lot. And the more I looked, the more I liked. Main reasons? There are three: It’s unmistakably Russia, it’s unmistakably winter, and it’s unmistakably today. In 40 years it will look old, as it should, because in 40 years it will live only in record and memory — “Hey, remember back . . . ?”

The firebird — let’s call it that — doesn’t do that. It feels generic, which means, literally, “stock.” It’s a logo with no name. Cover up Sochi, and you’re left without a single clue where these Olympics will be played. Cleveland? Rangoon? Winter? Summer? It’s clip art.

Beautiful, yes, and to be fair, it is not the first host-nation logo to look generic. The problem, however, is that, without a sense of place, the symbolism of its imagery — which is what makes the firebird work — doesn’t work. The feathers and circle dance have no meaning, if they’re perceived at all. As Orlando Angel commented, “It could be a logo from any year, any place. It seems anonymous . . . lacking a relationship to something outside of itself.”

That’s bad news for any logo, but we’re branding Russia, comrades, not Charmin. The Empire. And it’s not, as Erin put it, the “fairy-tale, fantasy Russia,” for which the firebird may have worked. It’s Mother Russia. Peter the Great, Tolstoy, Nicholas and Alexandra, Red Square, Tchaikovsky, Solzhenitsyn. The Bear may be a menacing countenance to those who came of age in the 20th century, but you can’t design him away.

And you shouldn’t, because this is how Russia looks. Said Daria, “I am a designer from Russia, and I can say that it’s quite in our tradition to use heavy brick, cut-out forms (remember Russian avant-garde of the 20th century beginning, our famous posters of the World War time, and socialist realism as the leading trend of design and art).”

Added Paulie, “The [logo] for me says ‘Russia’ — in re-emergence. A nation that respects strength above all. Churchill presented a ceremonial sword to Stalin to honor the ’steel-hearted citizens of Stalingrad.’ To me, the logo evokes that spirit. The typeface is reminiscent of the Russian revolutionary and wartime posters — a simple, strong, bold appeal to the Russian heart.”

As for the visual details, which to some readers made the logotype “unreadable” and “confusing,” what we have is an English-language logo that hints of Cyrillic lettering (not easy to do), which, to Western eyes, is unreadable. To my eye, the juxtaposition works as both complex and interesting. The “y” in 2014, as Erin pointed out, “looks like the letter for the ‘ch’ sound in Russian, which reflects the ‘ch’ sound in Sochi.” No one gets it at a glance, though. You have to look twice.

You can also see the hint of mountain-sea reflection that represents Sochi, which, the world will learn, is a sub-tropical resort town along the thin strip between the Caucasus mountains and the Black Sea.

The Olympic Games are an ancient event that every two years bring the world’s nations together in a place, in a time. They have a fine and enduring logo. The Sochi 2014 image does what a host-nation logo should do; it puts its stamp on the place and time. These are not the Winter Games of Lake Placid or Lillehammer or Nagano, these are the games of Sochi, and you won’t forget that. In a month, Vancouver will get its turn. Then London. After Sochi, Rio. And so on.

Keep in mind, too, that the block lettering will rarely be seen in isolation; don’t forget those ice crystals — “fresh and tangy,” said Brett — which will be splashed, sprayed, scattered everywhere on venues big and small. You can already download some for yourself.

In the end, the Olympic Games are about the athletes, the competition, the pageantry, the tradition, and never about the logotype. And while, as some of you said, politics and money may have had a hand in making this selection, there is, for me at least, no doubt that they chose the better image.

_______________

For more:
39 Olympic logos from 1924 to 2012. webdesignerdepot.com
Complete, immersive history of the modern Olympics. olympic.org

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

We’ll look at it in a few moments, but first I want to look at something else — a competing entry from the Moscow design firm Transformer Studio that blends five visual concepts in a graceful image that works at every scale.

Transformer’s creative brief was brief . . .

“The goal was to scatter the myth about the image of Russia as a cold and unfriendly country. The symbolics should represent Russia and its genuine friendly spirit and hospitality.”

. . . and partly pictorial . . .

Said Transformer of the images above  . . .

“People are dancing in a cheerful circle dance, holding hands, laughing and singing. Khorovod* is a symbol of unity. The logotype consists of palekh*-stylized firebirds’ feathers in a round dance.

“Firebird is a Slavic fairytale character, symbol of fire, light and sun. Young men had to find firebirds’ feathers in order to complete the challenge.

“Since the beginning of the Olympics, champions have been given the highest honor to be awarded by a wreath. Five feathers form the laureate wreath, which symbolizes five continents as in the Olympic sign.”

*Khorovod: traditional Russian circle dance
*Palekh: Russian national folk art

From these ideas and images, they designed the entry below . . .

Typeface: Co Headline OT

. . . which clearly integrates all five elements: the circle dance, the flame, the feathers, the laurel wreath and the idea of unity, all colored to correspond to the Olympic rings.

It’s very functional. It works in one color (and in negative) . . .

It works small . . .

. . . and it works big . . .

Note on the balloon the relationships of scale. The logo appears twice; the first is small and complete, and the second is so big that there’s room for only part of it. The contrast is fantastic — it’s a bold, arresting, almost overwhelming presentation that will connect worldwide even on small screens.

———-

So now back to Tuesday’s unveiling.

The logo chosen for these games is not that one but this one:

There are several visual ideas embodied in this design, plus a functional one — it’s a Web address, which is a first.

The Sochi2014.ru site describes the logo as “a 21st-century brand for a digital generation,” designed to “actively encourage dialog between Russians, nations and winter sports fans, particularly youth.” Its (semi-)mirrored typography is intended to represent Sochi’s location on the Black Sea, “at the meeting point of the sea and the mountains.”

The second part of the brand is a blue and white snow crystal pattern . . .

This logo, too, is very functional. It works in any color and in negative . . .

It works small . . .

. . . it works big . . .

. . . and of course it works in all media . . .

So the question is, what do you think of these designs? I have a favorite and an analysis, but before I tell you mine, I want to hear from you.

Before you write, mull awhile. Don’t make a knee-jerk reaction.

What does each logo say to you?

What visual characteristics are “doing the talking”? Which do you like? Which do you not like? Can you say why?

Deconstruct. As designers, it’s our job to make this stuff, and we need to understand what we’re doing.

Keep in mind that a host-city logo represents a transitory event and, unlike the Olympic rings, does not need to endure.

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

What we especially like is that Aeronaut comes in two parts — the letters are one part and the squiggles are the other — which means that it can be set (easily) in two colors:

It works like this. Standard Aeronaut has its adornments built in:

So what you do is first set your type in unadorned Aeronaut Base:

Color it, then Copy and Paste the copy directly atop your original:

While it’s in position, select and change its style to Aeronaut Parachute, which is one of its two squiggle fonts, the other being Aeronaut Balloon. I’ve left a ghost of the letters so you can see what’s going on.

What’s interesting is that the squiggles correspond letter for letter to the typeface, so everything shows up in position. If you kern Aeronaut Base for better letterfit, you’ll need to kern Aeronaut Parachute by the same amounts.

To finish, simply color Aeronaut Parachute a deep, Christmas green . . .

. . . and it’s ready for duty at the North Pole. Green and red, of course, are not your only options. Below is a monochromatic rendition; note that its adornments, which look appropriately like twinkling stars, are lighter than the letters:

And once Christmas is over, you have a great, period typeface that’s fun to work with all year:

——————–

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

So we bought both polishes, and I changed the name on the metallic box to Wright’s Silver Cream . . .

. . . which made it clear that the difference is not in the name but in the design. Gaye still preferred the tub, and, I must say, so do I.

What’s going on? The tub breaks a lot of rules. Garish yellow border (which has what to do with silverware?), felt-pen logo, cheesy typography and silver utensils worthy of the White House, all crashing at once. The Maas box is simpler, with fewer lines and shapes, a single typeface, a centered layout — more disciplined, purer.

So why does the tub work? Because, in this case, it appeals to Gaye’s needs. It’s round, organic, human. It fits your hand. It has a big mouth, easy to dip a rag, expansive, generous. And the label looks rather homemade, which is where the polish will be used, in the home, on nice stuff. Familiar. Non-threatening.

In contrast, the straight lines, hard edges and spare typeface of the metallic box appear hard, industrial, unyielding. Inside the box is a silver tube that requires squeezing, like toothpaste. Its narrow neck conveys constraint, resistance. The visual effect is cooler, less personal, more appropriate for car or power tools, work you’d do in the garage.

So in this case the tub wins. That said, the tub, like many successful products, is not beautiful. It succeeds because of its humbler, less-noticed assets, mainly its physical package.

Don’t overlook this. The size and folds of your page, the format of your screen, the shape of your product — these are real influencers that beautiful graphics can modify but not overcome entirely.

1. Have you seen similar examples?

2. How much better might the tub do if its color/surface/label were beautiful?

3. Could beautiful (warm, organic, non-threatening) graphics make the box more appealing than the tub?

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

Our new book is nearly complete, and we’re liking it. Cathy Lane, editor of LogoLounge, is editing, and Kim Scott of Bumpy Design is assembling it for Peachpit Press. These two did our first two books, so you’ll see a family resemblance. For those who’ve asked whether it’s new material or old, it’s old (published is a better word). Our books are articles from the magazine, collected by topic and reformatted. Subscribers will recognize the material, but the new format and sequence change the perception noticeably.

Thank you very much for your help with the cover. You may remember that we had no time for big revisions, so we incorporated the half-dozen suggestions we heard the most (but which would leave the format intact), and ended up with a stronger design.

Here’s the “before”:

Your analysis:

1) The bold version is better than the light version.

2) You could pilot a steamship down that river of white! The images are too small, too detached, and there are too many of them.

3) Make the logo bigger.

4) Lose the colored fills in the letters.

5) Lose the exclamation point.

6) Write shorter copy.

Here’s the “after,” which we sent to Amazon:

Every change improved it.

Still, it’s not final. The cover was designed before the contents were chosen, so some of these images will be replaced.

Won’t it then be different? No. Despite their differences, the “after” above isn’t a true variation of the “before”— the covers are, practically speaking, one design, tweaked. How to tell? Use the two-second-glance rule: Glance for two seconds (only two, which is really brief), look away, then ask, “same or different?” Our design guru Gwen Amos says that she’ll assign students to design “three variations,” and, often as not, they’ll turn in one design plus tweaks.

This is a variation . . .

Even here, although it’s different, it’s conceptually similar—tall, uppercase type (Franklin Gothic Condensed) that serves as a focal point (reversed, in this case) and plenty of colorful graphics from the magazine. The Peachpit decision-makers gave this version a quick thumbs-down, not because it’s a poor design but because they loved the other one!

If a client asks you not for variations but for different concepts, then you need to give him something like this . . .

. . . which makes an entirely different impression.

Tweaks. Variations. Concepts.

When your project is in the “how-do-we-present-this?” phase, concepts are better than variations, and variations are better than tweaks.

Remember the differences.

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

This June 15. 

That’s Monday, people. 

So as I write, and in a sea of other projects, we’re running the how-fast-can-you-design-a-cover? drill for a book whose contents aren’t even finalized. No time to explore concepts; just get it on the page and see what happens.

So we could really use your eyes.

The cover is 7″ x 9″, same as our others. What I’d like is a reaction — a Yes, I like it, or, I’d pick that up, or, No, I don’t like it. Keep in mind that a book is viewed in two places — in the bookstore at close distance, where you can hold it and explore its contents easily, and online in low res at small sizes where its contents are more difficult to explore.

The job of the cover is to set the tone and pull you in.

Once you’ve let yourself react to it, feel free to say what you like or not about it.

(Click image for a full-size view)

Same thing but bold . . .

At Amazon size . . .

And how books actually look on Amazon . . .

We love reading your stuff! In this case, please keep your comments brief because, well . . . Monday.

—————

June 12, 5 p.m. Pacific Time. Comments closed.

A reader once wrote to me simply to say, “You’re a rich man, John McWade.” By which he was referring to the trust that so many of you have placed in me, and the fact that I can ask a simple question about my own work and so many are willing to help. Thank you ALL for taking the time to comment; your insights have enlightened me in several important ways. And stay tuned for a followup. With all the cross-currents in these waters, there will be a lot to discuss.

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

How did you get where you are today, professionally? What paths did you take? What choices did you make? How did you make them?

I ask this regardless of when you began — whether you’re brand new or you’ve been designing for half a century.

Every life, as we all know, has decision points — do I go this way or that? — that affect the content and quality of everything that follows. Some are obvious. Others pass nearly unnoticed.

Some things we plan. But life has surprises. Fifteen years into my career as a magazine art director, the design world changed when it made the transition from drawing board to computer. It changed again with the rise of the Internet. Such changes impose demands. New skills to learn. New jobs to fill — or create! And they’re marked by loss and the grief that comes with it. Skills now useless. Income undependable. Certainties uncertain. Small things pervade. When design moved to the cold realm of digits and pixels, we all lost the warm touch of physically handling our art materials. This loss is still felt.

A few days ago, reader Christine Sawyer wrote to me with a frustration, a desire, and a decision to make — what to do with the rest of her career. It’s not a question that I can answer for her, as in, “do this” or “do that,” but her issues come so close to home that I think we might all benefit from hearing one another’s experience and the collective wisdom of the group.

Christine had this to say:

“I am reaching out to you for an opinion today. I really have an identity crisis as a ‘designer.’

“Let me explain:

“My academic background is business. I have an MBA.

“I really like design, though. I have tried several art forms along the years with no success. As a marketing person, I loved to work with my ad agency, and when I started my own business I quickly wanted to do things myself rather than give them to a designer. I found graphic design to be a better art form for me.

“I took continuing education courses in Photoshop, Illustrator, InDesign and Dreamweaver, and other trainings (CDs and books).

“I subscribed to Before & After magazine, of course.

“I tried to get into the Bachelor program of a great design school in Montréal but was refused. I even took some of their classes just as an audit student (if that’s the English word for that). I found I was too ‘cerebral,’ not creative enough, not outside the box enough; I think I will always regret not to be able to take two years off my life to do the whole program, but I am 50 and don’t even live full time in Montréal.

“I find I very often get my inspiration from the work of others. I read creativity books, like the ones from Julia Cameron, to try to help my creativity. I still don’t find that I am very creative.

“So, in conclusion, I find myself being ‘not good enough’ as a designer. For instance, I belong to a free-lance Web site, and I present myself as a Web designer, but I never quite have all the qualifications required for the jobs offered. On the other hand, at times I am pretty happy with myself; for instance, when I did a WordPress Web site, montréalbydesign.com.

“I find that I am just a ‘me, too’ when it comes to design, and even though I am a strong marketing person and strategist, people in small-business Vermont don’t seem to want to pay for these expertises or don’t believe they can have a designer-marketer in one person. (They like the whole package when they start working with me, though, but they don’t always pay more for that extra expertise.)

“I have a great résumé as a business person. I even worked as an account director at the Ogilvy ad agency in Montréal. My Web site, Birchwood Ridge Group, shows my work.

“I am planning to take a photo class with The Photography Institute starting next week.

“Help me out, pleeeaaaaase. I really need help: How should I approach the rest of my business and professional life? Classes? Mentor? Other ideas?”

*  *  *

Dear readers, before you dive in with advice, please recognize that, by writing, Christine has entrusted me and now you with a precious and private thing — her life — and that in doing so, she has made herself extremely vulnerable to you. Respect that. Contemplate deeply. Take your time. Be sensitive. The issues that she faces are the issues that you and I face, packaged differently but only a little. Please don’t expect to have her answer — you don’t even know her, after all — but you may have some insight or life experience that can help Christine and perhaps others, too.

Your turn.

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