Successfully reported this slideshow.

Metro design primer

639 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Metro design primer

  1. 1. application design for windowsphoneme paul laberge developer advisor microsoft canada @plaberge paul.laberge@microsoft.com
  2. 2. AGENDAwhat we will talk about today METRO THE RIGHT WAY MAKING USERS AWESOME IN THE MOMENT
  3. 3. metro awesommetro principles tweaking existing conceptssystem navigation and hierarchy the design philosophy of gpage structurevisual designcreating a user journeyattract, delight, retainpaving the cowpaths …
  4. 4. METRO THE RIGHT WAYiconographic vs infographicwas iconographicreal world tools and objects are used as metaphorshyper realism is the dominant aesthetictranslation of content from analog to digitalfocus on techniques for manipulating and organizing contentour digital thingsnow infographiccontent represented as it existscontent is assumed to be interactiveaugment people, objects, places and data with relevant informationfocus on seamless overlay of information and thoughtless interactionour digital selves
  5. 5. METRO THE RIGHT WAYmetro principlesclean, light, open, fastcelebrate typographyalive and in motioncontent not chromeauthentically digital
  6. 6. METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps loops, phantom pagesbe predictableintegrated experiences
  7. 7. METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps loops, phantom pagesbe predictableintegrated experiences
  8. 8. METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps, loops and phantom pagesbe predictableintegrated experiences
  9. 9. METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps, loops and phantom pagesbe predictableintegrated experiences
  10. 10. METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps, loops and phantom pagesbe predictableintegrated experiences
  11. 11. METRO THE RIGHT WAYvisual designapply metro first, then inject branddesign on a gridreduce cluttermatch negative space and marginsutilize white space, typographic scale to guide the eyeuse native apps as a guidedon’t re-invent the wheela platform on which to innovatedesign for touch
  12. 12. METRO THE RIGHT WAYpivot and panoramapivots areefficientfocusedhabitualdeep and data-drivenpanoramas areexpansiveexplorativedynamicshallow and artful
  13. 13. awesome metro metro principlestweaking existing concepts system navigation athe design philosophy of great apps page structure visual design creating a user jour attract, delight, reta paving the cowpath …
  14. 14. MAKING USERS AWESOME IN THE MOMENTSometimes all you need is a disguise – tweak existingconcepts here’s a dirty little secret: fighting games like street fighter and mortal kombat are essentially rock-paper-scissors.
  15. 15. MAKING USERS AWESOME IN THE MOMENTThe design philosophy of great apps… …isn’t all that different across the competitive mobile platforms. great apps: don’t make us think about their interfaces deal with complex tasks, but insulate us from that complexity make accomplishing our goals easier help users be awesome in the moment
  16. 16. go-do’s • Download the free tools at http://create.msdn.com • Sign up for an App Hub Membership (also at http://create.msdn.com) • Check out MS Canada’s WP7.5 Dev Resource Page: http://blogs.msdn.com/b/cdnmobiledevs/p/wpdevres.aspx • Build and publish 2 apps by December 15, get a free Windows Phone! Details at http://microsoft.ca/mangoappchallenge • Canadian Developer Connection LinkedIn Group: http://www.linkedin.com/groups/Canadian-Developer-Connection- 3398140?gid=3398140&trk=hb_side_g
  17. 17. Here’s the deal: Build and publish 2 new, quality Windows Phone apps to the Marketplace by December 15, 2011 and we will give you a phone. It’s that simple. https://microsoft.ca/mangoappchallenge a.k.a. http://bit.ly/o572Jt17
  18. 18. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

×