Metro Design Language - WebDU

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.


a bit about me

5METRO DESIGN LANGUAGE

WHAT I WANT TO TALK ABOUT

WARNING: MAY CONTAIN TRACES OF OPINIONS


BACKGROUND

the evolution of metroBACKGROUND

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



http://kellabyte.com/wp-content/uploads/2011/12/GamesChannel-Xbox-Metro-Dahsboard2.jpg


WHAT ABOUT THE “RIBBON”?


FLUENT UI

function focussed

METRO

content focused

fluent ui and metro

input output input output


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



INSPIRATION

MODERN DESIGN - BAUHAUS

INTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGN

MOTION DESIGN – CINEMATOGRAPHY

metro influences

“FORM FOLLOWS FUNCTION”

MASS PRODUCTIONNow: Mass digitisation


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

http://www.britannica.com/EBchecked/topic/1032864/graphic-design/242772/Graphic-design-1945-75




MOTION DESIGN IS QUINTESSENTIALLY MODERN

motion designINFLUENCES

Saul BassNorth by Northwest - Metro-Goldwyn-Mayer

http://youtu.be/jIlqatMQSgI





VISUAL DESIGN


INTERACTION DESIGN


INFORMATION DESIGN



TYPOGRAPHY AND WHITESPACE


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


visual hierarchyTYPOGRAPHY AND WHITESPACE

size

colour

CASE

alignment alignmentweight

proximitycolour

proximity


SPARSE VISUAL STYLE COMPRESSES OPTIONS FOR CREATING A VISUAL HIERARCHY

TWO MAIN DEVICESwhite spacetypography

visual hierarchyTYPOGRAPHY AND WHITESPACE


PANORAMAS


panoramaFLATTER, WIDER NAVIGATION


ANIMATION


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


LIVE TILES


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

http://automaticstudio.com.au/wp-content/uploads/2012/03/image1.png


METRO PRINCIPLES

PRIDE IN CRAFTSMANSHIP

BE FAST AND FLUID

AUTHENTICALLY DIGITAL

DO MORE WITH LESS

WIN AS ONE

metro principlesWINDOWS 8

authentically digitalMETRO PRINCIPLES


semantic zoomAUTHENTICALLY DIGITAL

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


CONTENT IS THE INTERFACERemove controlsor relegate them to the App Bar

CONTROLS DESIGNED TO REFLECT THIS

content before chromeAUTHENTICALLY DIGITAL


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


METRO:THE SAFE PATH TO ‘ADEQUATE’?


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


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


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


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


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

[email protected]

@SHANEMO

thank you

Metro Design Language - WebDU

Technology

Transcript of Metro Design Language - WebDU