Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Metro
METRO IS OUR DESIGN
LANGUAGE. WE CALL IT METRO
  ETRO



BECAUSE IT’S MODERN AND
CLEAN. IT’S FAST AND IN
MOTION. IT’S ABOU...
Metro Principles
Principle: Clean, Light, Open, Fast

Feels Fast and Responsive
Focus on Primary Tasks
Do a Lot with Very Little
Fierce Red...
Principle: Celebrate Typography

Type is Beautiful, Not Just Legible
Clear, Straightforward Information Design
Uncompromis...
Principle: Alive in Motion

Feels Responsive and Alive
Creates a System
Gives Context to Improve Usability
Transition Betw...
Principle: Content, Not Chrome

Delight through Content Instead of Decoration
Reduce Visuals that are Not Content
Contents...
Principle: Authentically Digital

Design for the Form Factor
Don’t Try to be What It’s NOT
Be Direct
Principles

Clean, Light, Open, Fast
Celebrate Typography
Alive in Motion
Content, Not Chrome
Authentically Digital
Who we design for: Anna + Miles

                Anna
                PR professional and busy mom

                “My li...
Metro User Experience

Focuses on the individual and their tasks

Helps organize information and applications
Start




        Glance & Go   Get Me There
Metro
RED THREADS.   THESE ARE
               THE PRINCIPLES
               THAT GUIDE THE
               EXPERIENCES
Weather




 Personal                                     Relevant                                 Connected
 Weather surf...
Build delightful experience

Be inspired by Metro

…but look for balance between the Metro
principles and your own style
Color

Use color to delight the user
Use color to personalize experience
Use color to emphasize hierarchy
Typography

Make words feel welcome

Pay attention to balance,
weight & scale
Motion

Use motion to delight the user

Remember that pacing is important: the more
you use it, the less special it becomes
Make It Easy to Use

Familiar = Easy to use

Provide consistent and predictable experience
Hardware Implications

Hardware buttons

Optional landscape
keyboards

Design for one hand usage
whenever possible
Gestures
Touch

Recommended touch target size is 9mm

Minimum touch target size is 7mm

Minimum spacing between
elements is 2mm

Vi...
Common controls
Application Bar + Menu

Up to 4 icons

Don’t fill all 4 slots if not needed

Swipe up the bar to bring up
the menu
Trigger
Tabs

Separate multiple tasks

Tap or flick tabs to change them

Trigger
Hubs

Rich experience

Aggregate multiple sources
Hubs vs. Single-Page Apps
Iconography

Icons in the application menu
should be consistent

Test icons with users
(pay attention to context)
Expression Blend
developer.windowsphone.com
msdn.se/johan
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Metro and Windows Phone 7
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Introducing Windows Phone 8 Development
Next
Download to read offline and view in fullscreen.

39

Share

Download to read offline

Metro and Windows Phone 7

Download to read offline

Presentation from TechDays 2010, introducing Metro, the design language of Windows Phone 7

Related Books

Free with a 30 day trial from Scribd

See all

Metro and Windows Phone 7

  1. Metro
  2. METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO ETRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.
  3. Metro Principles
  4. Principle: Clean, Light, Open, Fast Feels Fast and Responsive Focus on Primary Tasks Do a Lot with Very Little Fierce Reduction of Unnecessary Elements Delightful Use of Whitespace Full Bleed Canvas
  5. Principle: Celebrate Typography Type is Beautiful, Not Just Legible Clear, Straightforward Information Design Uncompromising Sensitivity to Weight, Balance and Scale
  6. Principle: Alive in Motion Feels Responsive and Alive Creates a System Gives Context to Improve Usability Transition Between UI is as Important as the Design of the UI Adds Dimension and Depth
  7. Principle: Content, Not Chrome Delight through Content Instead of Decoration Reduce Visuals that are Not Content Contents is the UI Direct interaction with the Content Directly
  8. Principle: Authentically Digital Design for the Form Factor Don’t Try to be What It’s NOT Be Direct
  9. Principles Clean, Light, Open, Fast Celebrate Typography Alive in Motion Content, Not Chrome Authentically Digital
  10. Who we design for: Anna + Miles Anna PR professional and busy mom “My life is a balancing act between work, family, friends, and my own personal needs.” Miles Growing his own architectural biz “I love running my life real-time so I can take advantage of whatever is inspiring me…whether it’s a new project, a pick up game or a stolen moment with Anna.”
  11. Metro User Experience Focuses on the individual and their tasks Helps organize information and applications
  12. Start Glance & Go Get Me There
  13. Metro
  14. RED THREADS. THESE ARE THE PRINCIPLES THAT GUIDE THE EXPERIENCES
  15. Weather Personal Relevant Connected Weather surfaced on the live tile in Start Weather updated based on your location Weather for your contacts
  16. Build delightful experience Be inspired by Metro …but look for balance between the Metro principles and your own style
  17. Color Use color to delight the user Use color to personalize experience Use color to emphasize hierarchy
  18. Typography Make words feel welcome Pay attention to balance, weight & scale
  19. Motion Use motion to delight the user Remember that pacing is important: the more you use it, the less special it becomes
  20. Make It Easy to Use Familiar = Easy to use Provide consistent and predictable experience
  21. Hardware Implications Hardware buttons Optional landscape keyboards Design for one hand usage whenever possible
  22. Gestures
  23. Touch Recommended touch target size is 9mm Minimum touch target size is 7mm Minimum spacing between elements is 2mm Visual size is 60-100% of the touch target size
  24. Common controls
  25. Application Bar + Menu Up to 4 icons Don’t fill all 4 slots if not needed Swipe up the bar to bring up the menu Trigger
  26. Tabs Separate multiple tasks Tap or flick tabs to change them Trigger
  27. Hubs Rich experience Aggregate multiple sources
  28. Hubs vs. Single-Page Apps
  29. Iconography Icons in the application menu should be consistent Test icons with users (pay attention to context)
  30. Expression Blend
  31. developer.windowsphone.com
  32. msdn.se/johan
  • HenryXuBEngHonsMScMI

    Aug. 10, 2016
  • christianbernando

    Nov. 11, 2013
  • MuhNaa

    Mar. 25, 2013
  • abhix09

    Feb. 13, 2013
  • ntnleao

    Jan. 8, 2013
  • paultrow

    Dec. 17, 2012
  • markusokur

    May. 9, 2012
  • shashwat2010

    Apr. 18, 2012
  • aakaike

    Mar. 9, 2012
  • jennyhao

    Jan. 29, 2012
  • weiying

    Jan. 27, 2012
  • kathykavan

    Jan. 19, 2012
  • takelog3000

    Oct. 22, 2011
  • dmolsenwvu

    Oct. 20, 2011
  • villaumbrales

    Sep. 15, 2011
  • kannect

    Jul. 7, 2011
  • janevalee

    May. 18, 2011
  • t32k

    Apr. 21, 2011
  • hayatomizuno

    Apr. 20, 2011
  • KTdesigner

    Apr. 8, 2011

Presentation from TechDays 2010, introducing Metro, the design language of Windows Phone 7

Views

Total views

32,495

On Slideshare

0

From embeds

0

Number of embeds

3,198

Actions

Downloads

1,040

Shares

0

Comments

0

Likes

39

×