Microsoft has a design language which is codenamed “Metro”.  If you are wondering about the origin of the codename, let me tell you a true story (that will seem way off topic, but I’ll come back).  When my husband was working on his PhD, he submitted papers to conferences all over the world, and when he was presenting at a conference in an interesting location, I would sometimes tag along.  On one occasion, he was accepted to a conference in Japan.  I’ve always wanted to visit Japan, so I went with him and explored by myself while he was at the conference.  I know maybe 10 words of Japanese, and yet, I was able to use the public transportation and get around just fine. 

This is where the name “Metro” came from.  Think about the signage commonly used in public transport systems (like a *Metro* transit system).  It is very simple and clear, with heavy use of iconography and clean typography to convey information.  Even someone who doesn’t know the native language can figure out what to do.  And that’s exactly how our experience with computers should be. 

Some of my teammates have already published beautiful posts on the importance of design:

• G. Andrew Duthie: Why Developers Should Care About Design, and How Metro Helps
• Brandon Satrom: What is Metro, really? 

So go read those, and then let’s focus on how to apply design as a developer. 

First of all, Jensen Harris did a great talk at BUILD on “The 8 traits of great Metro-style apps”.  Those 8 traits are:

1. Metro style design
2. Fast and fluid
3. Snap and scale beautifully
4. Use the right contracts
5. Invest in a great Tile
6. Feel connected & alive
7. Roam to the cloud
8. Embrace Metro principles

As we start coding, I’ll keep coming back to these principles and show how we are applying them in the app that I’m building.  One of the biggest Metro design principles is “content before chrome”, meaning to immerse the user in the content of the application, rather than cluttering up the UI with extraneous layout elements, buttons, and navigation.  Metro-style applications run full-screen in this immersive experience. 

Finally, here are the tips that have helped me as a developer to create better design:

Use the resources at http://design.windows.com.  There is design guidance, case studies, and design assets (such as .psd files for Photoshop).  In particular, I like this food truck case study which walks through the process of converting a website to a Metro-style app, showing the before and the after. 

I visit the UX guidelines regularly.  The other day I was trying to figure out the best way to input some text fields in a Metro app, and I found this guidance for text input which gave me checklists, guidance on which controls to use, and some common “do’s” and “don’ts”. 

The Visual Studio templates will help you get there.  If you start from the Grid or Split template in Visual Studio Express 2012 for Windows 8, you will begin with good Metro design.  The templates have navigation, animations, and font hierarchies already in place. 

In the next post, we’ll start coding. 

Other blog posts in this series:

Part 1: Why Would You Want to Develop a Metro Application for Windows 8?

Part 2: Getting Started

Part 3: Metro Design

Part 4: My "Reveal a Picture" Algorithm and Basic Code