metro design primer
TRANSCRIPT
application design for windows phone
paul labergedeveloper advisormicrosoft [email protected]@microsoft.com
me
what we will talk about today
AGENDA
METRO THE RIGHT WAY
MAKING USERS AWESOME IN THE MOMENT
metro awesom
…
metro principles
system navigation and hierarchy
page structure
visual design
creating a user journey
attract, delight, retain
paving the cowpaths
tweaking existing concepts
the design philosophy of g
iconographic vs infographic
METRO THE RIGHT WAY
was iconographicwas iconographicwas iconographicwas 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 things
now now now now infographicinfographicinfographicinfographiccontent 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
metro principles
METRO THE RIGHT WAY
clean, light, open, fast
celebrate typography
alive and in motion
content not chrome
authentically digital
system navigation and hierarchy
METRO THE RIGHT WAY
hub and spoke model
trust the hardware
avoid traps loops, phantom pages
be predictable
integrated experiences
system navigation and hierarchy
METRO THE RIGHT WAY
hub and spoke model
trust the hardware
avoid traps loops, phantom pages
be predictable
integrated experiences
system navigation and hierarchy
METRO THE RIGHT WAY
hub and spoke model
trust the hardware
avoid traps, loops and phantom pages
be predictable
integrated experiences
system navigation and hierarchy
METRO THE RIGHT WAY
hub and spoke model
trust the hardware
avoid traps, loops and phantom pages
be predictable
integrated experiences
system navigation and hierarchy
METRO THE RIGHT WAY
hub and spoke model
trust the hardware
avoid traps, loops and phantom pages
be predictable
integrated experiences
visual design
METRO THE RIGHT WAY
apply metro first, then inject brandapply metro first, then inject brandapply metro first, then inject brandapply metro first, then inject branddesign on a gridreduce cluttermatch negative space and marginsutilize white space, typographic scale to guide the eye
use native apps as a guideuse native apps as a guideuse native apps as a guideuse native apps as a guidedon’t re-invent the wheela platform on which to innovatedesign for touch
pivot and panorama
METRO THE RIGHT WAY
pivots arepivots arepivots arepivots areefficientfocusedhabitualdeep and data-driven
panoramas arepanoramas arepanoramas arepanoramas areexpansiveexplorativedynamicshallow and artful
awesome metro
…
metro principles
system navigation a
page structure
visual design
creating a user jour
attract, delight, reta
paving the cowpath
tweaking existing concepts
the design philosophy of great apps
Sometimes all you need is a disguise – tweak existing concepts
MAKING USERS AWESOME IN THE MOMENT
here’s a dirty little secret: fighting games like street fighter and mortal kombatare essentially rock-paper-scissors.
The design philosophy of great apps…
MAKING USERS AWESOME IN THE MOMENT
…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 momentawesome in the momentawesome in the momentawesome in the moment
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
1
7
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
http://bit.ly/o572Jt
a.k.a.
© 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.