Metro Design Language

9,323 views

Published on

My presentation from Microsoft Campfile in Singapore in April 2012. (Edited down to fit the 10MB limit.)

Published in: Design, Technology
1 Comment
19 Likes
Statistics
Notes
  • Hello
    My name is Miss Lilian Dion i saw your profile today at (slideshare.net) and became intrested in you,i will like you to send me an e-mail in order for me to tell you whom i am and also to know you more ,and i want you to send a mail to my private e-mail address so i can give you my picture for you to know whom l am.Here is my private e-mail address (liliandion66@yahoo.com).I believe we can move from here in order to echieve good things in the future.I am waiting for your mail to my email address above Miss Lilian Dion.(Remeber the distance or colour does not matter but love matters alot in life)

    Please reply me with my e-mail address here(liliandion66@yahoo.com)
    Yours New Friend
    Mis Lilian Dion
    Thanks You My Love,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,323
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
270
Comments
1
Likes
19
Embeds 0
No embeds

No notes for slide
  • role of wayfinding signage.All about content and clear communication
  • related to be good at something.leverage the work of others to be great.
  • Post-chromeImplications for user behaviourOne design language for multiple screens
  • this app is about reading articles, but you wouldn’t know it.
  • magazine rackpique interestSearch PLUS Browse
  • What does the tile, home panorama etc say about your brand?
  • note hierarchy
  • Gridis super important as a way to communicate grouping and hierarchy.
  • Calibri needs to be slightly bigger to align with Segoe. (See slide, both same height)no italics
  • Asian scripts – same proportions, or at least same intentions
  • note consistent use of everything, especially colourless is more – minimise variation!
  • including swipe from sidetransverse swipe to select
  • Important part of the platform experience (“win as one”)
  • Metro Design Language

    1. 1. ALL ABOARD:The Metro Design Languageand what it Means to youShane MorrisAutomatic Studio
    2. 2. METRO DESIGN LANGUAGE 2SHANE MORRISa bit about me
    3. 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. 4. the evolution of metro
    5. 5. the evolution of metro
    6. 6. the evolution of metro
    7. 7. METRO DESIGN LANGUAGE 7the evolution of metro
    8. 8. metro inspiration
    9. 9. metro influencesMODERN DESIGN - BAUHAUSINTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGNMOTION DESIGN – CINEMATOGRAPHY
    10. 10. METRO DESIGN LANGUAGE 11INFLUENCESmodern designFORM FOLLOWS FUNCTIONMASS PRODUCTIONNow: Mass digitisationhistoriarte1.wikispaces.com
    11. 11. INFLUENCESinternational styleINFORMATION IS BEAUTIFULwikimedia.org
    12. 12. INFLUENCESmotion designMOTION DESIGN IS QUINTESSENTIALLY MODERNSaul Basshttp://www.youtube.com/watch?v=jIlqatMQSgI
    13. 13. metro principles – windows 8PRIDE IN CRAFTSMANSHIPBE FAST AND FLUIDAUTHENTICALLY DIGITALDO MORE WITH LESSWIN AS ONE
    14. 14. PRINCIPLESpride in craftsmanshipSWEAT THE DETAILS LOOK LIKE YOU BELONGMAKE IT SAFE AND RELIABLEBALANCE, SYMMETRY, HIERARCHYALIGN TO THE GRID
    15. 15. PRINCIPLESbe fast and fluidLIFE IS MOBILE ORIENT WITH MOTIONDELIGHT WITH MOTIONDESIGN FOR TOUCHINTUITIVE INTERACTIONBE RESPONSIVE AND READYIMMERSIVE AND COMPELLING
    16. 16. PRINCIPLESauthentically digitalCLOUD CONNECTEDDYNAMIC AND ALIVEBEAUTIFUL USE OF TYPOGRAPHYBOLD VIBRANT COLORSMOTION
    17. 17. PRINCIPLESdo more with lessBE GREAT AT SOMETHINGFOCUSED AND DIRECTCONTENT BEFORE CHROMEINSPIRE CONFIDENCE
    18. 18. PRINCIPLESwin as oneFIT INTO THE UI MODELREDUCE REDUNDANCYWORK TOGETHER TO COMPLETE SCENARIOSTOOLS AND TEMPLATES ARE DESIGNED TO SCALE
    19. 19. what metro means
    20. 20. METRO DESIGN LANGUAGE 21the metro secretLOOKS EASY, EH?BUT YOUR MISTAKES ARE EVEN MORE OBVIOUSLESS VISUAL DEVICES TO Direct attention Communicate grouping Delight Brand
    21. 21. THE METRO SECRETmetro is more than just a visual styleATTITUDE LIKE ALL GOOD DESIGN, DESIGNINGFast, light… FOR METRO DOES NOT START WITH VISUALSNAVIGATION STYLE AND STRUCTUREINTERACTION STYLE AND STRUCTURESILHOUETTEVISUAL LANGUAGE
    22. 22. METRO DESIGN LANGUAGE 23SHANE’S TIPSgetting metro rightCONTENT BEFORE CHROMEFUNCTIONAL MINIMALISMFLATTER, WIDER NAVIGATIONINFORMATION HIERARCHYPLATFORM CONVENTIONS
    23. 23. METRO DESIGN LANGUAGE 24GETTING METRO RIGHTcontent before chromeLET THE CONTENT BE THE INTERFACEBe trustworthyMOVE COMMANDS TO THE APP BAR
    24. 24. GETTING METRO RIGHTfunctional minimalismBE GOOD AT A LITTLE MY APP IS THE BEST APP AT…CONSIDER TOUCH INTERFACE THE DESKTOP UI STILL HAS A PLACE‘POSTURE’Lean back
    25. 25. METRO DESIGN LANGUAGE 30GETTING METRO RIGHTflatter, wider navigationFEWER ORIENTATION CUES(Breadcrumbs)LEVERAGE PANORAMA / GRIDSpatial memorySearch plus BrowseBE TRUE TO PLATFORM
    26. 26. FLATTER, WIDER NAVIGATIONhierarchical navigation
    27. 27. FLATTER, WIDER NAVIGATIONflat navigation
    28. 28. METRO DESIGN LANGUAGE 33FLATTER, WIDER NAVIGATIONthe panorama / grid
    29. 29. METRO DESIGN LANGUAGE 34GETTING METRO RIGHTinformation hierarchyCOMMUNICATE A CLEAR HIERARCHYOF INFORMATIONTools Typography  size  colour  weight Alignment Whitespace
    30. 30. GETTING METRO RIGHTplatform conventionsVISUAL STYLE LOOK LIKE YOU BELONGLAYOUT METRO (WINDOWS 8) UX GUIDELINES msdn.microsoft.com/en-ICONOGRAPHY AND TYPOGRAPHY us/library/windows/apps/hh779072.aspxINTERACTIONNAVIGATIONANIMATIONCONTRACTS
    31. 31. METRO DESIGN LANGUAGE 36PLATFORM CONVENTIONSvisual styleTHE ROLE OF VISUAL DESIGN1. Communicate2. Evoke3. Decorate
    32. 32. METRO DESIGN LANGUAGE 37VISUAL STYLEbranding
    33. 33. VISUAL STYLEbrandingUSE SEGOE, OR YOUR COMPANY BRAND IS A CONVERSATION BETWEENTYPEFACE, PROBABLY NOT BOTH YOU AND YOUR CUSTOMERS Not justCOMPANY COLOURS  ColoursBRAND IMAGERY  Fonts  Logos
    34. 34. METRO DESIGN LANGUAGE 39PLATFORM CONVENTIONSlayoutWHAT IS YOUR SILHOUETTE?
    35. 35. METRO DESIGN LANGUAGE 41PLATFORM CONVENTIONSlayoutSTANDARD TEMPLATESBuilt into Blend and Visual StudioBehind everything: the grid
    36. 36. LAYOUT reactive design Minimum (1024x768px)Snap view (320px - required)
    37. 37. PLATFORM CONVENTIONSiconographyICONS IN THE APPLICATION MENUSHOULD BE CONSISTENTTEST ICONS WITH USERS(pay attention to context)
    38. 38. METRO DESIGN LANGUAGE 49PLATFORM CONVENTIONStypography - fontsWINDOWS 8 WINDOWS PHONESegoe UI Segoe WP Controls and UI elements Segoe WP Light only for large textCalibri read/writeCambria readinghttp://msdn.microsoft.com/en-us/library/windows/apps/hh700394.aspx
    39. 39. type sizes (windows 8)
    40. 40. METRO DESIGN LANGUAGE 51PLATFORM CONVENTIONStypography - hierarchyCASEsizeweight alignment alignment proximity proximity colour colour
    41. 41. METRO DESIGN LANGUAGE 52PLATFORM CONVENTIONSinteractionSTANDARD CONTROLSSTANDARD GESTURES
    42. 42. METRO DESIGN LANGUAGE 53PLATFORM CONVENTIONSanimationMOTION DELIGHTS THE USER USE MOTION TO DELIGHT THE USERMOTION ADDS HINTS TOWARDS REMEMBER THAT PACING ISINTERACTION IMPORTANT:MOTION MASKS SLOW THE MORE YOU USE IT, THE LESSPERFORMANCE SPECIAL IT BECOMESMOTION ADDS PERSONALITY RESPECT STANDARD ANIMATIONSMOTION ADDS CONSISTENCYMOTION ADDS ELEGANCE.msdn.microsoft.com/en-us/library/hh202871(v=vs.92).aspx
    43. 43. PLATFORM CONVENTIONScontracts – windows8SEARCHSHARESETTINGSPICKER
    44. 44. METRO DESIGN LANGUAGE 55SUMMARY
    45. 45. summaryMETRO PRINCIPLES PLATFORM CONVENTIONSPride in craftsmanship Visual styleBe fast and fluid LayoutAuthentically digital TypographyDo more with less InteractionWin as one Animation Contracts
    46. 46. resourcesDESIGNING UX FOR APPS (WINDOWS MICROSOFT .TOOLBOX DESIGN8) TRAININGmsdn.microsoft.com/library/windows/apps/ www.microsoft.com/design/toolbox/schoolhh779072/USER EXPERIENCE DESIGNGUIDELINES FOR WINDOWS PHONEmsdn.microsoft.com/en-us/library/hh202915
    47. 47. Thank Youshane@automaticstudio.com.au@shanemo
    48. 48. Follow us onuse hash tag

    ×