metro design language

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 Youshane@automaticstudio.com.au@shanemo

Follow us on @gospiffy use #MSCampfire hash tag