Metro Design Language - WebDU

ALL ABOARD:the Metro design languageand what it means to youSHANE MORRIS

METRO DESIGN LANGUAGE 2C:UsersshanemDropboxSM Working FilesSM AutomaticFilesProductsWindows Phone

METRO IS OUR DESIGNLANGUAGE. WE CALL IT METROBECAUSE IT‟S MODERN ANDCLEAN. IT‟S FAST AND INMOTION. IT‟S ABOUT CONTENTAND TYPOGRAPHY. AND IT‟SENTIRELY AUTHENTIC.

METRO DESIGN LANGUAGE 4a bit about me

METRO DESIGN LANGUAGE 5WARNING: MAY CONTAIN TRACES OF OPINIONSWHAT I WANT TO TALK ABOUT

METRO DESIGN LANGUAGE 6BACKGROUND

BACKGROUNDthe evolution of metro www.superkids.com/aweb/pages/ reviews/encyclo1/encart95/mlk_ms.gif

BACKGROUNDthe evolution of metro

METRO DESIGN LANGUAGE 11BACKGROUNDthe evolution of metro

METRO DESIGN LANGUAGE 13WHAT ABOUT THE “RIBBON”?

METRO DESIGN LANGUAGE 14fluent ui and metroFLUENT UI METROfunction focussed content focused input output input output

METRO DESIGN LANGUAGE 15WINDOWS 8 „METRO-STYLE‟ APPSVERY QUICK DEMO

METRO DESIGN LANGUAGE 16metro characteristics INTERACTION INFORMATIONVISUAL DESIGN DESIGN DESIGNFlat colour Lack of controls Live tilesTypography Animation Semantic zoom (Windows 8)Whitespace Live tiles Panoramic viewsPanoramic view Edge swipes (Windows 8) Panoramic views

METRO DESIGN LANGUAGE 17INSPIRATION

metro influencesMODERN DESIGN - BAUHAUSINTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGNMOTION DESIGN – CINEMATOGRAPHY

METRO DESIGN LANGUAGE 20INFLUENCESmodern designbauhaus“FORM FOLLOWS FUNCTION”MASS PRODUCTIONNow: Mass digitisation chairsdesign.net

INFLUENCESinternational styleINFORMATION IS BEAUTIFUL“a neutral and objective approach thatemphasized rational planning and de-emphasized the subjective, or individual,expression”Britannica www.britannica.com/EBchecked/topic/1032864/ graphic-design/242772/Graphic-design-1945-75 wikimedia.org

INFLUENCESmotion designMOTION DESIGN IS QUINTESSENTIALLY MODERN Saul Bass North by Northwest - Metro-Goldwyn-Mayer http://youtu.be/jIlqatMQSgI

METRO DESIGN LANGUAGE 25TYPOGRAPHY ANDWHITESPACE

METRO DESIGN LANGUAGE 26TYPOGRAPHY AND ICONOGRAPHYtext vs iconsA PICTURE CAN SAY A THOUSAND WORDS… but notice we don‟t talk in pictures?ICONS ARE USEFULcompactrecognisablescannableBUT EVEN MOST ICONS ARE LEARNT THROUGHTHEIR LABELS

METRO DESIGN LANGUAGE 27TYPOGRAPHY AND WHITESPACEvisual hierarchysizeCASEweight alignment alignment proximity proximity colour colour

METRO DESIGN LANGUAGE 28TYPOGRAPHY AND WHITESPACEvisual hierarchySPARSE VISUAL STYLE COMPRESSES OPTIONS FOR CREATING A VISUAL HIERARCHYTWO MAIN DEVICESwhite spacetypography

METRO DESIGN LANGUAGE 29PANORAMAS

METRO DESIGN LANGUAGE 30FLATTER, WIDER NAVIGATIONpanorama

METRO DESIGN LANGUAGE 31ANIMATION

METRO DESIGN LANGUAGE 32METRO CHARACTERISTICSanimationMOTION DELIGHTS THE USER MOTION ORIENTS USERS IN THE APPLICATIONMOTION ADDS HINTS TOWARDSINTERACTIONMOTION MASKS SLOW PERFORMANCEMOTION ADDS PERSONALITYMOTION ADDS CONSISTENCYMOTION ADDS ELEGANCE.msdn.microsoft.com/en-us/library/hh202871

METRO DESIGN LANGUAGE 33LIVE TILES

METRO DESIGN LANGUAGE 35METRO CHARACTERISTICSlive tilesAPPS ARE NO LONGER JUST „OPEN‟ DEGREES OF „OPEN‟OR „CLOSED‟ Lock ScreenA REASON TO RETURN Toast Tile Snapped Full Screen  (Filled, Landscape and Portrait) Maximised Desktop

METRO DESIGN LANGUAGE 36METRO PRINCIPLES

WINDOWS 8metro principlesPRIDE IN CRAFTSMANSHIPBE FAST AND FLUIDAUTHENTICALLY DIGITALDO MORE WITH LESSWIN AS ONE

METRO PRINCIPLESauthentically digital

METRO DESIGN LANGUAGE 40AUTHENTICALLY DIGITALsemantic zoom msdn.microsoft.com/en-us/ library/windows/apps/hh465319.aspx

METRO DESIGN LANGUAGE 41AUTHENTICALLY DIGITALcontent before chromeCONTENT IS THE INTERFACE CONTROLS DESIGNED TO REFLECTRemove controls THISor relegate them to the App Bar

METRO DESIGN LANGUAGE 42 flickr.com/photos/cybjorg/2332714629/METRO – THE DESIGNLANGUAGE FORDEVELOPERS?

metro influencesMODERN DESIGN - BAUHAUS DESIGN BY NUMBERS?INTERNATIONAL TYPOGRAPHIC STYLE– SWISS DESIGNMOTION DESIGN – CINEMATOGRAPHY

METRO DESIGN LANGUAGE 44METRO:THE SAFE PATH TO„ADEQUATE‟?

METRO DESIGN LANGUAGE 45metro challenges INTERACTION INFORMATIONVISUAL DESIGN DESIGN DESIGNLess visual devices to: Lack of affordance Does everything start with a Direct attention Lack of discoverability panorama? Communicate grouping Some clear patterns for Beyond that Metro does not Delight browsing hierarchical offer much Brand content Less clear what to do:  highly interactive  transactional

METRO DESIGN LANGUAGE 46METRO CHALLENGESbranding

METRO CHALLENGESbrandingBRAND IS A CONVERSATION BETWEEN BRAND OPPORTUNITIESYOU AND YOUR CUSTOMERS TilesNot just  Personality Splash screen Colours  Set tone, reinforce identity Fonts First launch Logos  Demonstrate value Landing page  Translate the identity into action Glyphs and icons Imagery Promotional art on the Windows Store

THE METRO SECRETmetro is more than just a visual styleVISUAL LANGUAGE LIKE ALL GOOD DESIGN, DESIGNING Silhouette FOR METRO DOES NOT START WITH VISUALSINTERACTION STYLE AND STRUCTURENAVIGATION STYLE AND STRUCTUREATTITUDE

METRO DESIGN LANGUAGE 49METRO CHALLENGESso designers can…RELAX! PANIC!You are still needed It will take clients much longer to realise they need you  And by then it may be too late.

METRO DESIGN LANGUAGE 50metroSTRENGTHS WEAKNESSES Strong, distinct identity  Limited visual expressiveness Easier to get to adequate  Danger of bland Content focussed  Less guidance for highly interactive Animation is a first class citizen applications Confident  Lack of affordance may affect learnability  Ugly controls  Supermarket screen

what metro means

METRO DESIGN LANGUAGE 52METRO DESIGN LANGUAGEwhat metro says about the futureINFORMATION IS BEAUTIFUL POST-SKEUMORPHISMSo Information has to do more Authentically Digital Provide the visual hierarchy BRAND IS A CONVERSATION, Communicate the identity NOT A LOGOCONTENT IS THE INTERFACE DESIGN IS STILL REQUIREDDeath of (intrinsic) affordance Adequate is easier, but… Confident users Just wait, they‟ll come crawling back…

resourcesDESIGNING UX FOR APPS (WINDOWS MICROSOFT .TOOLBOX DESIGN8) TRAININGdesign.windows.com www.microsoft.com/design/toolbox/schoolUSER EXPERIENCE DESIGNGUIDELINES FOR WINDOWS PHONEmsdn.microsoft.com/en-us/library/hh202915

thank youSHANE MORRISSHANE@AUTOMATICSTUDIO.COM.AU@SHANEMO

http://spiffy.sg	305
http://lanyrd.com	16
http://us-w1.rockmelt.com	4
http://tanchunsiong.cloudapp.net	3

Metro Design Language - WebDU

by Shane Morris on May 02, 2012

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 328

Statistics

Metro Design Language - WebDU Presentation Transcript