Download as PDF, PPTX
Uploaded byAndy Chiang
Metro design primer
The document discusses best practices for designing applications for Windows phones using the Metro design philosophy. It covers principles like clean and minimalist design, using typography and white space to guide users. Specific guidelines addressed include a hub and spoke navigation model, avoiding confusing elements, and designing for touch. The document emphasizes making the interface intuitive so users can accomplish their goals with ease.
More Related Content
Metro design primer
- 1. application design forwindows phone me paul laberge developer advisor microsoft canada @plaberge paul.laberge@microsoft.com
- 2. AGENDA what we willtalk about today METRO THE RIGHT WAY MAKING USERS AWESOME IN THE MOMENT
- 3. metro awesom metro principles tweaking existing concepts system navigation and hierarchy the design philosophy of g page structure visual design creating a user journey attract, delight, retain paving the cowpaths …
- 4. METRO THE RIGHTWAY iconographic vs infographic was iconographic real world tools and objects are used as metaphors hyper realism is the dominant aesthetic translation of content from analog to digital focus on techniques for manipulating and organizing content our digital things now infographic content represented as it exists content is assumed to be interactive augment people, objects, places and data with relevant information focus on seamless overlay of information and thoughtless interaction our digital selves
- 5. METRO THE RIGHTWAY metro principles clean, light, open, fast celebrate typography alive and in motion content not chrome authentically digital
- 6. METRO THE RIGHTWAY system navigation and hierarchy hub and spoke model trust the hardware avoid traps loops, phantom pages be predictable integrated experiences
- 7. METRO THE RIGHTWAY system navigation and hierarchy hub and spoke model trust the hardware avoid traps loops, phantom pages be predictable integrated experiences
- 8. METRO THE RIGHTWAY system navigation and hierarchy hub and spoke model trust the hardware avoid traps, loops and phantom pages be predictable integrated experiences
- 9. METRO THE RIGHTWAY system navigation and hierarchy hub and spoke model trust the hardware avoid traps, loops and phantom pages be predictable integrated experiences
- 10. METRO THE RIGHTWAY system navigation and hierarchy hub and spoke model trust the hardware avoid traps, loops and phantom pages be predictable integrated experiences
- 11. METRO THE RIGHTWAY visual design apply metro first, then inject brand design on a grid reduce clutter match negative space and margins utilize white space, typographic scale to guide the eye use native apps as a guide don’t re-invent the wheel a platform on which to innovate design for touch
- 12. METRO THE RIGHTWAY pivot and panorama pivots are efficient focused habitual deep and data-driven panoramas are expansive explorative dynamic shallow and artful
- 13. awesome metro metro principles tweaking existing concepts system navigation a the design philosophy of great apps page structure visual design creating a user jour attract, delight, reta paving the cowpath …
- 14. MAKING USERS AWESOMEIN THE MOMENT Sometimes all you need is a disguise – tweak existing concepts here’s a dirty little secret: fighting games like street fighter and mortal kombat are essentially rock-paper-scissors.
- 15. MAKING USERS AWESOMEIN THE MOMENT The 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. go-do’s • Downloadthe 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. 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/o572Jt 1 7
- 18. © 2011 MicrosoftCorporation. 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.