Upload
shane-morris
View
7.465
Download
0
Tags:
Embed Size (px)
DESCRIPTION
My presentation from Microsoft Campfile in Singapore in April 2012. (Edited down to fit the 10MB limit.)
Citation preview
Shane MorrisAutomatic Studio
ALL ABOARD: The Metro Design Language and what it Means to you
METRO DESIGN LANGUAGE 2
a bit about meSHANE MORRIS
METRO IS OUR DESIGN LANGUAGE. WE CALL IT METRO BECAUSE IT’S MODERN AND CLEAN. IT’S FAST AND IN MOTION. IT’S ABOUT CONTENT AND TYPOGRAPHY. AND IT’S ENTIRELY AUTHENTIC.
the evolution of metro
the evolution of metro
the evolution of metro
METRO DESIGN LANGUAGE 7
the evolution of metro
metro inspiration
metro influencesMODERN DESIGN - BAUHAUS
INTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGN
MOTION DESIGN – CINEMATOGRAPHY
METRO DESIGN LANGUAGE 11
modern designFORM FOLLOWS FUNCTION
MASS PRODUCTIONNow: Mass digitisation
INFLUENCES
historiarte1.wikispaces.com
international styleINFORMATION IS BEAUTIFUL
INFLUENCES
wikimedia.org
motion designMOTION DESIGN IS QUINTESSENTIALLY MODERN
INFLUENCES
Saul Basshttp://www.youtube.com/watch?v=jIlqatMQSgI
metro principles – windows 8PRIDE IN CRAFTSMANSHIP
BE FAST AND FLUID
AUTHENTICALLY DIGITAL
DO MORE WITH LESS
WIN AS ONE
pride in craftsmanshipSWEAT THE DETAILS
MAKE IT SAFE AND RELIABLE
BALANCE, SYMMETRY, HIERARCHY
ALIGN TO THE GRID
LOOK LIKE YOU BELONG
PRINCIPLES
be fast and fluidLIFE IS MOBILE
DELIGHT WITH MOTION
DESIGN FOR TOUCH
INTUITIVE INTERACTION
BE RESPONSIVE AND READY
IMMERSIVE AND COMPELLING
ORIENT WITH MOTION
PRINCIPLES
authentically digitalCLOUD CONNECTED
DYNAMIC AND ALIVE
BEAUTIFUL USE OF TYPOGRAPHY
BOLD VIBRANT COLORS
MOTION
PRINCIPLES
do more with lessBE GREAT AT SOMETHING
FOCUSED AND DIRECT
CONTENT BEFORE CHROME
INSPIRE CONFIDENCE
PRINCIPLES
win as oneFIT INTO THE UI MODEL
REDUCE REDUNDANCY
WORK TOGETHER TO COMPLETE SCENARIOS
TOOLS AND TEMPLATES ARE DESIGNED TO SCALE
PRINCIPLES
what metro means
METRO DESIGN LANGUAGE 21
the metro secretLOOKS EASY, EH?
BUT YOUR MISTAKES ARE EVEN MORE OBVIOUS
LESS VISUAL DEVICES TO Direct attention Communicate grouping Delight Brand
metro is more than just a visual styleATTITUDEFast, light…
NAVIGATION STYLE AND STRUCTURE
INTERACTION STYLE AND STRUCTURE
SILHOUETTE
VISUAL LANGUAGE
LIKE ALL GOOD DESIGN, DESIGNING FOR METRO DOES NOT START WITH VISUALS
THE METRO SECRET
METRO DESIGN LANGUAGE 23
getting metro rightCONTENT BEFORE CHROME
FUNCTIONAL MINIMALISM
FLATTER, WIDER NAVIGATION
INFORMATION HIERARCHY
PLATFORM CONVENTIONS
SHANE’S TIPS
METRO DESIGN LANGUAGE 24
content before chromeLET THE CONTENT BE THE INTERFACEBe trustworthy
MOVE COMMANDS TO THE APP BAR
GETTING METRO RIGHT
functional minimalismBE GOOD AT A LITTLE
CONSIDER TOUCH INTERFACE ‘POSTURE’Lean back
MY APP IS THE BEST APP AT…
THE DESKTOP UI STILL HAS A PLACE
GETTING METRO RIGHT
METRO DESIGN LANGUAGE 30
flatter, wider navigationFEWER ORIENTATION CUES(Breadcrumbs)
LEVERAGE PANORAMA / GRIDSpatial memorySearch plus Browse
BE TRUE TO PLATFORM
GETTING METRO RIGHT
hierarchical navigationFLATTER, WIDER NAVIGATION
flat navigationFLATTER, WIDER NAVIGATION
METRO DESIGN LANGUAGE 33
the panorama / gridFLATTER, WIDER NAVIGATION
METRO DESIGN LANGUAGE 34
information hierarchyCOMMUNICATE A CLEAR HIERARCHY OF INFORMATIONTools Typography
size colour weight
Alignment Whitespace
GETTING METRO RIGHT
platform conventionsVISUAL STYLE
LAYOUT
ICONOGRAPHY AND TYPOGRAPHY
INTERACTION
NAVIGATION
ANIMATION
CONTRACTS
LOOK LIKE YOU BELONG
METRO (WINDOWS 8) UX GUIDELINESmsdn.microsoft.com/en-us/library/windows/apps/hh779072.aspx
GETTING METRO RIGHT
METRO DESIGN LANGUAGE 36
visual styleTHE ROLE OF VISUAL DESIGN1. Communicate 2. Evoke3. Decorate
PLATFORM CONVENTIONS
METRO DESIGN LANGUAGE 37
brandingVISUAL STYLE
brandingUSE SEGOE, OR YOUR COMPANY TYPEFACE, PROBABLY NOT BOTH
COMPANY COLOURS
BRAND IMAGERY
BRAND IS A CONVERSATION BETWEEN YOU AND YOUR CUSTOMERSNot just Colours Fonts Logos
VISUAL STYLE
METRO DESIGN LANGUAGE 39
layoutWHAT IS YOUR SILHOUETTE?
PLATFORM CONVENTIONS
METRO DESIGN LANGUAGE 41
layoutSTANDARD TEMPLATESBuilt into Blend and Visual StudioBehind everything: the grid
PLATFORM CONVENTIONS
reactive designLAYOUT
Snap view (320px - required)
Minimum (1024x768px)
iconographyICONS IN THE APPLICATION MENU SHOULD BE CONSISTENT
TEST ICONS WITH USERS (pay attention to context)
PLATFORM CONVENTIONS
METRO DESIGN LANGUAGE 49
typography - fontsWINDOWS 8Segoe UI Controls and UI elementsCalibri read/writeCambria reading
http://msdn.microsoft.com/en-us/library/windows/apps/hh700394.aspx
WINDOWS PHONESegoe WPSegoe WP Light only for large text
PLATFORM CONVENTIONS
type sizes (windows 8)
METRO DESIGN LANGUAGE 51
typography - hierarchyPLATFORM CONVENTIONS
size
colour
CASE
alignment alignmentweight
proximitycolour
proximity
METRO DESIGN LANGUAGE 52
interactionSTANDARD CONTROLS
STANDARD GESTURES
PLATFORM CONVENTIONS
METRO DESIGN LANGUAGE 53
animationMOTION DELIGHTS THE USER
MOTION ADDS HINTS TOWARDS INTERACTION
MOTION MASKS SLOW PERFORMANCE
MOTION ADDS PERSONALITY
MOTION ADDS CONSISTENCY
MOTION ADDS ELEGANCE.
msdn.microsoft.com/en-us/library/hh202871(v=vs.92).aspx
USE MOTION TO DELIGHT THE USER
REMEMBER THAT PACING IS IMPORTANT: THE MORE YOU USE IT, THE LESS SPECIAL IT BECOMES
RESPECT STANDARD ANIMATIONS
PLATFORM CONVENTIONS
contracts – windows8SEARCH
SHARE
SETTINGS
PICKER
PLATFORM CONVENTIONS
METRO DESIGN LANGUAGE 55
SUMMARY
summaryMETRO PRINCIPLESPride in craftsmanshipBe fast and fluidAuthentically digitalDo more with lessWin as one
PLATFORM CONVENTIONSVisual styleLayoutTypographyInteractionAnimationContracts
resourcesDESIGNING UX FOR APPS (WINDOWS 8)msdn.microsoft.com/library/windows/apps/hh779072/
USER EXPERIENCE DESIGN GUIDELINES FOR WINDOWS PHONEmsdn.microsoft.com/en-us/library/hh202915
MICROSOFT .TOOLBOX DESIGN TRAININGwww.microsoft.com/design/toolbox/school
Thank [email protected]@shanemo
Follow us on @gospiffy use #MSCampfire hash tag