Category Archive: Information Design

Art Direction in the CSS Zen Garden

May 6th, 2007

css_zen_gardens.jpg

I was browsing through the CSS Zen Garden recently, and I was struck again at just how great it is. [If you’re not familiar with the CSS Zen Garden, go there and you’ll figure it out]

I don’t mean to say that I think the designs are all excellent (more than a few of them are a little cheesy). But I deeply appreciate that all of the examples are art directed, in the traditional sense of the word, to a degree that I rarely see on commercial web sites these days — even on sites for very stylish products and magazines.

Compare this to offline (i.e. print) editions where bold and dynamic art direction changes, often radically, from article to article or issue to issue. Flip through any issue of Wired, The New York Times Magazine, or almost any fashion or lifestyle magazine, and you’ll see new and different design approaches — different art direction — for nearly every feature article. Khoi wrote a very thoughtful peice about this over a year ago, lamenting that web design is more about safe, functional systems than about creatively ambitious art direction, but since then this unfortunate state of affairs has still not changed.

Most contemporary web sites strive to be effective content platforms, with a unified but flexible style in which the actual content — the words, pictures, and media — can shine. My own site is certainly of this sort. Very few of the biggest and highest-budget content web sites, in fact, have any strong sense of style or art direction outside of the limited set of page templates (often less than ten) used to deliver the aforementioned content, templates that differ so little from one another that they are essentially variations of the same page.

So if content is king, then design is at best the royal tailor. This is because, for most sites, the design of the site is not considered content at all.

But this is not how many of the best art-directed print magazines work. They’re more like the CSS Zen Garden, customizing the design as needed to not just work with the content but also to be a kind of content in itself.

Why can’t online magazines (especially online-only magazines) do exactly what the CSS Zen Garden does?

  • Keep the site’s content normalized, semantically consistent, as it resides in the content management system — but apply a different, customized style sheet to many, or even all, of the articles posted in the site.
  • Treat the site’s various cascading style sheets as another kind of content, integral to the article and to the site’s overall content strategy. Hire art directors and graphic designers proficient at CSS to build new style sheets for every new article and issue just as their print counterparts have been doing for decades.

In this model, when the user browses from an article about fashion to an article about science, the page template can change dramatically. The “cascading” part of this scheme will ensure that some underlying design essentials are kept consistent — for example maybe the body copy fonts and the core page grid — even as the page’s layout, illustration, colors, headlines, and other design elements change dramatically.

It’s a shame that for many of the talented designers at CSS Zen Garden, this free work may be some of the best work they’ll ever do, since so much of the real web design world is still unfortunately focused on eliminating idiosyncratic style wherever it crops up — instead of using it to make sites and user experiences better.

In Defense of PowerPointism

April 29th, 2007

willwright_slide_320.jpg

Will Wright’s cryptic, clip-art crazy PowerPoint slides make sense when he’s right there talking about them.

Microsoft’s PowerPoint is frequently blamed for the poor quality of many presentations and for a supposedly- disastrous state of communication in both the private and the public spheres. Public speakers are lambasted for their wooden stage presence, crippled by their over-reliance on projected slide shows and meaningless bullet-points. The slides themselves, too, are often rife with design crimes ranging from clip-art diarrhea to impenetrable verbosity.

And because of the ubiquity of the tool and the technique, because public speakers from Al Gore to members of Australia’s Parliament use slideshows to support their speeches, the software itself has become the de facto target of criticism. I don’t think this is quite fair.

[For the purpose of this argument, Keynote on the Mac is basically the same animal as PowerPoint, so with apologies to both Microsoft and Apple I’ll just use the term “PowerPoint” to mean any slideshow method or tool.] MORE…

A Peek into the Sausage Factory (IA Summit Presentation Post-Mortem)

April 2nd, 2007

My IA Summit presentation was an experiment in what is a new presentation style for me. I have long admired the rapid-fire presentation style of Lawrence Lessig (aka the “Lessig method“) and in particular the example of Dick Hardt’s keynote at Identity 2.0. Also, I’ve always wanted to achieve the same aesthetic and pedagogical dazzle that my freshman art history teacher managed to lay down every Friday morning at 9:30 to a room full of overworked and/or hung-over art students.

I knew from the start that I would have a lot of slides – that was part of my basic concept, to show style in action across a broad variety of professional disciplines, as a quick barrage of images to drive home the point. In most of my day-to-day business or academic presentations, “1-minute-per-slide” is a pretty good rule of thumb, but for this presentation I ended up with 239 slides to show in 40 minutes. That’s one slide every ten seconds!

I was shocked that it actually worked – quite frankly I was bracing myself for a train wreck. The biggest reason for my surprise is that although I worked extraordinarily hard on the talk, I didn’t manage to get even one chance to rehearse it to see if it even came remotely close to fitting in at under 40 minutes. But in the end, thanks only I suppose to my intuition about my speaking skills, I managed to get to the final slide with five minutes to spare and without losing too much momentum along the way, even as I had to disappointingly breeze through a couple of segments.

About the Topic

After doing all the research and all the thinking, after diving so deeply into the subject of style, I still feel there’s a LOT to say about it. In fact, I feel like my 239 slides barely scratched the surface. Due to time constraints, I glossed over my discussion of three fascinating topics:

Functionalist Modernism

The first was a more in-depth discussion – a refutation, in fact – of what I call “functionalist modernism”. I touched on it briefly with one example, showing that Charles and Ray Eames were not at all the form-follows-function minimalists contemporary design catalogues would have us believe, but that, rather, they loved ornament, kitsch, bric-a-brac, patterns, and all of the decorative crimes that the true modernist eschews. In other words, they were immersed in an ocean of style.

But my primary target was Le Corbusier, an icon of functionalist modernism whose posture as a scientifically-based designer was, in fact, a self-deceptive sham – in much the same way that I think that much of today’s “lab coat” information architecture (and indeed a certain subset of the broader design world) is, sadly, a self-deceptive sham in which style exists but is deliberately obscured.

I also wanted to heap more praise on Alain de Botton’s The Architecture of Happiness, a book that I think not only puts the lie to so-called functionalist modernism, but exposes the deeply poetic and humane nature of good architecture – a way of thinking about architecture that, I think, has yet to be explored adequately in the world of information architecture (a connection that, I think, Donald Norman attempted to make in his under-appreciated Emotional Design).

Abductive Reasoning

The second topic I had to skip over was my discussion of “adbductive reasononing”, a type of semi-logical thinking that envisions not what is (as with inductive and deductive reasoning) but what might be or what could be, a type of thinking more common among artists and designers. I wanted to connect this with the concept of “design thinking”, a methodology that is the inverse of the business-based risk-averse process of building products to precisely fill carefully-measured needs… but after reading Dan Saffer’s lament on the topic, I’m reluctant to use that term any more (a post on this is to come) so in a way I’m glad I didn’t go into it too much.

Christopher Alexander’s Design Patterns

Finally, I sadly had to skip over my take on Christopher Alexander’s concept of design patterns. Alexander’s name is dropped frequently these days, especially in the interaction design field, but I see his work very differently than I think most people are currently interpreting it. I consider Alexander’s design patterns to be highly idiosyncratric, deeply creative, overtly political, a wee bit spiritual, and ultimately poetic in nature – which is to say that they are not at all the scientifically-based proven best practices they are too-often presented as. I would even say that Alexander was advocating a certain style of architectural theory.

For Future Development

After all the research and writing, my appetite for this topic is only just beginning. I’m not even entirely sure if the concept of “style” covers the full breadth of what I am seeing here – perhaps it’s more about aesthetics or the re-emergence of the formal and decorative, even the idiosyncratic and poetic, as key drivers of good design.

I have uncovered surprising connections between truly fascinating subjects. I’ve found remarkable authors and designers whose work I was previously unfamiliar with (who on earth is Mr. Keedy and how did he get to be so clever?). It’s clear to me that there is an incredible amount of additional material here, and a lot more for me to think about and say. I would love a chance to continue developing this topic, whether as a longer presentation, more formal articles, or even, heavens, a book.

In the Sausage Factory

If you can stomach it, I wanted to share a little insight into the development of my presentation (or, if you will, the magnitude of my procrastination).

I was working on the speech and the slideshow all night right up to my Friday morning flight, on the plane, off and on throughout the conference, and all night long leading right into my Monday morning session. While in Vegas, however, I did manage to squeeze in a stunning dinner at Bouchon, a drive-in showing of 300 with a few six packs and some excellent soul food, and, on the final night before speaking, a rapid-series of thematic drinks at Quark’s Bar at the Star Trek Experience (including a massive “Warp Core Breach”).

Yes, that’s right, I had too many drinks and absolutely no sleep in the 24 hours before speaking. While the drinking didn’t help any, I do kind of thrive in no-sleep circumstances, actually, as long as a quart of coffee is consumed immediately prior to the moment when top-performance is required (this does not, however, apply to athletic performance, however).

Lou Dorfsman, the great advertising and design luminary, once told my partner Jeff Piazza that his secret to giving a great presentation was to gulp down a shot of Scotch immediately before speaking. I have immense respect for that, I really do, but I guess I’m just made of somewhat different stuff than Mr. Dorfsman.

My work process can be divided into five very distinct phases:

  1. Topic Generation (two weeks of occasional work): The topic and the presentation format came to me in the most clichéd of contexts – in the shower. I was a last-minute addition to the Summit schedule after another speaker had to withdraw, so I was already a month or two behind when I was asked to participate (and the fact that I was permitted to skip the judging process only put more pressure on me to do a kick-ass presentation). It took about two weeks from having the initial ten-word concept before I got to the point where I could write a coherent three paragraphs about the topic, and by that point it was too late to get my description into any of the printed materials for the conference.
  2. Idea Collection/Research (four weeks of occasional work): Idly and intermittently thumbing through my bookshelf, browsing the web, bookmarking links, jotting down random thoughts in my sketchbook, and writing jumbled blog drafts. At no point in this timeframe did I have an overall outline of the final presentation – I was letting the research and my own unpredictable inspirations shape my thinking.
  3. Formal Preparation (five semi-intense evenings): This is where I picked up a few new books and consumed them rapidly, and where I formed the bulk of the overarching concept. During this time I mostly focused on switching back and forth between gathering raw materials (copying or transcribing text snippets into my outline, structuring the outline, and collecting/scanning/photographing images for use in the PowerPoint show) and actually writing my original commentary. I had the final outline 50% done in this timeframe, and had probably written down about 30% of the actual words I wanted to say, but only about 10 slides were actually in the PowerPoint deck at this point. It’s three days before showtime.
  4. Frenzy! (four intense days and nights): This was the most schizophrenic part. I was quite literally doing a little of everything during the final four days. I would spend an hour fine-tuning individual slides, aligning images and normalizing fonts, only to spend the next hour completely re-ordering the thematic flow of the whole presentation and writing the final script. Intense and completely random alternation between micro and macro.
  5. Purge! (2-3 hours): Only in the final hours before showtime did I actually throw in the towel on some sections of the presentation that I knew I would not be able to discuss adequately. I deleted about 10 pages of what would ultimately be a 33-page script, and maybe 50 slides to bring the total PowerPoint page count to 239. I’ve saved all the deleted material, so they’ll probably come up again in a longer-format version of this topic.

I’m very happy to note that my process was entirely consistent with the basic premise of my talk: I had my final delivery style decided very early on, my fundamental outline was never really final until nearly the last minute, and in any event it didn’t completely dictate the content anyway but rather the concept was as much influenced by the content itself – in the same way, I think, that a product’s style shapes that product’s basic premise as much as the premise sets the framework for the product’s ultimate style.

Interaction Design Style (My IA Summit 2007 Presentation)

April 1st, 2007

ia_style_titleslide.jpg

It’s been a little less than a week since my IA Summit presentation. To my great surprise, it went really well. I mean really well. In the next day or so I will be posting a summary of my experiences preparing and discussing my topic, which was, in a word, style.

Many people came to me after my presentation asking me not only to post the slides themselves, but also to post the reading list since I did discuss a lot of books and sites that deeply influenced my thinking. So here’s all the stuff:

Slideshow

Reading List

These readings are in roughly the same pedagogical sequence that the concepts appeared in my presentation. Note that not all of these were actually cited in the talk, but I did have all of them either at hand or in mind as I wrote.

MORE…

Are Some People Just Visually Dull?

March 19th, 2007

stretched_screen2_660.jpg

Everywhere you go, you see 16:9 widescreen television screens playing regular 4:3 video programs stretched out to fit across the whole screen. You see these in airports, banks, bars, and offices. Maybe you even see this in your own home.

Presumably, the owners of these TV screens can’t bear to see all those extra black pixels on the left and right sides going to waste. The thought of not using those pixels — pixels that cost hundreds of dollars! — is so unbearable that the owner is willing to tolerate the fact that everyone and everything they see on the screen is literally 50% wider/fatter than they are supposed to be.

To me, the sight of such a stretched-out, distorted screen is utterly unbearable. Totally unwatchable. It might as well be upside down to me, the people look so wrong. And yet to millions of people, this is normal and acceptable. Can they not see that it looks completely wrong? I mean, honestly: Can they not tell the difference? MORE…

Stop Putting Dates in File Names!

March 6th, 2007

date_bad.gif

You know who you are. You are my friends, colleagues, and clients. You’re really smart about how to use computers and stuff. You’re great people.

But I just can’t stand it when you put dates in your file names. Whether you put dashes between the numbers, use two- or four-digit years, I still can’t stand it.

There are sooo many problems with this technique. Let me count the ways: MORE…

More World Maps

March 6th, 2007

Just thought I’d post a couple world maps to compare with my own drawing.

First, let’s see what the big shots say over at Rand McNally:

worldmap_randmcnally.jpg

Not bad. Almost as accurate as mine.

Let’s see how I compare to the 17th century cartographer Nicolas Visscher:

worldmap_visscher.jpg

I think I kicked his ass.

My Map from Memory

March 1st, 2007

memory_map.jpg

I’m getting some traffic today from kottke, so I figured I’d actually show y’all what the heck it is he’s talking about when he wrote:

The first time I saw a world map drawn from memory was at Christopher Fahey’s apartment. I forget how long it took him to draw, but it was remarkably accurate and fairly large (a few feet across).

So there it is. This is a photo I took just tonight of the map, hanging on the wall of the aforementioned apartment. It’s about four by six feet, entirely in pencil, and I made it over the course of about two weeks in 1993 during my senior year at Cooper Union. During those two weeks, I studiously avoided looking at maps on posters or in newspapers, to ensure that each time I resumed working on the map I would not have artificially pumped myself full of fresh map knowledge. The result is a map not just using my memory, but also using the added elements of (a) time and (b) the basic techniques of drawing.

UPDATE: Some answers to questions, and some added insights: MORE…

Performative Diagramming

February 12th, 2007

designing_interactions_cover.jpg

The cover of Bill Moggridge’s excellent Designing Interactions features a sketch/diagram that looks intriguing at first glance. But then when you actually try to figure out what it means, you’re stumped. I tried, but I couldn’t even scratch the surface.

Inside the book itself, we learn that the diagram is based on sketches that Bill Verplank drew while simultaneously discussing some of his thoughts about interaction design — it is what I call a “performative diagram”, a diagram that is created as an integral part of a real-time performance or presentation. After reading the chapter, we learn that the inner circle’s three icons represent three different basic ideas about what a computer is (an intelligent person, a useful tool, a expressive medium) while the other icons (life, vehicle, fashion) are metaphors or examples for how each notion manifests itself in an interaction design.

These are interesting concepts, to be sure. But that diagram really doesn’t “say” what the words say at all, especially when viewed all by itself and out of the context of Verplank’s voice, his gestures, and his actual words.

Diagrams are usually intended to take difficult concepts and make them easier to understand, but this diagram doesn’t exactly do that. Instead, it is an artifact of an explanatory process, the fossilized remains of a performative pedagogical technique combining spoken words and real-time performative gesturing and drawing. MORE…