Windows 8 Metro Design Guidelines

As much for my own reference as anything else …. 

Metro style design has a set of five guiding principles to help you make the best choices when designing your app. These principles are the foundation for building great Metro style apps. Consider these principles as you plan your app, and always ensure your design and development choices live up to these principles.

 

Show pride in craftsmanship

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.

Be 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 colours 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 colours.
  • Use motion meaningfully.

Do more with less

You can do more with less by reducing your design to its essence, and solving for distractions, not discoverability. Create a clean and purposeful experience by leaving only the most relevant elements on screen so people can be immersed in the content.

  • 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.

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.

 

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.

 

(Reproduced from http://msdn.microsoft.com/en-us/library/windows/apps/Hh781237.aspx)

Update

It occurred to me that it would be useful to have some kind of a ‘Windows 8 feature Check’ for new Apps along the lines of ‘have I considered this new feature for my own App’.  I was about to craft such a blog post when I stumbled on this excellent post from Microsoft:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465424

Advertisements

~ by Ian on April 11, 2012.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: