Ran across a few great design patterns resources this week that I want to share with everyone.  They give me something to refer to when I’m doing wireframes, and sometimes I share them with clients when we’re trying to determine how to display content that’ll be most pleasing to their audience.  Please enjoy!

From the “Designing Web Interfaces” Blog

• 12 Standard Screen Patterns
• 30 Essential Controls
• 15 Common Component Patterns

And! Save your favorite patterns to refer to again and again with Pattern Tap.

A portion of Xcel Energy's Smart Meter customer interface. Gives meaningful equivalents to current power consumption, as well as hour-to-hour consumption (unseen). Brilliant!

“I love this site,” says Yeakel as she clicks through bar charts of her family’s energy use. “I called PPL and said, ‘Did you design this for me?’ Because I’m one of these people who love to know where my dollars [are] going and how can I save.”

How fabulous.

In a story on NPR today, Tammy Yeakel raved both about the ability to manage her electricity consumption and the web based application that makes it possible. (Smart Meter Saves Big Bucks For Pa. Family) She’s absolutely tickled as describes the measures she’s taken to lower the numbers reported to her online; how she watches her electricity consumption spike when her husband arrives home at 8pm; and how thrilled she is to be able to compare her consumption to her neighbors.

What’s striking about all of her comments is that they show a deep appreciation for level of thought that went into designing the user experience.

1. Opening up the power company’s real time data to the consumer online. At the company’s own expense. To request people buy less of their product.
2. Including not just a canned metric of current consumption, but archived hour-by-hour data that’s presented to the user in a graphical format.   Customers can use the data to spot trends, often real time.
3. Offering comparable consumption data from neighbors. Simply Genuis! People LOVE to compare themselves to other.

This is what a thoughtful user experience looks like, and it shows. What a tremendous compliment to those involved in its creation. As we moved toward this system in the U.S., power companies should consider this user experience model.

Be sure to check out the online NPR article too. It has a full screen capture of the Xcel customer portal homepage as well as a lovely infographic on the troubled U.S. electric grid. (Who knew Washington state got so much energy from

Cool infographics coupled with excellent, compelling art. Very modern (and perhaps adult) style coupled with the classic fairy tale. Attention to detail has me wondering how long this took to create.

Slagsmålsklubben – Sponsored by destiny from Tomas Nilsson on Vimeo.

Children’s fairy tales are really quite morbid, are they not? Grandma’s 10,000 calories?

(I’m not much into web video (I know! Sacrilege!), but this is worth the bandwidth you’ll use to download it.)

I’ve previously noted my appreciation of a good infographic [The Ebb and Flow of Movies: Box Office Receipts 1986 — 2008 (Information Design), Dec. 29, 2008].  Nevertheless, while a good infographic about movies is a fun romp through pop culture, none is so appropriate and powerful than the one which educates.

We know that there are three styles of learning: visual, auditory, and tactile. A great infographic will contain at least two of these elements and is the essence of the “interactive” experience itself. We often see infographics that use visual and tactile – the very genre is impossible without the former and almost predicated in situations with voluminous data for the latter. But auditory is quite often overlooked in cases where its apt use hearkens back to our school days of classroom learning – only with better visual, and slightly interactive, accompaniments.

How the Government Dealt With Past Recessions uses narratives from top academic economists along with a simply embellished timeline to tell the story of U.S. economic policy’s response to the past 50 years’ recessions. The whole experiences takes less than 5 minutes, and it’s 5 minutes wells spent: the average Joe walks away with enough cocktail party knowledge to look like a smartie ahead of his time.

Then, if you’ve still got time, go read the related article.

P.S. Check out that fabulous “Learn for Growth” illustration by the folks at the Heads of State. Hubba, Hubba.

What I love most about a well-designed infographic is its ability to absorb me.   Getting lost inside the graphic’s features as I internalize the data and the lessons it teaches.  I’m captivated by the beauty and elgance of beautifully presented complex data sets.

Here’s another I found today over at the bastion of fantastic infographics, the New York Times:
The Ebb and Flow of Movies: Box Office Receipts 1986 — 2008

Be sure to check out the two seasonal trends over time – summers and the holidays.