I'm a geekette who enjoys playing with new technology for software developers. I work as a Developer Evangelist for Microsoft. My current focus is on machine learning and big data on Azure.
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:
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:
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