This morning over coffee I skimmed Dan Brown’s book, “Communicating Design : Developing Web Site Documentation for Design and Planning.” I highly recommend it as a consolidated, no-nonsense resource to learn about the how to create and associate user personas, content inventories, concept maps, site maps, flow charts, wireframes, and final visual designs.

In fact, the value of the book is intrinsic in my last sentence. After my morning read, I now have a new mental map of the different types of documents useful for describing online experiences, steps needed to create them, and their relationship to each other. I feel like Neo after learning Kung Fu, only much geekier.

The book also provide valuable tips for how to manage meetings with stakeholders about each type of deliverable/document. This management level content is actually more helpful than redundant or annoying because it provides a foundation approach for integrating design into the greater development team.

All in all, I highly recommend this book to anyone interested in learning more about documenting web sites, or managing web design teams.

More sneaks of Little Big Planet. Reports in that a sophisticated beta tester built an 8-bit calculator using the game’s physics and logic models.

My anticipation grows significantly.

Wow. This post title may win the prize for lamest ever, but at least it’s true. GOOD magazine’s online site is, well, very good. They’ve organized their postings into chunks that visually float upon a flat background. Subtle drop-shadows are the key to the effect; they provide it with just a bit of dimension. Also, their icons are cute, but modern. Also, their little transparent “goodmark” and “comment” overlays on top of each post are a nice touch.

All in all, it’s exemplary. More blogs should look like it. Mine would, if I could spare the hours it takes on the weekend hacking away at my WordPress stylesheets, dammit.

Adobe released CS4 yesterday. Congratulations to all those involved.

From the XD perspective, this is an incredibly important release for one main reason: the CS application framework has become more unified across the point-products. In CS3, Flash, Photoshop, InDesign, and Illustrator all adopted the similar workspace design patterns, but Fireworks and Dreamweaver retained their former Macromedia pattern. But now, in CS4, all the apps have adopted the a common workspace design pattern, which itself is updated.

In CS4, users can choose to use the application frame, which essentially consolidates all panels, and the application window, into a single - for lack of an additional word - frame. Or, they can opt to use the application workspace presented in CS3, which manages panels in a looser - but convenient - fashion. In a sense, it the best of both worlds.

In upcoming posts, as I and others in Adobe XD begin to use all the apps together, as a suite, to accomplish common application design and development workflows, I’ll enumerate other additional benefits - gleaned from actual longer term use - of the suite.

If you have any ideas for improvements to suite wide workflows, please don’t hesitate to send me an email or comment on this post, and future ones related to the topic.

New, and positive, Macworld article on Dreamweaver CS4 Beta. One of their favorite features is the new and improved user interface:

The most obvious change to the program is Dreamweaver CS4’s new user interface. The old Macromedia look-and-feel has finally been replaced with an interface that matches the other applications in Adobe’s Creative Suite. (Dreamweaver was among the Macromedia products absorbed by Adobe when it bought its one-time rival three years ago.)

While this change will take a while for long-time Dreamweaver users to get used to, the new interface significantly improves the usability of the program. Panels and windows mesh together well, are easier to organize, move and hide, and the new interface provides the flexibility to create a working environment that’s comfortable whether you’re working on a 17-inch monitor or a 30-inch Cinema Display.

In future posts, I’ll provide more information about the UI patterns and overarching experience design principles at play across the CS apps. It’s a deep and interesting story to tell.

My friend Remon Tijssen, from Fluid.nl, is at it again with his latest beautiful project - Spectra - for MSNBC. As usual, Remon hits it so far out of the park that it lands in the next generation.

There is so much I appreciate about Remon’s work - from his high concept approach down to the nitty-gritty details. In terms of total interaction design, he’s got a touch that is rivaled by few others. Now mind you, Remon generally doesn’t design applications that help people do work (productivity applications). Instead, his work focuses on play, and story-telling. Whether it’s a simple flash-based video game, a company portfolio, or with Spectra, a branded way to view the news, his focus trends towards fun, usable, enjoyable experiences.

That all being said, I find Remon’s work very instructive in terms of design patterns and examples that can be taken from the world of play and applied to the world of productivity applications, and to RIAs in general. Keep in mind that user today expect their software experiences to be more fun, more fluid, more engaging, than ever before.

Here are some bulleted observations on Remom’s Specta project that hopefully will help invoke thought about some of Remon’s interaction design patterns.

Interactivity via Motion
Often interactivity is communicated via a visual difference; buttons are rendered beveled or shiny, text has underlines, etc. Instead of cluttering the greater experience with tacky/busy style, Remon establishes a fairly flat, aesthetic and uses subtle and enjoyable motion to communicate interactivity. In other words, when it comes to the visual design, less is more.

In the video clip below, notice how nearly everything that is interactive moves in some pleasant manner when the mouse rolls over it. By making motion the focus instead of the visuals, the net effect is that the experience is fun to explore, but not overbearing.

Motion Patterns
Instances of complex but coordinated motion patterns occur throughout Spectra. For example, rolling over a channel causes 1) the channel’s box to grow, 2) the channel’s title to center in the box, 3) “plus” and “rss” icons to appear. This combination of motions creates a pattern that communicates immediately, “clicking on the channel box adds an rss feed of this channel to the set”. This same motion pattern is used whenever users roll over any channel to add or delete it. Because it is a pattern, it helps set user’s expectations.

One note about motion patters: another way I like to refer to them is as “reusable transitions”. Transitions are essentially a set of motions (motion patterns) that help guide users from one state of a UI component to another.

Strong/Obvious Transitions
When the users clicks a channel, it is added to Spectra’s view mode. To communicate this, as a result of clicking a channel 1) the channel drops to the bottom of the screen where it is added to a list, 2) In response, a set of rss items floats into a spinning arrangement of tiles. This motion pattern creates a very distinct transition which helps the users understand the effect of clicking a channel. If the transition were more subtle, users might not understand how/why each UI element arrived at its location.

These are just three patterns derived from Spectra. There are many more to analyze, and then apply.

I first read about the Design Dictionary at SpeakUp. They gave it a good review, and so I went out and bought it. Last night I spent some time reading through the nicely designed book and was, strangely, taken back to my childhood. You see, as a kid I was into reading comics (I still am), and one of my favorite wasn’t a dedicated series, but rather the A-Z description of every comic book character created by Marvel comics, all wrapped up in a few books titled Marvel Universe. One summer, as my parents and I drove across the US, I read every Universe cover to cover, and over again. By the end of the trip, I had an encyclopedic knowledge of each character’s history, physical qualities, and relationships to other characters.

Now I’m reading the Design Dictionary and I must say that not only is it surprisingly well written, but also thorough. In essence, it lays out the essence of each design topic, and relates them to each other. Through it you can learn the history of design writ large, the names of all the influential players, and basic yet solid principles that provide the frameworks for nearly all design practices, methodologies, and philosophies. The words are clear and precise, and the information practical.

I plan to read it cover to cover, and over again.

Here’s a three part video review of Alert Thingy, a new AIR app built by Howard/Baines using the FriendFeed API.

The first bit takes a look at the Alert Thingy home screen.

The second video analyzes the initial screen, upon install.

And the final video reviews the app’s visual design.

Note: I broke this review up into three videos because Flickr video, which I have come to deeply appreciate for its simplicity and ease of workflow, unfortunately only allows videos of less than 90 seconds of length. This is both a blessing, my reviews are short which means I have time to do my day job; and a curse, deeper reviews must be separated into multiple videos, which I assume may be a bit cumbersome for you to view. Thoughts on that matter? I’d love to hear them. Please post them in comments.

I’ve used Doomi for a week now and I’m happy to say that it fits my needs for a task list manager. See the review below for it’s feature set.

Doomi is a great example of Adobe AIR in action, in a small widget like form factor. It is easy to initially assume that Doomi should have been built as an OSX Dashboard widget but remember, AIR is cross-platform, therefore Doomi should work on OSX, Windows, and Linux (I haven’t tested it on the last two). Thus, using AIR to encapsulate a small set of functionality and a relatively short user workflow can make more sense that building both a Dashboard and Sidebar widget, especially considering that Linux is also included in AIR’s mix.

So cheers to the Doomi team for building such a kick-ass little app. And and “wha?” to them for the app name. I get it, but really? In any case, great functionality and I’m a daily user and am looking forward to the next release.

Good link from UX Magazine - the Rock Werchter 08 website has a bold, simple, and beautiful navigation pattern. Brief video review of the experience below.