Click here to Skip to main content
Click here to Skip to main content

Tagged as

Metro UI at it's best: Designing beautiful interfaces for Windows Phone

, 14 Feb 2012
Rate this:
Please Sign up or sign in to vote.
Metro UI is Microsoft's new proposition for designing graphical user interfaces.

Metro UI is Microsoft's new proposition for designing graphical user interfaces. It is a typography-based design language where content is the primary element of the application. Metro is not about decorating. It is about communicating. After all, communication is the primary aim of any properly designed application. Metro suggests focusing on the content rather than in any verbose complex visuals.

Actually, content is the UI.

Let me repeat that: Content is the UI. This means that all the design effort should be spent on making the content shine. Users care about what your application has to offer them and enhancing your application content results in better user experience, so remember this rule of thumb for your next app.

A lot of people argue whether Metro UI is pretty or ugly. Well, guess what: Metro is neither pretty nor ugly! It is an artifact we need to extend and not a matter of taste. The applications we design range from stunning to awful, so Metro's simplicity should not be confused with the rough creation of user interfaces. Having the ability to drag and drop UI elements on a canvas doesn't mean you should design without a plan.

It is really hard to create a simple but usable user interface. Do not be lazy.

Designing for Windows Phone: an example

I recently published an application developed for the famous fashion designer Vassilis Zoulias. Designing fashion apps is quite tricky. They usually require high quality graphics and a glamorous, elegant approach which should not look cliché or cheap. I needed to adapt the elegancy of a fashion designer to the elegancy of Metro. Download the app to view the final result. Here are some screenshots:

The design is simple, follows the Metro principles and utilizes the fashion designer's work for its visuals. The application background is not a static image. It is a video demonstrating one of Zoulias' catwalks!

Inspiration

The application does not use the common system styles. The main page's list is inspired by the Marketplace hub: square icons, very bold headings, light subheadings, all uppercase.

Innovation

There are a few features that make the application stunning:

  • Use of video for the background

    Considering the background of the main page, using a single color is OK. Using a faded image is even better. Using a video is unique. Be careful, though, in order to avoid irrelevant visuals that have nothing to do with the application. The video used here is content. It demonstrates a catwalk, one of the fashion industry's trademarks!

  • Use of relevant background images for the subcategories

    Considering the subcategories, a faded image is placed depicting a relevant creation of the fashion designer. Why bothering of colors when having so great visuals?

  • Constantly changing live tiles

    Live tiles is another great way for enhancing content. Live tiles are used to inform the user about a specific change. On a fashion application, there are no changes occurring, so I decided to randomly display different dresses, shoes and bags on the live tile!

  • Instant contact options

    When designing a contact page, do not just type contact details. Make them responsive: in Vassilis Zoulias application, you can make a phone call when tapping on the phone number and you can navigate to the map when tapping on the address!

Tips & best practices

You just show a few ways of making your Metro applications prettier. Here are a few more suggestions for your next gorgeous app:

  • Use images instead of single colors - it is less boring
  • Animate page transitions - it is smoother
  • Make your tiles live - people will love it
  • Use footers in order to distinguish between different categories
  • Change the default font colors (black and white are not your only options)
  • Afford a lot of hours designing the icons and thumbnails (really, a lot)
  • Make proper use of Panorama and Pivot controls
  • Last but not least, read a few books on usability and design

Did you find this article helpful? I encourage you to comment and provide suggestions or your own best practices!

Many thanks to Galini Scarlatou for designing the stunning visuals. Smile | :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Vangos Pterneas
Product Manager LightBuzz
United Kingdom United Kingdom
Vangos Pterneas is a Microsoft Most Valuable Professional in the Kinect technology. He helps companies from all over the world grow their revenue by creating profitable software products. Vangos is the owner of LightBuzz Software agency and author of two technical books.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberKamlesh R. Sanchla17-Feb-12 7:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140821.2 | Last Updated 14 Feb 2012
Article Copyright 2012 by Vangos Pterneas
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid