Metro Design Language - WebDU

6,639 views

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,639
On SlideShare
0
From Embeds
0
Number of Embeds
387
Actions
Shares
0
Downloads
73
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Microsoft’s new design languageInteresting Departure from contemporary phone and tablet UI’s I nparticularMS showing a rare amount of confidence in its design
  • Set the scene with a videoIgnore marketing messagesSkepticNoteTypographyContent before chromeMotionLive TilePanoramic views
  • We’ll come back to “Authentic”
  • Disclosure:recovering MS employee and MVP
  • Not teach you MetroPoint out some of the features and talk about what it might mean for interaction design as a whole – Microsoft or not.
  • Metro didn’t strictly appear out of nowhere
  • no coincidence – it’s all about the content
  • started with media centreanimationXX more pics
  • Once again, all about contentMinimal controls, minimal interactive functionality (search and browse)1st panorama, with selection of content (XXX pic of panorama)
  • Panorama, live tiles
  • Panormam
  • Desktop is not deadStrength and weakness of Windows 8
  • This is where it starts to make senserole of wayfinding signage.All about content and clear communication
  • rational
  • Truth of text and truth of photographyDesigners newly able to be flexible with photography and layout due to printing advances (photo composition)
  • Metro takes it furtherUses motion to orientBest on the phone
  • Metro does use icons. For something interesting – for commands.Presumably to create a visual signpost for commands.Then they also give us buttons that are square and ugly. Which is just stupid
  • note consistent use of everything, especially colourless is more – minimise variation!
  • typography is a natural visual hierarchyCoz the smaller it gets the closer you have to lookEasy for non-designers to applyImportance of grid
  • not just for show
  • Grids or Hubs in Win 8Spatial reasoningWide and flat navigationSearch Plus BrowseContent orientedmagazine rackpique interestUniquely Metro Identity
  • New challenge – motion designPhone does it best
  • Inevitable response to need to surface content and provide a marketplaceMore or less open
  • Demo the levelsLive tiles are just politeNot a guessing game
  • or leather with stitchingSemantic zoom – and the idea that the display of information changes depending on the level of zoom – is a good example of authentically digital.
  • or leather with stitchingSemantic zoom – and the idea that the display of information changes depending on the level of zoom – is a good example of authentically digital.
  • Semantic zoom – and the idea that the display of information changes depending on the level of zoom – is a good example of authentically digital. Authentically Digital Comes back to content before chrome.Less affordanceUser will click
  • Bauhaus – rationaleInternational Style – the information is enoughMotion design – delight with a purpose.
  • Metro may help non-designers settle on a visual style, which may get them over an initial hump of looking professionalBut like any design language, Metro cannot solve all your problems.
  • Interaction DesignIf you’re designing an RSS reader or photo browser you’re in business
  • XXX branded app picThese opportunities are not unique to Metro
  • Post-chromeImplications for user behaviourOne design language for multiple screens
  • sort of by way of summaryInformation is beautifulSo information has to do more – eg provide the visual hierarchy, and the identity
  • Metro Design Language - WebDU

    1. ALL ABOARD:the Metro design languageand what it means to youSHANE MORRIS
    2. METRO DESIGN LANGUAGE 2C:UsersshanemDropboxSM Working FilesSM AutomaticFilesProductsWindows Phone
    3. 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.
    4. METRO DESIGN LANGUAGE 4a bit about me
    5. METRO DESIGN LANGUAGE 5WARNING: MAY CONTAIN TRACES OF OPINIONSWHAT I WANT TO TALK ABOUT
    6. METRO DESIGN LANGUAGE 6BACKGROUND
    7. BACKGROUNDthe evolution of metro www.superkids.com/aweb/pages/ reviews/encyclo1/encart95/mlk_ms.gif
    8. BACKGROUNDthe evolution of metro
    9. BACKGROUNDthe evolution of metro
    10. BACKGROUNDthe evolution of metro
    11. METRO DESIGN LANGUAGE 11BACKGROUNDthe evolution of metro
    12. METRO DESIGN LANGUAGE 13WHAT ABOUT THE “RIBBON”?
    13. METRO DESIGN LANGUAGE 14fluent ui and metroFLUENT UI METROfunction focussed content focused input output input output
    14. METRO DESIGN LANGUAGE 15WINDOWS 8 „METRO-STYLE‟ APPSVERY QUICK DEMO
    15. 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
    16. METRO DESIGN LANGUAGE 17INSPIRATION
    17. metro influencesMODERN DESIGN - BAUHAUSINTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGNMOTION DESIGN – CINEMATOGRAPHY
    18. METRO DESIGN LANGUAGE 20INFLUENCESmodern designbauhaus“FORM FOLLOWS FUNCTION”MASS PRODUCTIONNow: Mass digitisation chairsdesign.net
    19. 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
    20. INFLUENCESmotion designMOTION DESIGN IS QUINTESSENTIALLY MODERN Saul Bass North by Northwest - Metro-Goldwyn-Mayer http://youtu.be/jIlqatMQSgI
    21. METRO DESIGN LANGUAGE 23metro 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
    22. METRO DESIGN LANGUAGE 24metro 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
    23. METRO DESIGN LANGUAGE 25TYPOGRAPHY ANDWHITESPACE
    24. 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
    25. METRO DESIGN LANGUAGE 27TYPOGRAPHY AND WHITESPACEvisual hierarchysizeCASEweight alignment alignment proximity proximity colour colour
    26. METRO DESIGN LANGUAGE 28TYPOGRAPHY AND WHITESPACEvisual hierarchySPARSE VISUAL STYLE COMPRESSES OPTIONS FOR CREATING A VISUAL HIERARCHYTWO MAIN DEVICESwhite spacetypography
    27. METRO DESIGN LANGUAGE 29PANORAMAS
    28. METRO DESIGN LANGUAGE 30FLATTER, WIDER NAVIGATIONpanorama
    29. METRO DESIGN LANGUAGE 31ANIMATION
    30. 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
    31. METRO DESIGN LANGUAGE 33LIVE TILES
    32. 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
    33. METRO DESIGN LANGUAGE 36METRO PRINCIPLES
    34. WINDOWS 8metro principlesPRIDE IN CRAFTSMANSHIPBE FAST AND FLUIDAUTHENTICALLY DIGITALDO MORE WITH LESSWIN AS ONE
    35. METRO PRINCIPLESauthentically digital
    36. METRO PRINCIPLESauthentically digital
    37. METRO DESIGN LANGUAGE 40AUTHENTICALLY DIGITALsemantic zoom msdn.microsoft.com/en-us/ library/windows/apps/hh465319.aspx
    38. METRO DESIGN LANGUAGE 41AUTHENTICALLY DIGITALcontent before chromeCONTENT IS THE INTERFACE CONTROLS DESIGNED TO REFLECTRemove controls THISor relegate them to the App Bar
    39. METRO DESIGN LANGUAGE 42 flickr.com/photos/cybjorg/2332714629/METRO – THE DESIGNLANGUAGE FORDEVELOPERS?
    40. metro influencesMODERN DESIGN - BAUHAUS DESIGN BY NUMBERS?INTERNATIONAL TYPOGRAPHIC STYLE– SWISS DESIGNMOTION DESIGN – CINEMATOGRAPHY
    41. METRO DESIGN LANGUAGE 44METRO:THE SAFE PATH TO„ADEQUATE‟?
    42. 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
    43. METRO DESIGN LANGUAGE 46METRO CHALLENGESbranding
    44. 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
    45. 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
    46. 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.
    47. 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
    48. what metro means
    49. 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…
    50. 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
    51. thank youSHANE MORRISSHANE@AUTOMATICSTUDIO.COM.AU@SHANEMO

    ×