The Los Angeles of tomorrow in Blade Runner.

Creating Hades

Blade Runner inspired a generation of filmmakers and other visual artists to think differently about what the future might look like. In this short video, Douglas Trumbull, who led the visual effects team on the film, describes the inspiration for, and the making of, the Hades (opening) sequence.

From Inspiration to “Reality”

The inspiration: industrial plants in San Pedro, CA

A forced perspective comprised of tiny, acid-washed brass structures.

Adding details, including thousands of tiny fiber optic city lights.

On the set.

The final result: more Gotham than Gotham.

It is striking to realize that none of this would be possible with today’s CG effects. These were not technicians; these were artists.

Again, here is the interview.

mindmap.png

Goodbye Site Map, Hello Mind Map

There are a few reasons I’ve almost entirely ditched site maps in favor of mind maps. (Mind maps are traditionally considered tools for concept mapping or diagramming complex ideas, not websites.)

First, site maps tend to be better for page-based site diagramming, but as we move toward states and modes, user decisions and flows become more relevant than pages. I find mind maps do a much better job showing routes and decisions that don’t necessarily correlate to a page change.

Second, I find the better mind mapping software to be more intuitive and fast-paced than most site mapping software.

mindnode.jpg

The MindNode UI.

For example, MindNode, an excellent Mac-based mind mapping application, lets you start designing web experiences in seconds. The interface is extremely minimal, and while you can’t customize the look and feel of your work much, the default output is quite elegant and clean. The experience is so easy and fast you actually feel creative again. (MindNode also comes in a touch version for iPhone / iPod / iPad, and it works really well, even on a small screen.)

mindmapper.jpg

MindMapper...how very Office-y of you.

But beware. Some mind mapping software leaves a little bit to be desired. For example, MindMapper is feature rich, but I find the interface cluttered and overwhelming. When I want to sketch, I want the UI to disappear. In other words, using software should be as fast if not faster than simply sketching on paper.

Finally, it’s become clear to me after years of experience that most clients just don’t get site maps. They stare blankly, and have little if any feedback. They want to see what the experience will be like for the user. I’ve found mind maps, while still abstract, do a better job conveying what the user experience will actually be like.

Bull's Head, by PIcasso: a bicycle seat and handlebars.

Invention’s Lineage

Thought: If necessity is the mother of invention, then whimsy must be its father.

Real type comes to the Web...without Flash.

Web Typographers, Rejoice

Finally, your site will be able to display beautiful fonts without Flash replacement technology. Adobe has just offered several typefaces for website design and development through the Typekit project.

Typekit supports a wide array of browsers, and users who don’t have a supported browser will simply see the default typeface, like Arial or Verdana. Typekit’s costs are reasonable (though not free), you can adjust a wide variety of type settings and styles, the library is expanding, there’s a nifty colophon tool, and the fonts have been hinted for optimal on-screen viewing.

All in all, a pretty great day for type on the Web.

UPDATE: WebType is another player in the web typography game, with technology similar to Typekit, but with fonts from FontBureau, among others.

The Beastie Boys' iconic Hello Nasty album cover.

The Return of Album Art

I remember wanting to be an album cover artist. Of course, I was probably ten at the time, but shortly thereafter cassette tapes began to overtake record albums, and everyone lamented the demise of album cover artwork. It was slightly resucitated with the advent of CDs (hey, a 5×5 inch surface is better than a cassette tape), and then fell into its death throes with the rise of MP3s.

However, it occurs to me that the iPad could bring back album art after all. And not just static art, but art you could interact with. Now wouldn’t that be nasty?

Two New Sites

This weekend, I launched two new sites for friends / family.

Stefanie Zadravec is a very talented playwright; she is also my wife. The fact that she wanted a site that was clear, simple, and easy-to-navigate was good, because I did the coding, and I’m no coder. Her blog will be up and running soon as well.

East Canyon Hotel + Spa

East Canyon is a men’s hotel in Palm Springs. I did the design and coding for the first version of this site nearly ten years ago! This time, I was fortunate enough to have a talented professional and partner in crime, Carl Lorentzen, handle the technical side of things.

NY loves its joe. And its cup.

Farewell, Leslie Buck

Before I’d moved to New York, I’d see movies and TV shows where people walked around the city carrying these little blue coffee cups. I had no idea what they were, but I sensed they represented New York.

When I moved here ten years ago, I saw the cups everywhere. I loved their simple, friendly message: “WE ARE HAPPY … TO SERVE YOU.”  And then I knew they represented New York.

It amazes me that something so humble could become so iconic. Avoiding all irony, cleverness, and hipness, the anthora shows that great, memorable, iconic design is about more than transient style or technique. It’s about capturing an essence, and conveying a message. It is, in short, about the truth.

Farewell, Leslie Buck.

The UK Pavilion.

The Ugly American

Today’s Big Picture features amazing images from the soon-to-be-opened Shanghai World Expo.

One thing struck me, however: many of the international pavilions demonstrate design that is full of whimsy and beauty, whereas the U.S. pavilion looks surprisingly like a metal-clad industrial park building.

The Serbia Pavilion.

The USA Pavilion.

So, what happened? Am I missing something? Did someone forget to send an RFP to America’s most creative architectural firms? Frankly, this looks more like a Nissan dealership than a demonstration of the best we have to offer.

The "Nissan Pavilion."

Ah, now I know the reason: one visit to the USA Pavilion’s official website, and your eyes will be blinded by the dizzying array of corporate sponsors. I cannot imagine any designer or architect pulling off a work of staggering beauty under the blinding glare of that many blue suits.

It may be time to wake up and realize the road to success and innovation no longer lies in turning everything over to the mega-money-machine. (Wow, when I started this post, I never imagined I’d end up in a rant. I really just wanted to post some pretty pictures of the Shanghai Expo. Honestly.)

Update No. 1

Here’s a brief exchange with NPR’s Louisa Lim in Shanghai:

HANSEN: What are people saying about the U.S. exhibit?

LIM: Well, the U.S. pavilion has had a difficult road. It almost wasn’t built. America has very tight restrictions, making federal funding for expo pavilions almost impossible. So they had to raise $61 million from corporate sponsors to build the pavilion and it was designed by a Canadian, in fact, and has been compared to a suburban office park….So far it’s not among the very sort of hot pavilions. The newspapers quoted one man as saying maybe he was too old for it, but he found it very dull. And young people have complained that it’s too commercial.

Update No. 2

For an insider’s view of what really went wrong, read this piece by Bob Jacobson.

Finally, a flow diagram that is useful!

So You Need A Typeface

Thanks to Richard Smith for pointing me to this fun (and actually useful) flow chart.

Lotsa my favicons.

Don’t Forget the Favicon

It’s a small detail that won’t necessarily make or break your site, but the favicon does have its benefits. For one thing, it allows users who bookmark your site to associate a visual mnemonic with your web presence. When they’re rifling through their favorites, a favicon might help your site stand out.

And, because many sites don’t use them, a nicely designed favicon adds that little extra bit of polish that tells visitors you take your web presence seriously. Okay, maybe that’s a stretch, but it tells other web designers you care. And, after all, isn’t that something?

For a nice little roundup of favicons from around the web, check out this article from Smashing Magazine.

splash

Give No Explanation

David Hockney once said, “It is very good advice to believe only what an artist does, rather than what he says about his work.”

A similar sentiment was conveyed by my graduate school mentor, Marvin Harden, who asked that we not speak about our own work during critiques. Instead, our classmates and, of course, Professor Harden himself, would give us their thoughts on what we were showing.

Obviously, one’s initial impulse is to argue, to explain, to defend. But, as Professor Harden always reminded us, if we are fortunate enough that our work is someday shown in a place of prominence, we won’t be present to explain it to every viewer.

Some will argue that it’s important to know what the artist was thinking, but do we ask ourselves what the chef was thinking before he prepared our meal? Do we ask what the composer was thinking? No, we eat, we listen, we judge.

The idea that artists’ words are more important, or as important, as their work is a recent phenomenon, and in many ways parallels the movement from work that is easily assessable by the average person to work that is more abstract, both in form and meaning.

As art moves from the realm of accessibility to obscurity, the tendency is to blame the masses. “They just don’t get it,” is a common refrain. But, if they don’t get it, explanations won’t necessarily help.

For commercial artists, i.e., designers, this is not a new concept. We don’t defend our work: we present it, and await feedback. We hope people see in it what we want them to see, and if they don’t, then we ask ourselves where we went wrong. We don’t assume that our explanations will suffice. They won’t.

Artists might take a cue from designers: being clever is all well and good, but when clever gets in the way of meaning, you’re no longer an artist, you’re a performer, and your work is a prop. Stop relying on explanations and make sure your work speaks for itself.

Brendan Dawes' Cinema Redux Print

Cinema Redux Print

Coudal is selling what I think might be one of the coolest printsI’ve seen. Here’s their description of it:

“Brendan Dawes’ very special limited-edition based on our unending obsession with 2001: A Space Odyssey. Brendan explains, ‘A specially written piece of software takes a tiny snapshot of the film every second. Each row contains sixty of these frames, representing one minute of film time. This process continues for the whole movie resulting in an image that becomes greater than the sum of its parts, in effect creating a unique visual fingerprint of the film.’ Kubrick geeks must have this.”

In particular, I liked Dawes’ description:

“Cinema Redux is an attempt to make a physical visual representation of an entire movie in the hope that you can show the world – or the visitors to your home at least, your passion for a certain film. Not just a certain scene. Not just one single frame. But the entire film, represented in a new visual form, a kind of cinematic DNA. It’s made entirely from a digital ‘machine’ process. But it’s made for an analog ‘human’ world.”

HotGloo

More Wireframe Tools

I’m in the middle of a project using mockflow. I’m pretty impressed with it. However, I’m also trying HotGloo, as well as Mockingbird which is great for quick sketching.

And, my friend and colleague Graham turned me on to FlairBuilder last week. While many of these apps are very similar, they all have certain strengths and weaknesses that make them more or less desirable. I’m beginning to conclude there may not be a perfect tool, but many depending on the job. Makes sense.

In any event, I’m free from Visio (doesn’t run on a Mac anyway) and Omnigraffle (not really a dedicated wireframe app).

I intend to post a comprehensive review of these tools and a recommendation sometime in the first quarter of 2010. I’m sure you’re all waiting with bated breath.

Apparently, I am New Alphabet from Wim Crouwel.

What Type Are You?

Pentagram has a developed an online psychoanalytic tool (the password is “character”) to help you determine which typeface best represents your personality. It’s four simple questions, and the format of the test will surprise you.

According to this, I am New Alphabet form Wim Crouwel. (Here is Mr. Crouwel from the movie Helvetica describing how he came up with New Alphabet.)

I’m not sure what this says about me, but here is the description of New Alphabet from Wikipedia (my bolding):

New Alphabet is a personal, experimental project of Crouwel. The typeface embraces the limitations of the Cathode Ray Tube technology – used by early screens and phototypesetting equipment – and thus only contains horizontal and vertical strokes. Conventional typefaces can suffer under these limitations, because the level of detail is not high enough. Crouwel wanted to adapt his design to work for the new technologies, instead of adapting the technologies to meet the design. Since his letter shapes only contain horizontals and verticals, some of the letters are unconventional, while others are difficult to recognize at all. Because of this, the typeface was received with mixed feelings by his peers.

Most of the letters are based on a grid of 5 by 9 units, with 45-degree corners. There is no differentiation between uppercase and lowercase. Many of his peers were of the opinion that the design was too experimental and that it went too far. So much so, that it got a lot of newspaper coverage, which sparked a lively debate. For Crouwel it was mostly a theoretical exercise, ‘The New Alphabet was over-the-top and never meant to be really used. It was unreadable.

Ugliness Degrades Usability

Would you trust these tools and calculators?

I often tell people that a good-looking site is also a more usable site. My reasoning goes like this: a major factor in usability is trust. If you don’t trust a site, you’re less likely to use it. In other words, ugly visual design is similar to an overly-complex layout: it prevents people from progressing through the site.

Take the example above: this is the tools and calculators page on Geico’s website. While these tools are very useful, I had to scratch my head at first. Could these tools be reliable, when they look like this? The fact that the site is presented to me by Geico gives me confidence, but if this were the site of a firm which I was unfamiliar with, I’d be much less likely to trust it, and therefore I’d probably take my business elsewhere.

Essentially the same type of content; does it seem more usable?

People sometimes like to remind me that Craigslist is a bit ugly, and it’s very usable. But if you really consider it, Craigslist’s design is just bare bones; beyond that, the design is very clear and functional. In fact, the simplicity of the design is useful and appropriate for a search site. But would I trust my money with a financial institution whose site looked like Cragislist? Probably not.

While design is not everything, it is something, and it shouldn’t be overlooked.