Inspired by the simplicity and universality of transportation graphics Microsoft calls there new design guidelines Metro. Beyond the name is the focus on creating a modern, stripped down, easy to navigate user interface based on common elements and typography.  The use of typography as a key design element in the digital world is almost unheard of ; I would think design geeks should be overjoyed with this though I’ve barely seen any references to this from the general design world.

Along with typography here are a few of the highlights of Metro:

• Based on transportation signage: simple, universal, easy to skim
• General feel: Clean, light, open and fast
• Experience: should lead the design
• Consistent: common design treatments and transitions
• Flexible: Inviting developers to personalize their use of the guidelines to allow them to make their apps unique yet consistent
• User focused/Task focused: one primary action at a time
• Panoramic: apps not locked to a single screen
• Typography: as an element of beauty as well as to demonstrate hierarchy
• Transitions: are as important as the static page. Guidlines request to keep them simple and related, noting “the more you use it (transitions) the less special it becomes”
• Simplify, Simplify, Simplify: fierce reduction in unnecessary UI elements (chrome, non-related actions…)

Here is a link to a long but worthwhile video
http://live.visitmix.com/MIX10/Sessions/CL14
(Silverlight required for inline, but you can also download non-Silverlight version)

Here’s the official Window’s phone site:
http://developer.windowsphone.com/

Overall, I’m excited to see smart-phones continue their evolution and Metro looks to be a great step forward.  It’s also nice to see Microsoft (or anyone) not play catch up by porting over the status quo, but rather innovating beyond it.

I saw this a few months back, loved it. Last night I happened to flip to the Oscars and caught the animated short category and saw that this was not only nominated but won.  As good as it was I never would have thought it was politically correct enough or wouldn’t be sued to oblivion by all the brand owners of the logos used in the film.  Created by the H5 group out of France, including directors François Alaux & Herve de Crecy.  During their thank you speech they mentioned it too 6 years to make this 6 minute masterpiece.  Followed by the hope to return in 36 years with a full length film.

This is one to be watched multiple times just to soak in all the nuances.  Truly an impressive animation with an excess of personality and sass.

official site

Good design is transparent. Same is true with technology; the end user doesn’t care how it works just that it does.  Unless you’re a designer or a techie you don’t pay attention to how a site works or it’s design beyond it’s basic aesthetics.  Being both I love how the BBC is offering a behind the scenes peek at how they developed their new Global Visual Language 2.0.  There is some really good thinking in there that could benefit many, many sites.

The guide really demonstrates their focus on form, function and the interconnected nature of the two.  The use of typography as a design element; a grid that’s both vertical and horizontal; strict use of color as an accent; all common place in the print world but often forgotten in online designs.

The BBC is not alone in the brining classic design principles to the web, though some of the more impressive works have been coming from the news industry.  I’m referencing the New York Times and Reuters; both have embraced online/interactive design and what can be done with it while keeping true to the rules of design that still matter…but I’ll save that for another post.

The videos (featuring James Lipton) are campy, creepy, funny and to the point.  The imagery and quirkiness leaves a lasting impression and the copy is so Lipton’esque that everything seems normal yet far from it at the same time.

Carlos is Angry

Stephan and Zoe

Tracy and her beard

The print campaign is also humorous though not as powerful and may be confusing as to what it’s actually for.  Still they’re eye catching and well related to the TV/Videos and Web experience.

The Virgin

Peanut Butter Muffin

Junk Drawers

Source:
AdFreak
Bee

I never had a reason to go to Gatorade’s website before but the link was sent to me from a designer friend of mine (Neuarmy).  Once going there it was obvious as to why he shared it.  Sporting the new aesthetic of the Gatorade “G” the site takes it to another level of sophistication rather then pure simplification.  It’s an all Flash site boasting lots of black, simplified layouts, vibrant images and large video headers.  Navigation is through the use of large black and white silhouettes for both the products and the athletes.  Which acts as a great accent to a highlighted item and it’s inline videos.  While you may learn more then you ever needed to about Gatorade check out the site for a great sample of extending a brand’s aesthetic across media.

Another gem sent my way from Neuarmy is by Boone Oakley and their use of YouTube for their website.  Ok, so it sounds a bit like Skittles attempt to use Web 2.0 tools to stitch together a web experience…well this isn’t that.  It’s literally their website embedded in humorous and (a touch) twisted little videos.  Very innovative use of such a common medium and a great way for them to show off their conceptual/strategic muscle.  They also feature some great work from that last few years, I’m sure you’ll recognize a few.  Well worth checking out.

Links:
The New Yorker’s blog
Brushes iPhone App for painting
Gatorade
Boone Oakley
Skittles
Neuarmy

Once again Apple has paired up with the New York Times to create an ad users actually want to see.  This time it’s for a homepage integration/takeover featuring multiple ads all working in unison.  Similar to Apple’s TV ads, this site integration features John Hodgman (PC) and Justin Long (MAC) talking about their differences.  In this case John is commenting on the results of a Forrester Research poll, shown in the ad space above theirs, when two characters from yet another ad space join in on the conversation.  Before they start talking they seemed to fade into the pages background drawing little to no attention.  When the main ad is complete the two secondary ads fade to an unobtrusive white panel with a floating Apple logo.  Allowing those that keep the NY Times open all day (to see news updates) not to be barraged with Apple, Apple, Apple.

Though this isn’t the first time for Apple it’s still worthy of the viral attention is getting/has gotten.  It’s cleanly designed and executed.  Continues the sense of humor that has made these ads a hit for the last few years.  Makes great use of its environment.  It may only run a single day but I’m sure both parties make out as winners each time they meet.




Links:
Apple
New York Times
John Hodgman
Justin Long

[See post to watch QuickTime movie]

PS: the QuickTime Embed plug-in was used to display this inline.

Links:
Pitchfork (online music mag)
New York Times
Apple

Well today I came across another beautifully crafted site, this time for a new cell phone.  One that should give the iPhone a run for the money.  The Pomegranate phone is a sharp little all-in-one cell phone, and so much more.  Like Great Pockets, this site offers a great multimedia experience to show you every detail of their product.  One of my favorite features is the HD projector.  Who knew such a small device could project true HD video for all to enjoy.

Both sites are also fronts for another product altogether.  Great Pockets was Nokia’s ingenious concept site, designed by FarFar, for the release of their N95 cell phone.  There was a tight connection between all the items that you could fit into your Great Pockets pants and all the features of the N95.  The Pomegranate on the other hand has features even the N95 doesn’t have.  As mentioned there is an HD projector….umm hmm.  I will speak no more of the Pom’s featues, go check it out yourself.  Unlike the Great Pockets/N95 promo, the Pom phone is only connected to its true destination by some well written copy.  That destination being Nova Scotia.  Mad props go out to the Nova Scotia board of tourism for giving this stunt a try.

My gripe with the Pom phone site is that once I got to the true site I couldn’t care less what it had to offer.  The giant disconect from an ultra-high-tec phone and the land of Nova Scotia was too much for me.  I assume I’m not alone here.  I also assume this campaign will be less successful then Nokia’s original.  Either way they are both well worth your time.
Links:
Great Pockets – Henry Needle & Sons/N95
Pomegranate Phone – Nova Scotia
FarFar

• How does this happen?
• What does all this mean?
• Outside of the hype, how does this compare to other recessions?

Well a number of designers have taken on the task of making all that information digestible, might I say, even interesting. Here are some of the better examples I’ve seen.


The Crisis of Credit Visualized from Jonathan Jarvis

As part of his thesis, Jonathan Jarvis has created this beautifully executed and explains the complexities of what caused the credit crisis in simple clear terms. For more visit: CrisisofCredit.com

Four Bad Bear Markets

A simple chart covering the Crash of 1929 through today’s housing crisis. For more info on the data behind this chart visit dshort.com

Interactive Charts by 26Variable

Using Google’s Motion Charts it allows you to see the market in action in a clear colorful way.