Metro Design Principles
-
Upload
iacob-razvan -
Category
Documents
-
view
37 -
download
2
description
Transcript of Metro Design Principles
PowerPoint Presentation
metro design principles Laurent BugnionSenior Director, Europe, [email protected] LBugnion
WINDOWS METROmetro vs metrometro design languageWhat we are talking about nowA design language used in multiple properties(Zune, Windows Phone, XBOX, Windows 8)metro style applicationsA type of applications running on Windows 8Immersive applicationsTailored applicationswhere do we come from?CHAPTER 1metro design principles laurent bugnion
WINDOWS METROdesign inspirationsbauhausGermany, 1920sDesign and ArchitectureReductionism, FunctionalityStrip excessive decorationThe world is changing
DESIGN INSPIRATIONSbauhaus
DESIGN INSPIRATIONSbauhaus
WINDOWS METROdesign inspirationsswiss typographyForm follows functionObjectivity and simplicityReadibility and legibilitySans-serifUse of grids, rules, conventions
DESIGN INSPIRATIONSswiss typography
DESIGN INSPIRATIONSswiss typography
DESIGN INSPIRATIONSswiss typography sans serifsegoe uiTimesNewRomanboldsemilightsemiboldlightDESIGN INSPIRATIONSmotion designsaul basshttp://www.youtube.com/watch?v=lAmem5wVOUU
kinetic typographyhttp://www.youtube.com/watch?v=47NbXRq2dlI
13
16THE FIVE DESIGN PRINCIPLESpride in craftsmanshipthink of quality, always Design is nothing without performancePerformance is nothing without featuresFeatures are nothing without designbalance, symmetry, hierarchyalignments, Grids1THE FIVE DESIGN PRINCIPLESfast and fluidmobility, motion, touchDesigning for touch is differentintuitive, responsiveNobody likes to waitimmersive, compelling, delight2
3
THE FIVE DESIGN PRINCIPLESauthentically digitalembrace the reality of the computerSkeuomorphismTHE FIVE DESIGN PRINCIPLESdo more with lessbe great at somethingdont solve all the worlds problemskeep focused, inspire confidencecontent is king4THE FIVE DESIGN PRINCIPLESwin as onebe consistentPeople dont want to learn new things all the timeLearn and use the gesturesUse common UIcollaborateShare with other appsUse contractstools and templates5metro in the wildCHAPTER 2metro design principles laurent bugnion
http://www.5min.com/Video/E3-2011-New-Xbox-Live-Dashboard-First-Look-517083188windows phone: sbb mobile
windows phone: twitter
windows phone: twitter
windows phone: imdbwindows phone: imdb
windows phone: foodspotting
windows phone: foodspottingdiscovering windows 8CHAPTER 3metro design principles laurent bugnion
Win-C CharmsWin-I SettingsWin-Q, W, F Search
os wide gesturescommon location for settingswork with other apps, contractslive tilesa consistent experiencehow do we do?CHAPTER 4metro design principles laurent bugnion
44
45
46
47
48
49
50
51
52
templates are here to help
new controlsGridViewListViewJumpViewer
use expression blend
ask professionals
finding help
54bold colorsPURPLERGB 162 0 255#FF0097MAGENTARGB 255 0 151#A200FFTEALRGB 0 171 169#00ABA9LIMERGB 140 191 38#8CBF26BROWNRGB 160 80 0#A05000PINKRGB 230 113 184#E671B8ORANGERGB 240 150 9#F09609BLUERGB 27 161 226#1BA1E2REDRGB 229 20 0#E51400GREENRGB 51 153 51#339933authentically digital icons
http://timheuer.com/blog/archive/2012/03/05/visualizing-appbar-command-styles-windows-8.aspxhttp://icons8.com/download-huge-windows8-set/
http://www.syncfusion.com/downloads/metrostudio
http://blog.galasoft.chhttp://www.galasoft.chhttp://www.identitymine.com
@LBugnion
2012 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.4/6/2012 9:55 PM58 2010 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.