Flat Design. Microsoft Story

7,017 views

Published on

The story of building the new design philosophy in Microsoft that was broadly accepted and followed by other brands. The new approach focuses on content and minimalism

Published in: Technology, Business

Flat Design. Microsoft Story

  1. 1. Modern UI IS OUR DESIGN PHILOSOPHY.IT’S СLEAN, SIMPLE AND DIRECT. ITELEVATES CONTENT.IT LOVES TYPOGRAPHY. AND WHILE IT’SUNDENIABLY, AUTHENTICALLYMICROSOFT, Modern UI IS A FRESHPERSPECTIVE.
  2. 2. Modern UI is not a BRAND.Modern UI is not a STYLE GUIDE.Modern UI is not a TOOL SET.Modern UI is not an INTERACTION GUIDE.
  3. 3. Modern UI is not a BOX.Modern UI is not a STACK OFTILES.
  4. 4. Modern UI IS A TIMELESS DESIGN STYLEBASED ON ESTABLISHED PRINCIPLES.ITS HEART AND SOUL IS FOUNDED ONWORLD CLASS INFORMATION DESIGN.
  5. 5. Modern UIINSPIRATION & INFLUENCESwhat is Modern UIoriginsessenceapplication
  6. 6. Swiss Design
  7. 7. “International Typographic Style”shortened to Swiss Designbecame popular in the 1960’s
  8. 8. the inspirational styleare all san serif– without adornments, not…
  9. 9. Way Finding
  10. 10. the inspirationfor wayfinding is fromcomplex navigatingenvironmentsnot…
  11. 11. Bauhaus
  12. 12. German ModernismBauhaus “House of Construction”A school/method of architectureEstablished in 1920’s
  13. 13. BAUHAUS GUIDING FOCUSUrban transportation & serviceGraphics, books, magazines, posters,Iconography, typography and logotypespeopleget informationmake a decisionSocietyInformation, efficient,global culture, neutralform ever followsfunction.this is the law
  14. 14. Motion
  15. 15. Information DesignBauhausSwissWayfinding MotionModern UIIDBMWS
  16. 16. delivering on the inspiration of Modern UIbefore it was Modern UI…
  17. 17. Modern UI has produced a new blended ecosystem for users
  18. 18. GAME:Count the number of times Modern UI is usedover the next minute
  19. 19. Modern UIHISTORY & EVOLUTIONorigins continued
  20. 20. pre-Modern UI LUNA Design [circa 2001] XP
  21. 21. pre-Modern UI AERODesign [circa 2006] Vista
  22. 22. birth of Modern UILearn from the PAST > deliver the NOW > dream up the FUTURE2007 2008 2009 2010FebruaryWinPhone 7Modern UITheCodenameZuneHDWIN 7Coins TermMODERN2011 2012 2013 2014 2015Modern UIPrinciplesdefined//Build ConfWIN8 betaModern UIAppsOffice LabsZuneWinMedia CntrEncarta
  23. 23. Encarta 1999 > 2000 UI is transformed by a new set of principles
  24. 24. Windows Media Center TV interfaceUX [circa 2004]
  25. 25. Windows Media Center TV interfaceUX [circa 2004]
  26. 26. Office Labs Vision of the future [circa 2007]
  27. 27. Zune matures the design style [circa 2005 - 2010]
  28. 28. Zune HD known as the direct formulation of Modern UI [circa 2008]
  29. 29. Modern UIPRINCIPLESwhat is Modern UIoriginsessenceapplication
  30. 30. designers on Modern UI [circa 2010]
  31. 31. ModernWindows 7 - 8UX PrinciplesCirca 2006
  32. 32. Our Look is… Clean and open Content not chrome Typographic Authentically digitalOur Feel is… Purposeful Fluid Soulful AliveOur Voice is… Trustworthy Straight-forward Light InspiringLook expressed in:LayoutTypographyColorImagery (graphics, photos; illustrations)Symbols (icons; logos; emoticons)Feel experienced in:MotionAnimationBehaviorSoundVoice heard in:TextEditorialNamesModern is a paradigm shift in…PERSONALITY – INTERACTION – UX BRAND – UI PLATFORM
  33. 33. WindowsPhonePrinciplesCirca 2009Airport toModern UI
  34. 34. Modern UIcontent, not chromeemotion through motionhonest and authenticclean, light, opencelebration of typographyit’s about youCirca 2010
  35. 35. GUIDING CONCEPTSrelevant, confident, contemporarygives context to improve usabilityconsistencydifferentiatedtype is beautiful, not just legibleclear, straightforwardinformation designuncompromising sensitivityto weights and spacingbalance, scalecreates harmonyGUIDING TONEclean, light, open, fastcontent, not chromeauthentically digitalsoulful and alivefocus on primary tasksdo a lot with very littlefierce reduction ofunnecessary elementsdelightful use of whitespaceDESIRED RESPONCEIt feels like the new MicrosoftIt’s fresh and cleanIt’s simple and intriguingI want to share this with othersEverything is different now (in a good way)I get itI want to be an integral partI can’t wait to share with othersModern UI
  36. 36. “Perfection is achieved, not when there is nothing left to add,but when there is nothing left to remove.”Antoine de Saint-ExupéryModern UI
  37. 37. What does the user think happened?
  38. 38. All for one, and one for all
  39. 39. ux principles & design philosophyeverything matters (Keenattentiontodetail)clean, light, and open (Fiercereductionofelements)alive with motion (informsinteraction)design for our mediumtype is beautifulcontent not chromeclear information hierarchyPride in craftsmanshipFast and fluidAuthentically digitalDo more with lessWin as oneDelivering on HARMONYfor all in the ecosystem
  40. 40. Modern UIBEST PRACTICES TO FOLLOWdistinctlyModern UIexamples
  41. 41. Zune HD
  42. 42. Windows Phone
  43. 43. Modern UIPRACTICES TO AVOIDquestionableModern UIexamples
  44. 44. Retro Modern UI - partridge familybusDisco Modern UICEO Modern UI meets eye candy Holiday Modern UINEARMISSESWITHModernUIDONOTTRYTHISATYOURHOME
  45. 45. Modern UIPRACTICAL & TACTICALELEMENTSwhat is Modern UIoriginsessenceapplication
  46. 46. Practical & Tactical Elements for Modern UI
  47. 47. Color
  48. 48. Pantone 2010fashion colorsModern UI 2010marketing colors
  49. 49. windows phone colors
  50. 50. bingcolorComparing old and newOur colors now focus on a reduced set to do more with less.
  51. 51. MS - Microsoft (Corp, Dynamics)OF - OfficeW - WindowsWP - Windows PhoneXB - XboxBI - BingSK - Skype
  52. 52. Modern UInew color wheel draftas of UX Day 2011covers all productand communications
  53. 53. TypeModern UI’S MOST INSTINCTIVE DESIGN ASSET
  54. 54. Segoe familycreated byMS for MS
  55. 55. Segoe family created for Windows Phone…
  56. 56. SegoeSegoe WP
  57. 57. Segoe variantsSegoe TV, Segoe Print, Segoe Script, SegoeMedia Center, Segoe Marker, Segoe 360,Segoe Xbox, Segoe PMX, Segoe WP, SegoeChess, Segoe UI Symbol, Segoe Bing, SegoeKey Caps, Segoe Wedge Keyboard, SegoeHardware, Segoe MacBU, Zegoe, Segoe UILight, Segoe UI Semibold, and many others…
  58. 58. Icons
  59. 59. BeforeModern UIAfterModern UI
  60. 60. Grid
  61. 61. Windows 7 Developers Grid
  62. 62. 5 WVGA Portrait (480x800) with overlap. Alternating red and blue rectangles indicate full screen width.Panorama GridWindows 7 Developers Grid
  63. 63. 1 unit = 20 x 20 pixels1 subunit = 5 x 5 pixels
  64. 64. Standard6 unit margin = 120 pixels
  65. 65. Modern UIBeyond the 20 x 20 px Grid:grid explorationFibonacci SequencePhi PatternsGolden TriangleGolden Ratio
  66. 66. Voice
  67. 67. Help content BEFORE Modern UI
  68. 68. in use today. Some have beencreated by Microsoft, but the vast majority of codecs have been created by othercompanies, organizations, or individuals. operatingsystemThere might be times, howeverfor free or for a fee.In some cases, the Player can use the codecs that have been installed on your PCby other digital media playback and creation apps.Help content BEFORE Modern UI
  69. 69. There are hundreds of audio and video codecs. By default, Windows and thePlayer include some of the most popular codecs, such as Windows Media Audio,Windows Media Video, and MP3.If you want to play content that was compressed with a codec that isnt includedin Windows or the Player, you can likely download the codec from the web.Help content AFTER Modern UI
  70. 70. bingvoice
  71. 71. Motion
  72. 72. HELPS HURTSMotion Function
  73. 73. turnstile
  74. 74. continuum
  75. 75. 17 secMotion prototypingbefore you code
  76. 76. Interaction
  77. 77. What’s really different?
  78. 78. Oh… That…
  79. 79. Hick’s Law (1952):…in other words, decisions take timeT = blog2(n + 1)
  80. 80. why Modern UImattersVEHICLE FOR GENERATING LOVEEXPERIENCE HARMONYconsistent, cohesive cravableCONNECTS PEOPLE TO WHAT THEY LOVEAND IN A WAY THEY LOVE IT
  81. 81. Information DesignBauhausIndustrialTypographyWayfinding MotionModernUIprimers
  82. 82. http://color.method.ac/colorhttp://type.method.ac/type spacehttp://shape.method.ac/type shape

×