Metro design primer
Upcoming SlideShare
Loading in...5
×
 

Metro design primer

on

  • 602 views

 

Statistics

Views

Total Views
602
Views on SlideShare
601
Embed Views
1

Actions

Likes
0
Downloads
9
Comments
0

1 Embed 1

http://www.verious.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Metro design primer Metro design primer Presentation Transcript

  • application design for windowsphoneme paul laberge developer advisor microsoft canada @plaberge paul.laberge@microsoft.com
  • AGENDAwhat we will talk about today METRO THE RIGHT WAY MAKING USERS AWESOME IN THE MOMENT
  • metro awesommetro principles tweaking existing conceptssystem navigation and hierarchy the design philosophy of gpage structurevisual designcreating a user journeyattract, delight, retainpaving the cowpaths … View slide
  • 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 View slide
  • METRO THE RIGHT WAYmetro principlesclean, light, open, fastcelebrate typographyalive and in motioncontent not chromeauthentically digital
  • METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps loops, phantom pagesbe predictableintegrated experiences
  • METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps loops, phantom pagesbe predictableintegrated experiences
  • METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps, loops and phantom pagesbe predictableintegrated experiences
  • METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps, loops and phantom pagesbe predictableintegrated experiences
  • METRO THE RIGHT WAYsystem navigation and hierarchyhub and spoke modeltrust the hardwareavoid traps, loops and phantom pagesbe predictableintegrated experiences
  • 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
  • METRO THE RIGHT WAYpivot and panoramapivots areefficientfocusedhabitualdeep and data-drivenpanoramas areexpansiveexplorativedynamicshallow and artful
  • 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 …
  • 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.
  • 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
  • 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
  • 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
  • © 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.