Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Metro Design Language

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 59 Anzeige
Anzeige

Weitere Verwandte Inhalte

Andere mochten auch (20)

Anzeige

Weitere von Shane Morris (17)

Aktuellste (20)

Anzeige

Metro Design Language

  1. 1. ALL ABOARD: The Metro Design Language and what it Means to you Shane Morris Automatic Studio
  2. 2. METRO DESIGN LANGUAGE 2 SHANE MORRIS a bit about me
  3. 3. 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.
  4. 4. the evolution of metro
  5. 5. the evolution of metro
  6. 6. the evolution of metro
  7. 7. METRO DESIGN LANGUAGE 7 the evolution of metro
  8. 8. metro inspiration
  9. 9. metro influences MODERN DESIGN - BAUHAUS INTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGN MOTION DESIGN – CINEMATOGRAPHY
  10. 10. METRO DESIGN LANGUAGE 11 INFLUENCES modern design FORM FOLLOWS FUNCTION MASS PRODUCTION Now: Mass digitisation historiarte1.wikispaces.com
  11. 11. INFLUENCES international style INFORMATION IS BEAUTIFUL wikimedia.org
  12. 12. INFLUENCES motion design MOTION DESIGN IS QUINTESSENTIALLY MODERN Saul Bass http://www.youtube.com/watch?v=jIlqatMQSgI
  13. 13. metro principles – windows 8 PRIDE IN CRAFTSMANSHIP BE FAST AND FLUID AUTHENTICALLY DIGITAL DO MORE WITH LESS WIN AS ONE
  14. 14. PRINCIPLES pride in craftsmanship SWEAT THE DETAILS LOOK LIKE YOU BELONG MAKE IT SAFE AND RELIABLE BALANCE, SYMMETRY, HIERARCHY ALIGN TO THE GRID
  15. 15. PRINCIPLES be fast and fluid LIFE IS MOBILE ORIENT WITH MOTION DELIGHT WITH MOTION DESIGN FOR TOUCH INTUITIVE INTERACTION BE RESPONSIVE AND READY IMMERSIVE AND COMPELLING
  16. 16. PRINCIPLES authentically digital CLOUD CONNECTED DYNAMIC AND ALIVE BEAUTIFUL USE OF TYPOGRAPHY BOLD VIBRANT COLORS MOTION
  17. 17. PRINCIPLES do more with less BE GREAT AT SOMETHING FOCUSED AND DIRECT CONTENT BEFORE CHROME INSPIRE CONFIDENCE
  18. 18. PRINCIPLES win as one FIT INTO THE UI MODEL REDUCE REDUNDANCY WORK TOGETHER TO COMPLETE SCENARIOS TOOLS AND TEMPLATES ARE DESIGNED TO SCALE
  19. 19. what metro means
  20. 20. METRO DESIGN LANGUAGE 21 the metro secret LOOKS EASY, EH? BUT YOUR MISTAKES ARE EVEN MORE OBVIOUS LESS VISUAL DEVICES TO  Direct attention  Communicate grouping  Delight  Brand
  21. 21. THE METRO SECRET metro is more than just a visual style ATTITUDE LIKE ALL GOOD DESIGN, DESIGNING Fast, light… FOR METRO DOES NOT START WITH VISUALS NAVIGATION STYLE AND STRUCTURE INTERACTION STYLE AND STRUCTURE SILHOUETTE VISUAL LANGUAGE
  22. 22. METRO DESIGN LANGUAGE 23 SHANE’S TIPS getting metro right CONTENT BEFORE CHROME FUNCTIONAL MINIMALISM FLATTER, WIDER NAVIGATION INFORMATION HIERARCHY PLATFORM CONVENTIONS
  23. 23. METRO DESIGN LANGUAGE 24 GETTING METRO RIGHT content before chrome LET THE CONTENT BE THE INTERFACE Be trustworthy MOVE COMMANDS TO THE APP BAR
  24. 24. GETTING METRO RIGHT functional minimalism BE 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 30 GETTING METRO RIGHT flatter, wider navigation FEWER ORIENTATION CUES (Breadcrumbs) LEVERAGE PANORAMA / GRID Spatial memory Search plus Browse BE TRUE TO PLATFORM
  26. 26. FLATTER, WIDER NAVIGATION hierarchical navigation
  27. 27. FLATTER, WIDER NAVIGATION flat navigation
  28. 28. METRO DESIGN LANGUAGE 33 FLATTER, WIDER NAVIGATION the panorama / grid
  29. 29. METRO DESIGN LANGUAGE 34 GETTING METRO RIGHT information hierarchy COMMUNICATE A CLEAR HIERARCHY OF INFORMATION Tools  Typography  size  colour  weight  Alignment  Whitespace
  30. 30. GETTING METRO RIGHT platform conventions VISUAL STYLE LOOK LIKE YOU BELONG LAYOUT METRO (WINDOWS 8) UX GUIDELINES msdn.microsoft.com/en- ICONOGRAPHY AND TYPOGRAPHY us/library/windows/apps/hh779072.aspx INTERACTION NAVIGATION ANIMATION CONTRACTS
  31. 31. METRO DESIGN LANGUAGE 36 PLATFORM CONVENTIONS visual style THE ROLE OF VISUAL DESIGN 1. Communicate 2. Evoke 3. Decorate
  32. 32. METRO DESIGN LANGUAGE 37 VISUAL STYLE branding
  33. 33. VISUAL STYLE branding USE SEGOE, OR YOUR COMPANY BRAND IS A CONVERSATION BETWEEN TYPEFACE, PROBABLY NOT BOTH YOU AND YOUR CUSTOMERS Not just COMPANY COLOURS  Colours BRAND IMAGERY  Fonts  Logos
  34. 34. METRO DESIGN LANGUAGE 39 PLATFORM CONVENTIONS layout WHAT IS YOUR SILHOUETTE?
  35. 35. METRO DESIGN LANGUAGE 41 PLATFORM CONVENTIONS layout STANDARD TEMPLATES Built into Blend and Visual Studio Behind everything: the grid
  36. 36. LAYOUT reactive design Minimum (1024x768px) Snap view (320px - required)
  37. 37. PLATFORM CONVENTIONS iconography ICONS IN THE APPLICATION MENU SHOULD BE CONSISTENT TEST ICONS WITH USERS (pay attention to context)
  38. 38. METRO DESIGN LANGUAGE 49 PLATFORM CONVENTIONS typography - fonts WINDOWS 8 WINDOWS PHONE Segoe UI Segoe WP  Controls and UI elements Segoe WP Light only for large text Calibri  read/write Cambria  reading http://msdn.microsoft.com/en-us/library/windows/apps/hh700394.aspx
  39. 39. type sizes (windows 8)
  40. 40. METRO DESIGN LANGUAGE 51 PLATFORM CONVENTIONS typography - hierarchy CASE size weight alignment alignment proximity proximity colour colour
  41. 41. METRO DESIGN LANGUAGE 52 PLATFORM CONVENTIONS interaction STANDARD CONTROLS STANDARD GESTURES
  42. 42. METRO DESIGN LANGUAGE 53 PLATFORM CONVENTIONS animation MOTION DELIGHTS THE USER USE MOTION TO DELIGHT THE USER MOTION ADDS HINTS TOWARDS REMEMBER THAT PACING IS INTERACTION IMPORTANT: MOTION MASKS SLOW THE MORE YOU USE IT, THE LESS PERFORMANCE SPECIAL IT BECOMES MOTION ADDS PERSONALITY RESPECT STANDARD ANIMATIONS MOTION ADDS CONSISTENCY MOTION ADDS ELEGANCE. msdn.microsoft.com/en- us/library/hh202871(v=vs.92).aspx
  43. 43. PLATFORM CONVENTIONS contracts – windows8 SEARCH SHARE SETTINGS PICKER
  44. 44. METRO DESIGN LANGUAGE 55 SUMMARY
  45. 45. summary METRO PRINCIPLES PLATFORM CONVENTIONS Pride in craftsmanship Visual style Be fast and fluid Layout Authentically digital Typography Do more with less Interaction Win as one Animation Contracts
  46. 46. resources DESIGNING UX FOR APPS (WINDOWS MICROSOFT .TOOLBOX DESIGN 8) TRAINING msdn.microsoft.com/library/windows/apps/ www.microsoft.com/design/toolbox/school hh779072/ USER EXPERIENCE DESIGN GUIDELINES FOR WINDOWS PHONE msdn.microsoft.com/en- us/library/hh202915
  47. 47. Thank You shane@automaticstudio.com.au @shanemo
  48. 48. Follow us on use hash tag

Hinweis der Redaktion

  • 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”)

×