Design « MICHAEL MCWATTERS

Design

Goodbye Site Map, Hello Mind Map

A mind map is easier to read than a traditional site 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.

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...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.

Design / Thoughts — No Comments
24
Aug 10

Invention’s Lineage

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

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

Design / Technology / Web — 3 Comments
16
Aug 10

Web Typographers, Rejoice

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

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.

Design / Thoughts — 1 Comment
7
Aug 10

The Return of Album Art

The Beastie Boys' iconic Hello Nasty album cover.

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?

Design — No Comments
31
Jul 10

OIly Moss Movie Posters for iTunes

Some great movie posters designed by Oily Moss.

RoboCop by Oily Moss

Design / My Work — 2 Comments
24
May 10

Two New Sites

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

Stefanie Zadravec, playwright.

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.

Design — No Comments
1
May 10

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.

If only the humblest (or best) of my designs could reach such heights.

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.

Design / Rants and Screeds — 12 Comments
28
Apr 10

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 UK Pavilion.

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.

Design / My Work — 3 Comments
26
Apr 10

30 Minute iPhone Painting

Painting done in 20 minutes while riding the subway.

Tonight’s painting was completed in less than 30 minutes while riding home on the Q train. The primary composition and textures were created using the amazing iPhone app Brushes.

I then shot three photos right there on the subway with my iPhone, brought them into Brushes, applied them as layers above and below, and began working with the eraser at various settings to add depth and dimension.

Finally, I brought the image into the iPhone photo editing app Photogene, and made final adjustments and tweaks.

While this image leans toward the abstract, there are many artists using Brushes to create very representational images as well.

My primary complaint is that the images Brushes creates are fairly small (iPhone screen size). However, this resolution helps foster a quick-sketch feel, and keeps the images from becoming too precious.

When and if I get myself an iPad, I will be excited to try the iPad version.

Design / Information Design — No Comments
22
Apr 10

So You Need A Typeface

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

Finally, a flow diagram that is useful!

Design / Information Design / Technology / Usability — 1 Comment
20
Apr 10

Inside Out

Here’s an interesting concept: show the contents and storage use of a USB stick via colored lights on the outside. No lights, no files. Different colored lights could represent different file types (e.g., images, music, documents, etc.). Of course, this assumes we’re still using USB sticks (!) to carry our files around, but it has applications for other devices. I like the idea that you get an immediate visual read with little interpretation. (Thanks to Information Aesthetics for the original article.)

More of this clever designer’s work can be viewed here.

Design / My Work — No Comments
18
Apr 10

4 Elements Music Update

The new UI for 4 elements music.

I did the original design for this site about a year ago, and we are in the process of making some significant UI, feature, and functionality updates (link to screenshot of the design in progress). It’s a side project with a friend, but it’s an interesting one, nonetheless.

Design — 1 Comment
12
Apr 10

Start Smoking

With smoke brushes, I was able to create this image in less than 10 minutes

Download this great set of smoke brushes from Qbrushes for free!

Design — No Comments
29
Mar 10

Award-Winning Simplicity

The Rolex Learning Center in Switzerland

In the age of architectural bombast, it was great to hear that two Japanese architects — whose style favors simplicity and congruity — were the recipients of this year’s Pritzker Prize. More here at NPR.

Design — 3 Comments
16
Mar 10

Make It Work!

Tim Gunn

If you’ve ever watched Project Runway, you know that Tim Gunn frequently approaches the designers, looks at what they’re doing, and says, “Make it work!”

Every time he says this, I reflect on the countless hours of my professional life I’ve spent trying to guide the design process by providing my team with clearly articulated, well-formulated, constructive direction.

And to think, all I really needed to say was, “Make it work!”

Next time I see a designer struggling, I’m going to try that.

MICHAEL MCWATTERSThoughts on digital design, and other nonsense.