Windows 8 Metro : 5 style design principles

Today, Twipe attended the Windows 8 Metro UX Workshop organised by Microsoft Belux. This is what we have learned to take into consideration if you want to develop a successful Metro app.

The metro style design is based on 5 principles:

  1. Do more with less
  2. Pride in Craftmanship
  3. Be fast and fluid
  4. Authentically digital
  5. Win as one


Do more with less

If the whole day should be recapitulated in 1 sentence, it would be the following:

 ” Content before Chrome”.

Desktop browsers have quite a lot of chrome (menus, options, status bars, and so on) that is only sometimes useful. Typically, however, users open a browser to see a webpage, not to interact with the browser. Moving commands off the browser chrome and into the app bar or into charms helps users focus on what they care about.

Avoid the extra framing in an application, like toolbars, menus, etc. Metro apps have no “chrome” – the pixels are all for your app and what its supposed to do. You should be conscious not to clutter your canvas with controls for a metro app – limit it to commands that are common, important, and frequently used.

  • Be great at something instead of mediocre at many things.
  • Put content before chrome.
  • Be visually focused and direct, letting people get immersed in what they love, and they will explore the rest.
  • Inspire confidence in users.


Pride in Craftmanship

Devote time and energy to small things that are seen often by many of your users, and engineer the experience to be complete and polished at every stage.

  • Sweat the details.
  • Make using apps safe and reliable.
  • Use balance, symmetry, and hierarchy to foster trust and a sense of integrity.
  • Align your app layout to the grid, the classic Metro style layout for apps.


Be Fast and Fluid

Let people interact directly with content, and respond to actions quickly with matching energy. Bring life to the experience by creating a sense of continuity and telling a story through meaningful use of motion.

  • Be responsive to user interaction and ready for the next interaction.
  • Design for touch and intuitive interaction.
  • Delight your users with motion.
  • Create a UI that is immersive and compelling.


Authentically digital

Take full advantage of the digital medium. Remove physical boundaries to create experiences that are more efficient and effortless than reality. Being authentically digital means embracing the fact that apps are pixels on a screen and designing with colors and images that go beyond the limits of the real world.

  • Connect to the cloud so that your users can stay connected to each other.
  • Be dynamic and alive with communication.
  • Use typography beautifully.
  • Use bold, vibrant colors.
  • Use motion meaningfully.


Win as One

Work with other apps, devices, and the system to complete scenarios for people, like picking content from one app and sharing it with another. Take advantage of what people already know, like standard touch gestures and charms, to provide a sense of familiarity, control, and confidence.

  • Fit into the UI model.
  • Reduce redundancy in your UI.
  • Work with other apps to complete scenarios by participating in app contracts.
  • Use our tools and templates to promote consistency.


Further reading