The origin of the Metro UI design language

In a neat little historical post over at the site Project Metro, the origins of the Metro UI design language are given some detail. What makes it interesting is the information came from a Microsoft presentation on the topic at an early "Behind the Tiles" event.

We won't steal all of their thunder from the fun little read, so we'll just tease you with a bit of it:

"The whole idea started with the Swiss Movement in the 1960′s. They wanted a way to communicate to people through design, while being different yet direct. What was born from this movement was the font, Helvetica. It was the first simplistic yet sophisticated design font that delivered a clear and precise message. Microsoft knew with the rise of Apple and Android that they needed to make a change. They needed to be different but also wanted a clearer way to deliver its message..."

Very interesting stuff, especially about the use of Helvetica and Segoe fonts (Windows Phone uses a slight variation called Segoe WP). Personally, we'd like someday to see a detailed history of the evolution of Metro UI through Microsoft (we've seen some early iterations in Media Center, then through Zune to Windows Mobile 6.5 and up to Windows Phone 7).

Source: Project Metro

Attend a 'Behind the Tiles' Windows Phone event to win a Lumia 900

Microsoft has teamed up with AnythingbutiPhone to provide the Windows Phone community with a number of invitation-only events across the U.S. 36 events will be held at 12 Best Buy establishments on set days that will run from 6:30pm - 9:00pm.

Branded "Behind the Tiles with Windows Phone", these sessions will enable attendees to get hands-on experience with a variety of devices and learn about the design philosophy behind the Metro UI. Also, you could be in with a chance of winning a Lumia 900 for attending. What's on the agenda?

  • Attend a Nokia Lumia 900 instructor-led demo lab
  • Learn about the Metro UI and the future with Windows Phone (three screens dream, etc.)
  • Get the latest information on Windows Phone for IT and Developers
  • Play with some of the latest Windows Phones
  • Network with peers and Windows Phone experts
  • Have a chance to win great prizes
  • Food and beverages will be provided

Should you be interested in attending one of the hosted events, head on over to AnythingbutiPhone (link below) to view the calendar and be sure to register for a place (enter "MVP" during registration) if you can make one.

Source: AnythingbutiPhone; thanks William for the heads up!

BBC Mobile Site beta aiming for the simplistic Metro UI look

The BBC Mobile Site is in active public beta, which can be accessed from your Windows Phone via Internet Explorer. This beta makes use of a Metro UI look and feel with simplistic graphics and "live tile" like story headline boxes. The new mobile site design matches the main homepage, which also looks Metro influenced.

Should you prefer a more app-driven experience when reading the BBC News website, be sure to pick up Lawrence Gripper's BBC News Mobile app from the Marketplace. What do you guys make of this new look that BBC seems to have rolled out?

Source: BBC Mobile Site; thanks Ed for the heads up!

Zero brings Metro minimalist tasks to Windows Phone [Video]

We're just going to come out and say it: Zero, the new to-do list app from tomzorz labs, borrows heavily in inspiration from an iPhone app called Clear (see the iMore review). What makes that funny is Clear is understood as borrowing heavily from Microsoft's Metro UI design language meaning we're finally coming full circle with Clear Zero coming back to Windows Phone.

The to-do list/task manager app is very minimalist in design with zero chrome, ahem. It is primarily gesture based forgoing the traditional bottom-bar method found in most Windows Phone apps--in that sense, it actually deviates against Metro UI but only because it's going more minimalist instead of less. Gestures are simple and universal: up/down to create, left to delete, right to check off, pinch in to go back, pinch out to re-order lists. Because of the gestures, you'll need to tap through a brief (but well done) tutorial at first but you'll lean the system quick enough.

The app itself is clean, fast and to the point and because of that we like it a lot. The Live Tile adds a nice counter though it could perhaps be augmented with a rear tile for more info (space permitting though). Likewise, tying into the Toast notification system could be a good idea in the future to make this a true "reminder" app. We are looking forward though to the back-up feature which we presume will be based on SkyDrive.

You can pick up Zero with a free trial here in the Marketplace for $0.99.

Metro Studio 1: Thousands of Metro icons, FREE [Developers]


Every so often we cover tools that help out developers, but this is in another league. A company called SyncFusion has created a product called Metro Studio 1 which looks to be invaluable to developers and designers alike. The company traditionally develops .NET components for ASP.NET, WPF, WinForms, Silverlight, WP7 and others.

Metro Studio 1 comes with 600 unique metro icons that can then be customized through the interface. You can change the size, padding, background shape, and colors of any icon. Plus, the XAML source is provided for the icons, or you can save the PNG. Every icon is vector based (hence why the XAML source is available), so exporting at any size is possible.

Best of all, the studio is totally free, and every icon is royalty-free and can be used in commercial projects.


So go on, download it now. Thanks, @rmaclean

Director of User Experience at Microsoft speaks on Android, Windows Phone

Gizmodo has posted a nice interview with Sam Moreau, Director of User Experience for Windows, Windows Live and Internet Explorer (LinkedIn) at Microsoft. He's basically the guy tasked with the Windows 8 UI redesign which obviously has taken its cues from Windows Phone (which took its cues from Zune and goes back to Windows Media Center). The interview is quite fascinating as it entails discussions on challenges the team faced, decisions made and what they are expecting.

One interesting area that came up was Windows Phone, where Gizmodo asked about Microsoft's new found "strong sense of vision". Moreau responds and summarizes Android nicely:

"Yeah, because that was the thing that we get blamed for a lot. Or, I would say the thing that annoys me about Android is I don't think it has a point of view. I think it's trying to be this weird sci-fi version of an Apple design language, poorly executed. Some of it is starting to get there, you know, they got Matias (Duarte) there, and some things are starting to get a little better. They're starting to get that—some sense of soul, but I do think that a lot of their soul is derived from some other place."

That sense of soul is something Apple clearly has and now something Microsoft has too. Android and RIM? Not so much. Certainly design-philosophy or as Moreau calls it, redesigning a religion, is no small task and in a lot of ways it's remarkable that Microsoft is leading in this core area. Part of that is due to Microsoft's "low-self esteem" in terms of design and with the combo of strong leadership and strong competition i.e. Apple, Microsoft has turned themselves around.

The Metro design language is just starting to hit the mainstream and Windows Phone, for all intents and purposes, was the first. It should be very exciting to see in late 2012 how the masses react to the "sudden" alignment of Microsoft's three screens of phone, TV and gaming.

Source: Gizmodo; Image credit: Annie Marie Musselman/Fast Company

Ask Ziggy briefly busted but major overhaul on the horizon. Exclusive first pics.

We covered Ask Ziggy last month and it sure gained a lot of attention. While the Siri-like app itself was a great first start, it certainly lacked the ability to do some basic functions like tell the weather or what time it is. Still, for being done by one guy it did do some neat tricks as our video pointed out (see after the break for a refresher).

Currently though, Ask Ziggy's Nuance engine is on the fritz. It's a temporary problem that has to do with basically too many people using it. The exceeded limits though should be restored soon, so sit tight. And it's fixed already!

But the big news, as you can peep from the screenshots, is the huge overhaul the app is getting for the next version. Ask Ziggy is getting all "Metrofied" as many of you had requested and boy, do we like the look. On top of that it handles a lot more functionality, including:

  • Weather
  • Time
  • Reminders
  • Maps/Geolocation

And we hear there's a lot more in the works. In fact, the developer, Shai Leib, is now working full-time on this project meaning we can expect some serious changes in the coming months.

No word on ETA for the next version but we'll keep you posted with a hands on as soon as we can. Certainly though we're very excited about where this is going. Folks, take our word, you haven't seen anything yet.

You can pick up the current version here in the Marketplace for free, but until Nuance resets their limits, it may not work.

Updated: Added Map/Geolocation pics. Also, Nuance is working again!

Two changes coming in Windows Phone Tango includes tile grouping?

Michael Gillett, MVP in Windows Live and Senior UK Microsoft Student Partner, has published an interesting tip that he's received from a "trustworthy" source. The tip includes two changes which will be applied in the coming Tango update; the media controls for manipulating playback will take up less space on-screen, and users will be able to create folders for tiles on the home screen.

Take the above with a pinch of salt like any rumour, but we could be onto something here. The media controls are pretty darn massive, and one can get into a pickle with having a good number of Live Tiles dancing the night away. So the changes would make sense to many. Although, instead of creating folders (as you would in iOS), we would prefer to think that Microsoft would bring across grouping, which is present in Windows 8 and is available in the Homebrew community with the Folders app.

What do you make of these two changes? Let us know in the comments.

Source: My Microsoft Life, via: Plaffothanks Antonino for the tip!

Metro Photoshop Swatches

I spend a lot of my day designing Metro stuff for Windows Phone. And the majority of that time is spent creating mockups of each area of whatever app I am doing, along with testing it with each accent color.

Embarrassingly however, every few days I head over to Bing and search for the accent colors. I've gotten so used to this that I forgot how silly it is.

I almost hit myself tonight when I saw this really simple, but awesome little swatch file for Photoshop that I should have made for myself months ago. So if you're a designer, or a dev that does design, or have PS installed for no conceivable reason at all, head over to the source and download and run the swatch file.

Source: timmykokke

The Design Process of a Windows Phone App [Developers]

An analogy of the relation between Principles and Language could be an abstract concept like “Love” (… a Principle) which could be expressed by a concrete symbol like ♥  or the combination of four characters “l-o-v-e” which give birth to the written form of the abstract concept “love”. I’m sure you could come up with an infinite number of other concrete ways to express the concept “love” including the sound of the word itself, photos or other metaphors.

That great little excerpt up above is one of the opening paragraphs to 31 Days of Windows Phone Metro Design, which we covered previously.

Since then two notable things have happened. The first is that Arturo Toledo, Sr. User Experience Designer at Microsoft and lead author of the series, has mentioned that the series will now be '31 Weeks...' instead of '31 Days...' so he can spend more time on each. Secondly, he has just posted the latest episode which goes over the process of designing an application from the top down - and he will be detailing each step in the coming weeks.

What I love about this series is that it's written simply enough for any developer to understand. And this latest post has even more detail than the last.

So devs, do yourselves a favor and go soak up all the Metro goodness.


'31 Days of Windows Phone Metro Design' series launches

We previously covered 31 Days of Mango app development, a daily post on the best way to make apps on Windows Phone. Now we're kicking off the new year with a '31 Days of Windows Phone Metro Design' lead by Arturo Toledo, a Sr. User Experience Designer at Microsoft for the Windows Phone Design Studio:

"We usually refer to “Metro” as the UI design style Microsoft is using in their platform and the one Microsoft is exposing for developers and designers to create apps for Windows Phone (I’m focusing on Windows Phone in this series). But let’s delve a bit deeper into the term “Metro” and explore what it really means. To begin with, Metro is defined by two things: Metro Design Principles and Metro Design Language..."

The series looks to be pretty killer and we hope developers take note. One thing we have learned from user feedback here at WPCentral is that you folks are Metro-fanatics--if an app doesn't look Metro enough, a lot of you tend to rip it up in reviews. That's important for devs to remember when making apps as the more Metro it looks, the better the reviews tend to be (although there is room for going outside of Metro, see SoundHound, Shazam and Tweet It!).

Anyways, devs, bookmark and learn from this series. You ignore it at your own peril in the Marketplace as Windows Phone users have spoken: they want Metro.


Metro newspaper app hits the Marketplace

Metro, a commuter newspaper, is available in a number of cities across the UK and at major stations on a number of rail networks. Not only has the paper sported Windows Phone advertisements for HTC Mango handsets, but now we have an official app being made available. As is with the newspaper in its physical publication, the app is free of charge accompanied by advertisements. The app itself is well designed and effectively shows off the Metro UI.

Some available features:

  • Comment on articles.
  • Share articles with friends.
  • Categories can be pinned to the home screen.
  • Galleries from a variety of topics.
  • Content is stored locally for offline viewing.

Being already present on Android and iOS, this is a positive step for Windows Phone. You can download the Metro app from the Marketplace for nothing at all (advertisement supported).

Thanks TheWeeBear for the tip!

Lockergnome takes on Microsoft's Metro UI

Continuing the ongoing change in tech-media attitudes (see here, here and here) comes a good read from the folks at Lockergnome, run by Chris Pirillo. Pirillo is one of those guys you either find fascinating or extremely annoying--we're actually in the former camp as we appreciate his geeky observations and dedication to the field, but we digress.

The post, written by Robert Glen Fogarty, deals with a novice's experience with Metro UI specifically on the new Xbox 360 dashboard update. While many of us take Metro for granted, reading the perspective of someone new to it can be quite informative.  Fogarty's take on it is from using the new Netflix app and he seems impressed:

"At long last, the little status bar filled and I was surprised at the very different-from-expected interface that greeted me. At first I was puzzled, and hoped that learning to navigate wasn’t going to be a counter-intuitive experience...As it turned out, everything was just as easy to find as it was with the last design; in fact, I think the new interface utilizes space with better efficiency so that features are more easily accessible than they were before. (In my experience so far, it seems that there’s much less aimless scrolling necessary)."

Pirillo takes on the question “What do you think of Microsoft taking Metro to PCs and Xbox? I would love to know how Metro works with a keyboard and a mouse.” and moves on to the benefit of Microsoft bringing over Kinetcimals, Bing and My Xbox Live to iOS--a controversial move that has left many of you furious at Microsoft. For the record and setting ourselves up for some, ahem, negative feedback, we totally agree with Chris here because lets face it, porting over Kinetimals to iOS is not going to damage Windows Phone.

More importantly, spreading the gospel Metro UI seems to be a much more wise endeavor for Microsoft in the long run. With Xbox 360, Windows 8 and Windows Phone, Metro UI really is more than the sum of its parts. Either way, positive tech-media coverage for Metro UI is a great thing for Microsoft and seems to be a growing trend these days.

Source: Lockergnome

MetroTube finally available in the Marketplace--launches with special offer

MetroTube, the rebranded, updated version of LazyTube, has finally launched in the Marketplace. Yes folks, the much anticipated YouTube client for Windows Phone that includes many new features, Live Tiles and a smooth, elegant interface that embraces the Metro UI is finally here for you to download and use daily. What's more, we're told it's launching with a special offer: an unrestricted, unlimited, ad-free trial in which you only pay the $0.99 if you feel the app is worth it.

That's some confidence right there.

A free, ad-supported version is in the final process of being approved for the Marketplace and in addition, we're told video-uploading will be featured in the next major update. So sit tight for that one. For those who opt for this $0.99 edition, you get

  • HD video streaming
  • Early access to new features
  • Chameleon tiles adapt to phone theme
  • Warm fuzzy feeling for supporting developers!

We took the app for a spin last week and walked away very impressed with the redesign and new features, so we have to give the thumbs up to this app for you YouTube fans. Certainly we expect this app to climb to the top of the most-downloaded on Windows Phone as it deserves a lot of the praise it is getting. So without further ado, here's the download link to the Marketplace.

Sound off in comments on your thoughts!

Metro bus? Metro UI!

Everyone keeps pleading with Microsoft to advertise and push Windows Phone. Well, it looks like it is starting to happen (and we'll see more Monday). This shot was taken by Josh in downtown Bellevue, about a half mile from the Microsoft Store.

Not a bad idea for a metro bus we suppose. And it sure is eye-catching. Thanks Josh for the pic!

HTC taking over the Metro newspaper

We've previously covered HTC advertising in Metro, a popular British newspaper, but it's now extreme. The newspaper offers an advertiser the opportunity to purchase the front and back pages. HTC has now taken not only a full page inside the paper, but the Radar is the first image you see when picking it from the stand.

The Metro newspaper is often read by commuters to and from work, which may prove to be effective audience targeting since businessmen would benefit more with Windows Phone than an iPhone or equivalent Android handset. While it may sound silly, it's fitting that the newspaper shares the same name as the UI.

Kudos to Jay for the images!

Nokia Conversations goes Metro

Nokia Conversations, the official Nokia blog, has received a boost of Metro goodness with a design revamp. They've rethought the structure of the website itself and plan to direct visitors to only the most relevant top stories. Upon visiting Nokia Conversations, you're hit by the top story immediately, with the ability to browse previous issues as if it were a magazine stand.

Check out the video walkthrough of the new design below.

Source: Nokia Conversations

Steve Jobs waged war on Android for copying ideas

This is really interesting. In Walter Isaacson's authorised biography of Steve Jobs, the latest excerpt from the book explained that the Apple co-founder and technology genius was "livid" with HTC's entry with Android.

"I will spend my last dying breath if I need to, and I will spend every penny of Apple’s $40 billion in the bank, to right this wrong," Jobs said. "I’m going to destroy Android, because it’s a stolen product. I’m willing to go thermonuclear war on this."

It did seem strange as to why Apple was relentlessly attacking HTC, Samsung and Android in general, simply because Apple doesn't need the revenue or extra coverage since their products do sell. It all boiled down to Jobs closely guarding Apple's innovation against app-grid-layout copying Android. Jobs also reportedly told Eric Schmidt, Google CEO and former Apple board member:

"I don’t want your money. If you offer me $5 billion, I won’t want it. I’ve got plenty of money. I want you to stop using our ideas in Android, that’s all I want."

Good job... Jobs. Apple continues to attack Android OEMs to keep the pressure on. It makes me wonder if Microsoft should be on the offensive too with Metro UI and how Android has obviously taken some elements from the platform in the past with the recent People app in Ice Cream Sandwich to name one example.

Via: TiPb

Andy Lees: Android copying is flattering

Microsoft's Andy Lees, president of Windows Phone division, has spoken out about Android Ice Cream Sandwich (ICS), particularly the People app. Similarities are present, which was noticeable in the Android ICS video we covered yesterday with Google heavily borrowing from other platforms.

"It's always flattering when someone starts copying you. Fundamentally, their point of view is different. They provide you with a grid of icons and a sea of applications and the more functionality you add, the more complicated and difficult to use the phone becomes."

Even though some parts of Windows Phone are being copied, there's still space for Google to be critical about the platform. Andy moves on to what Matias Duarte said about Windows Phone Metro UI.

"The problem with the Android model is that (when) somebody decides to do something, they hack up the operating system and they make it work. But that puts it (at) a dead end for that device, and that's why phones don't get updated, it's why sometimes they run applications and sometimes they don't."

If you missed the video for Android ICS, check it out after the break. 

Steve Ballmer hits back at Android and praises the iPhone

Google's User Experience Director for Android, Matias Duarte, said about Windows Phone being too forceful everything into a constrained look and feel. While he says that he offers the web, there's no denying that Metro is a beutiful UI and effectively provides content with no pixels wasted to chrome. Even Android took some pointers from Windows Phone (as well as other platforms).

Steve Ballmer, being the legend that he is (see the above image), has lashed back at Android but praises the iPhone to keep it from being a targeted attack. Ballmer mentioned that Android is simply difficult for the user to get into from the off.

"You don’t need to be a computer scientist to use a Windows phone and you do to use and Android phone ... it is hard for me to be excited about the Android phones."

Android fans have taken what he said the wrong way, which is easy to do with words used. Ballmer is talking about the lack of a central design or theme across apps and the system as a whole. It looks like a giant jigsaw puzzle that is built with odd pieces. iOS has a fluid, chrome rich, interface while Windows Phone is the opposite with content, content, and more content wrapped in Metro lingerie.

This sums it up perfectly:

"Both [an iPhone and a Windows phone] are going to feel very good in your hand and both going to look very beautiful physically, but when you grab a Windows phone and use it your information is front and centre and you don’t have to scroll through seas of icons and blah blah blah."

Ballmer goes on to say that the team understands the launch of more competitively priced handsets is a must, but with the Omnia W pricing announced and Nokia coming up shortly, there might be a short wait. Good on you Ballmer, good on you sir.

Source: The Telegraph