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!
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.
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. :-)