SHANE MORRIS

ALL ABOARD: the Metro design language and what it means to you

METRO DESIGN LANGUAGE 2

C:\Users\shanem\Dropbox\SM Working Files\SM Automatic Files\Products\Windows Phone\

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.

METRO DESIGN LANGUAGE 4

a bit about me

5METRO DESIGN LANGUAGE

WHAT I WANT TO TALK ABOUT

WARNING: MAY CONTAIN TRACES OF OPINIONS

6METRO DESIGN LANGUAGE

BACKGROUND

the evolution of metroBACKGROUND

www.superkids.com/aweb/pages/reviews/encyclo1/encart95/mlk_ms.gif

the evolution of metroBACKGROUND

the evolution of metroBACKGROUND

the evolution of metroBACKGROUND

METRO DESIGN LANGUAGE 11

the evolution of metroBACKGROUND

13METRO DESIGN LANGUAGE

WHAT ABOUT THE “RIBBON”?

METRO DESIGN LANGUAGE 14

FLUENT UI

function focussed

METRO

content focused

fluent ui and metro

input output input output

15METRO DESIGN LANGUAGE

VERY QUICK DEMOWINDOWS 8 ‘METRO-STYLE’ APPS

metro characteristics

VISUAL DESIGN

Flat colourTypographyWhitespacePanoramic view

INTERACTION DESIGN

Lack of controlsAnimationLive tilesEdge swipes (Windows 8)Panoramic views

INFORMATION DESIGN

Live tilesSemantic zoom (Windows 8)Panoramic views

METRO DESIGN LANGUAGE 16

17METRO DESIGN LANGUAGE

INSPIRATION

MODERN DESIGN - BAUHAUS

INTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGN

MOTION DESIGN – CINEMATOGRAPHY

metro influences

“FORM FOLLOWS FUNCTION”

MASS PRODUCTIONNow: Mass digitisation

METRO DESIGN LANGUAGE 20

modern designbauhaus

INFLUENCES

chairsdesign.net

INFORMATION IS BEAUTIFUL“a neutral and objective approach that emphasized rational planning and de-emphasized the subjective, or individual, expression”Britannica

www.britannica.com/EBchecked/topic/1032864/

graphic-design/242772/Graphic-design-1945-75

international styleINFLUENCES

wikimedia.org

MOTION DESIGN IS QUINTESSENTIALLY MODERN

motion designINFLUENCES

Saul BassNorth by Northwest - Metro-Goldwyn-Mayer

http://youtu.be/jIlqatMQSgI

METRO DESIGN LANGUAGE 23

metro characteristics

VISUAL DESIGN

Flat colourTypographyWhitespacePanoramic view

INTERACTION DESIGN

Lack of controlsAnimationLive tilesEdge swipes (Windows 8)Panoramic views

INFORMATION DESIGN

Live tilesSemantic zoom (Windows 8)Panoramic views

METRO DESIGN LANGUAGE 24

metro characteristics

VISUAL DESIGN

Flat colourTypographyWhitespacePanoramic view

INTERACTION DESIGN

Lack of controlsAnimationLive tilesEdge swipes (Windows 8)Panoramic views

INFORMATION DESIGN

Live tilesSemantic zoom (Windows 8)Panoramic views

25METRO DESIGN LANGUAGE

TYPOGRAPHY AND WHITESPACE

METRO DESIGN LANGUAGE 26

A PICTURE CAN SAY A THOUSAND WORDS… but notice we don’t talk in pictures?

ICONS ARE USEFULcompactrecognisablescannable

BUT EVEN MOST ICONS ARE LEARNT THROUGH THEIR LABELS

text vs iconsTYPOGRAPHY AND ICONOGRAPHY

METRO DESIGN LANGUAGE 27

visual hierarchyTYPOGRAPHY AND WHITESPACE

size

colour

CASE

alignment alignmentweight

proximitycolour

proximity

METRO DESIGN LANGUAGE 28

SPARSE VISUAL STYLE COMPRESSES OPTIONS FOR CREATING A VISUAL HIERARCHY

TWO MAIN DEVICESwhite spacetypography

visual hierarchyTYPOGRAPHY AND WHITESPACE

29METRO DESIGN LANGUAGE

PANORAMAS

METRO DESIGN LANGUAGE 30

panoramaFLATTER, WIDER NAVIGATION

31METRO DESIGN LANGUAGE

ANIMATION

METRO DESIGN LANGUAGE 32

MOTION 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

MOTION ORIENTS USERS IN THE APPLICATION

animationMETRO CHARACTERISTICS

33METRO DESIGN LANGUAGE

LIVE TILES

METRO DESIGN LANGUAGE 35

APPS ARE NO LONGER JUST ‘OPEN’ OR ‘CLOSED’

A REASON TO RETURN

DEGREES OF ‘OPEN’Lock ScreenToastTileSnappedFull Screen (Filled, Landscape and Portrait)MaximisedDesktop

live tilesMETRO CHARACTERISTICS

36METRO DESIGN LANGUAGE

METRO PRINCIPLES

PRIDE IN CRAFTSMANSHIP

BE FAST AND FLUID

AUTHENTICALLY DIGITAL

DO MORE WITH LESS

WIN AS ONE

metro principlesWINDOWS 8

authentically digitalMETRO PRINCIPLES

authentically digitalMETRO PRINCIPLES

METRO DESIGN LANGUAGE 40

semantic zoomAUTHENTICALLY DIGITAL

msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx

METRO DESIGN LANGUAGE 41

CONTENT IS THE INTERFACERemove controlsor relegate them to the App Bar

CONTROLS DESIGNED TO REFLECT THIS

content before chromeAUTHENTICALLY DIGITAL

42METRO DESIGN LANGUAGE

METRO – THE DESIGN LANGUAGE FOR DEVELOPERS?

flickr.com/photos/cybjorg/2332714629/

MODERN DESIGN - BAUHAUS

INTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGN

MOTION DESIGN – CINEMATOGRAPHY

DESIGN BY NUMBERS?

metro influences

44METRO DESIGN LANGUAGE

METRO:THE SAFE PATH TO ‘ADEQUATE’?

METRO DESIGN LANGUAGE 45

metro challengesVISUAL DESIGN

Less visual devices to: Direct attention Communicate grouping Delight Brand

INTERACTION DESIGN

Lack of affordanceLack of discoverabilitySome clear patterns for browsing hierarchical contentLess clear what to do: highly interactive transactional

INFORMATION DESIGN

Does everything start with a panorama?Beyond that Metro does not offer much

METRO DESIGN LANGUAGE 46

brandingMETRO CHALLENGES

BRAND IS A CONVERSATION BETWEEN YOU AND YOUR CUSTOMERSNot just Colours Fonts Logos

BRAND OPPORTUNITIESTiles PersonalitySplash screen Set tone, reinforce identityFirst launch Demonstrate valueLanding page Translate the identity into actionGlyphs and iconsImageryPromotional art on the Windows Store

brandingMETRO CHALLENGES

VISUAL LANGUAGE Silhouette

INTERACTION STYLE AND STRUCTURE

NAVIGATION STYLE AND STRUCTURE

ATTITUDE

LIKE ALL GOOD DESIGN, DESIGNING FOR METRO DOES NOT START WITH VISUALS

metro is more than just a visual styleTHE METRO SECRET

METRO DESIGN LANGUAGE 49

RELAX!

You are still needed

PANIC!

It will take clients much longer to realise they need you And by then it may be too late.

so designers can…METRO CHALLENGES

METRO DESIGN LANGUAGE 50

STRENGTHS

Strong, distinct identity Easier to get to adequate Content focussed Animation is a first class citizen Confident

WEAKNESSES

Limited visual expressiveness Danger of bland Less guidance for highly interactive

applications Lack of affordance may affect

learnability Ugly controls Supermarket screen

metro

what metro means

METRO DESIGN LANGUAGE 52

INFORMATION IS BEAUTIFULSo Information has to do more Provide the visual hierarchy Communicate the identity

CONTENT IS THE INTERFACEDeath of (intrinsic) affordance Confident users

POST-SKEUMORPHISM Authentically Digital

BRAND IS A CONVERSATION, NOT A LOGO

DESIGN IS STILL REQUIREDAdequate is easier, but…Just wait, they’ll come crawling back…

what metro says about the futureMETRO DESIGN LANGUAGE

DESIGNING UX FOR APPS (WINDOWS 8)design.windows.com

USER EXPERIENCE DESIGN GUIDELINES FOR WINDOWS PHONEmsdn.microsoft.com/en-us/library/hh202915

MICROSOFT .TOOLBOX DESIGN TRAININGwww.microsoft.com/design/toolbox/school

resources

SHANE MORRIS

SHANE@AUTOMATICSTUDIO.COM.AU

@SHANEMO

thank you