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.
