I recently created three approaches to the redesign of a major sports site. I was happy with all three but was particularly jazzed about one. There’s a certain look to this category of professional sports sites, and my favorite of the three designs smashed the mold in interesting ways. More than that, it was something that almost never comes out of my shop — a genuine jaw dropper.
Another of the proposed designs took a more traditional approach. Seated well within the established sports site groove, it polished the category’s conventions instead of defying them.
My favorite design did a great job of drilling the team’s brand into your brain, and a pretty good job of highlighting the kind of content the site offers in abundance — content that keeps fans coming back.
The more traditional design, although less brand-centric, did an even better job of highlighting the content. On the more traditional design, you just could not miss what was new and exciting. The traditional design made it likelier that you would drill deeper, read more, and come back tomorrow to see what was new.
Which design did the client buy? The design that reinvented the wheel? Or the design that sold the site’s content?
The client made the right decision. They bought the layout that made a hero of their content. They understood that easy access to good content is what their fans want most from their site.
They admired the fancier layout. It tempted them. But they bought the design that did the best job of advancing the site’s business goals while serving its users’ needs. In short, they bought the best design.
It was the one the sales and marketing team would have picked. But so would any creative director who understood how people use the web and who cared about growing the client’s business. Mainly, I believe it was the layout the fans themselves would have selected if given the choice.
If you’re halfway good at visual design, you get off on it. When it’s going well, it feels like you are creating a world. Often, looking back, you’ll realize that what felt like divine revelation was merely ordinary journeyman’s work. But sometimes, you surpass yourself. Sometimes, stumbling blindly with half a plan, you create Beauty. As the parent of that child, you feel love for what you have made. But that rare exceptionally new and unique design isn’t necessarily the best design for the job.
Design, whether it’s automotive design or web design, is about use. The car that handles the turns and gets the best mileage may be better designed than the chartreuse job with the big fins, even if they are the finest fins ever shaped out of metal.
Lately some of my favorite newish blogs have been discussing techniques for achieving certain stylistic effects, while other equally-loved blogs have begun timidly critiquing third-party site designs. This stuff is great and we could use more of it (with less timidity — anyone who desires has the right to discuss anything that’s out there). But, good as it is, it doesn’t go far enough. There is a next step to analyzing and criticizing other people’s work: namely, analyzing and criticizing it in the use context for which it was created.
Toward the end of the dotcom boom, a certain expensively-produced shopping site, buzzing with bells and whistles, went down in flames, burning the investors’ cash as it plummeted to the hard, cold earth. The anti-design crowd took pleasure in the site’s failure and tried to squeeze moral lessons from it. Specifically, some of them claimed that the site’s failure was proof that design on the web was useless, or at best beside the point. Wrong.
The lesson they should have drawn from the site’s failure was slightly more complex (which is why they didn’t bother to draw it). Namely, design fails when abstracted from use. Shoppers didn’t need talking avatars and whizzing space ships. They needed a clean, intuitive layout that made it easy to learn about and buy products. The failed site was like a glass crib: lovely and delicate, but made of the wrong stuff.
Design and usability are not enemies. They are really two parts of the same art and science. We separate them because we are a specialist culture, and in so doing, we promote limited thinking, deep misunderstandings, and pointless antagonism between people who should be allies. On the web, graphic design, site architecture, and usability should be understood as component parts of a single thing — I call it web design, you may call it user experience or who knows what.
Okay, and to finish, the same thing applies to web standards. I am coming to believe that talking about web standards without considering design, architecture, and usability does little good. Understood properly, I believe that web standards are simply a component of good usability and good architecture. I’ve always thought this; I said it over and over in my book; some people get it (and they didn’t need me to tell them).
Head-of-a-pin arguments about varying semantic approaches to creating a menu or replacing an image are not useless. (Sometimes they are even mildly interesting.) From these dust-ups, common-sense best practices often emerge. These best practices may help a common site element work better for more kinds of users under varying circumstances, and that is a common good. But it is only a start. It is only a fraction of our job. To care about details is important. To care only about details — especially minor details of underlying code structure — derails the larger, more important discussions we owe ourselves, our clients, and the people who spend time on the sites we create.
Like love, Clarendon is all around us. (Good cuttings are available from Adobe and Bitstream.) Designed in 1953 by Hermann Eidenbenz, the quirky slab serif has been quietly undergoing a renaissance similar to that which befell Helvetica in the 1990s.
Suddenly, everything’s coming up Clarendon. It’s on book covers. On Starbucks packaging and in-store signage. In print ads touting the pleasures of Canada. On every tenth apartment building in Manhattan. On every sign in the hospital where our baby will be born.
The perky typeface is so omnipresent, you don’t see it until you see it — and then you see it everywhere. Try it yourself! Play Spot the Clarendon™ as you leaf through magazines or trudge the streets of any large American city.
When I chose Clarendon as the new face of Happy Cog, I thought I was doing something original. So does the salmon swim upstream to mate, convinced that he thought of the idea himself.
Clarendon is not campy or Retro, yet it embodies the mid-20th-Century. And maybe that is the secret of its resurgence. Maybe, like the nostalgic bending of reality that attended the Reagan internment, the sudden reflowering of Clarendon reflects a longing for a simpler time — or at least, for a time we can nostalgically pretend was simpler and less dangerous than these days.
Or maybe it’s just that it looks sweet.
In a triple issue of A List Apart, For People Who Make Websites:
Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow.
Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down.
by Ryan Brill
Two- and three-column, liquid page designs with header and footer are easy to dash off using old-school HTML table layout methods. Designing them in CSS is trickier, and can sometimes even require you to structure your page’s content elements in a specific (and undesirable) order. Negative margins to the rescue! Ryan Brill whips up two quick CSS layouts to demonstrate the power of negative thinking.
Note for compulsive calendar watchers: A List Apart has always published on Fridays, but we now publish on Tuesdays instead. Discuss amongst yourselves.
Of late, for pleasure, I often find myself turning to Cameron Moll’s Authentic Boredom. On the strength of its useful how-to articles alone, Moll’s blog is worth any web or graphic designer’s time. The author knows his subject, approaches it in fresh ways, and writes in an engagingly natural voice. The site would repay your time even if it were lacking in visual distinction.
But I keep returning to it mainly because I just like looking at it.
The layout is simple and uncluttered yet it is also ornate, filled with small touches that create a strong sense of “place” and visual brand identity. Call it Minimal/Gothic.
It looks like other blogs, yet it looks only like itself. It subtly echoes elements of other designers’ work (for instance, its design alludes to Todd Dominey’s What Do I Know and Shaun Inman’s personal site) yet it achieves its own visual “voice.”
Which is no easy thing to do when creating a site whose structure necessarily resembles the structure of thousands of others. All blogs present the latest content and a means of viewing older content; most use two columns because a two-column format just works; most have simple navigational menus at the top or side, again because such formatting simply works. To achieve originality under such circumstances is no mean feat.
The site’s monochromatic color scheme makes article-specific visual elements pop in a way that is cunning, helpful, and pleasurable: cunning because it teases you into reading instead of scanning; helpful because the small visual elements guide you through the reading experience; pleasurable if you have a working pair of eyes.
The little inset demo graphics not only guide you by demonstrating what is being discussed, they also reward you for having read thus far — like little bon bons or puppy treats.
Experiencing good design is a lot more fun than reading about it, so do yourself a favor.
My wife is six months pregnant, yet I am the one who seems hormonally strung-out and mentally challenged. I can’t remember names, dates, or what we were just talking about. Small frustrations feel like insurmountable obstacles; the most calculated or hackneyed story lines provoke a deep emotional response. I can sit through Notting Hill and not mind it. In the baby store, a tiny bottle of baby shampoo imprinted with a tiny teddy bear logo makes me burst into happy idiot tears.
Every day some baby-related task presents itself. Many are medical. I’m getting check-ups for things I never checked before. Today The Wife and I went for skin cancer screenings (we’re fine). I’m sitting there in my little paper gown, answering the doctor’s questions about moles and blotches and blackheads, and I quote the opinion of my OB/GYN.
I mean my chiropractor but it comes out “my OB/GYN.”
About sums it up.
In response to reader requests, I’ve adjusted this site as follows: the default setting is now higher in contrast; an optional “darker” setting provides even more contrast; and an optional “lighter” setting reproduces the low-contrast former default setting. All three settings are available on the updated contrast-o-meter page. Most browsers will show the changed styles immediately, but a few require you to manually load and refresh the style sheets.
There are 16 years of my life that I can barely remember. On this date eleven years ago, propelled by a power greater than myself, I began crawling up out of the abyss.