metro design primer

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


METRO THE RIGHT WAY

hub and spoke model

trust the hardware

avoid traps loops, phantom pages

be predictable

integrated experiences


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


here’s a dirty little secret: fighting games like street fighter and mortal kombatare essentially rock-paper-scissors.

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 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.

metro design primer

Technology