Saturday, January 21, 2012

Metro Design

A Windows applications UI is not changed for many years.  The recent big change was office Ribbon.  Now there is major shift in UI design which is Metro style design. Metro design is already adopted completely in Windows Phone 7, Zune.  Windows 8 will also be based on Metro design.  The design is from the inspiration of sign boards in Metro cities.  Hence the name.
 
Principles
  • Light & simple: No glassy buttons are rich graphics.  Simple flat graphics
  • Typography: Beauty is given importance, Have specific type (ex Segoe) use at various weightages to have textual hierarchy
  • Motion: The lively of the application is given importance, little animation added for every user interface and page transitions
  • Content, not chrome: Important is for the content not for controls, so unnecessary controls are removed, so no more scroll bar for a list, a list it self can be scrollable.
  • Honesty: It is unique and new style
Design Language
Principles talks about abstract concepts language takes a shape. 
  • Navigation: Pivot & Panaroma
  • Motion: Animations
  • Iconography: Flat icon set
  • Images & Photos
  • Themes & Personalization
  • Touch Gestures & Targets
  • UI controls: Application Bar, Application Bar Menu
  • Hardware
  • Services
  • Marketplace and Branding
Tutorial: http://blendinsider.com/tutorial/blend-tutorial-part-1-design-your-first-metro-style-app-with-javascript-html5-css-2012-1-20/
For more detail check out Channel 9MSDN, Blog Reference

No comments:

Post a Comment

Teams PowerShell

 The PowerShell helps to get quick meta data around Teams. Install-Module -Name MicrosoftTeams Connect-MicrosoftTeams Get-TeamAllChannel...