Metro Design Language
Download as PPTX, PDF21 likes6,658 views
The document discusses the Metro design language, emphasizing its modern, clean, and fluid characteristics. It outlines principles such as authenticity, functionality, and the importance of content over decorative elements. Additionally, it provides guidance on leveraging typography, navigation, and interaction styles to create intuitive and compelling user experiences.
Metro Design Language
- 1. ALL ABOARD: The Metro Design Language and what it Means to you Shane Morris Automatic Studio
- 2. METRO DESIGN LANGUAGE 2 SHANE MORRIS a bit about me
- 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. the evolution of metro
- 5. the evolution of metro
- 6. the evolution of metro
- 7. METRO DESIGN LANGUAGE 7 the evolution of metro
- 10. metro influences MODERN DESIGN - BAUHAUS INTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGN MOTION DESIGN – CINEMATOGRAPHY
- 11. METRO DESIGN LANGUAGE 11 INFLUENCES modern design FORM FOLLOWS FUNCTION MASS PRODUCTION Now: Mass digitisation historiarte1.wikispaces.com
- 12. INFLUENCES international style INFORMATION IS BEAUTIFUL wikimedia.org
- 13. INFLUENCES motion design MOTION DESIGN IS QUINTESSENTIALLY MODERN Saul Bass http://www.youtube.com/watch?v=jIlqatMQSgI
- 14. metro principles – windows 8 PRIDE IN CRAFTSMANSHIP BE FAST AND FLUID AUTHENTICALLY DIGITAL DO MORE WITH LESS WIN AS ONE
- 15. PRINCIPLES pride in craftsmanship SWEAT THE DETAILS LOOK LIKE YOU BELONG MAKE IT SAFE AND RELIABLE BALANCE, SYMMETRY, HIERARCHY ALIGN TO THE GRID
- 16. 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
- 17. PRINCIPLES authentically digital CLOUD CONNECTED DYNAMIC AND ALIVE BEAUTIFUL USE OF TYPOGRAPHY BOLD VIBRANT COLORS MOTION
- 18. PRINCIPLES do more with less BE GREAT AT SOMETHING FOCUSED AND DIRECT CONTENT BEFORE CHROME INSPIRE CONFIDENCE
- 19. PRINCIPLES win as one FIT INTO THE UI MODEL REDUCE REDUNDANCY WORK TOGETHER TO COMPLETE SCENARIOS TOOLS AND TEMPLATES ARE DESIGNED TO SCALE
- 20. what metro means
- 21. 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
- 22. 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
- 23. METRO DESIGN LANGUAGE 23 SHANE’S TIPS getting metro right CONTENT BEFORE CHROME FUNCTIONAL MINIMALISM FLATTER, WIDER NAVIGATION INFORMATION HIERARCHY PLATFORM CONVENTIONS
- 24. METRO DESIGN LANGUAGE 24 GETTING METRO RIGHT content before chrome LET THE CONTENT BE THE INTERFACE Be trustworthy MOVE COMMANDS TO THE APP BAR
- 29. 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
- 30. 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
- 31. FLATTER, WIDER NAVIGATION hierarchical navigation
- 32. FLATTER, WIDER NAVIGATION flat navigation
- 33. METRO DESIGN LANGUAGE 33 FLATTER, WIDER NAVIGATION the panorama / grid
- 34. METRO DESIGN LANGUAGE 34 GETTING METRO RIGHT information hierarchy COMMUNICATE A CLEAR HIERARCHY OF INFORMATION Tools Typography size colour weight Alignment Whitespace
- 35. 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
- 36. METRO DESIGN LANGUAGE 36 PLATFORM CONVENTIONS visual style THE ROLE OF VISUAL DESIGN 1. Communicate 2. Evoke 3. Decorate
- 37. METRO DESIGN LANGUAGE 37 VISUAL STYLE branding
- 38. 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
- 39. METRO DESIGN LANGUAGE 39 PLATFORM CONVENTIONS layout WHAT IS YOUR SILHOUETTE?
- 41. METRO DESIGN LANGUAGE 41 PLATFORM CONVENTIONS layout STANDARD TEMPLATES Built into Blend and Visual Studio Behind everything: the grid
- 47. LAYOUT reactive design Minimum (1024x768px) Snap view (320px - required)
- 48. PLATFORM CONVENTIONS iconography ICONS IN THE APPLICATION MENU SHOULD BE CONSISTENT TEST ICONS WITH USERS (pay attention to context)
- 49. 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
- 50. type sizes (windows 8)
- 51. METRO DESIGN LANGUAGE 51 PLATFORM CONVENTIONS typography - hierarchy CASE size weight alignment alignment proximity proximity colour colour
- 52. METRO DESIGN LANGUAGE 52 PLATFORM CONVENTIONS interaction STANDARD CONTROLS STANDARD GESTURES
- 53. 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
- 54. PLATFORM CONVENTIONS contracts – windows8 SEARCH SHARE SETTINGS PICKER
- 55. METRO DESIGN LANGUAGE 55 SUMMARY
- 56. 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
- 57. 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
- 59. Follow us on use hash tag
Editor's Notes
- #10: role of wayfinding signage.All about content and clear communication
- #20: related to be good at something.leverage the work of others to be great.
- #21: Post-chromeImplications for user behaviourOne design language for multiple screens
- #26: this app is about reading articles, but you wouldn’t know it.
- #34: magazine rackpique interestSearch PLUS Browse
- #39: What does the tile, home panorama etc say about your brand?
- #44: note hierarchy
- #47: Gridis super important as a way to communicate grouping and hierarchy.
- #50: Calibri needs to be slightly bigger to align with Segoe. (See slide, both same height)no italics
- #51: Asian scripts – same proportions, or at least same intentions
- #52: note consistent use of everything, especially colourless is more – minimise variation!
- #53: including swipe from sidetransverse swipe to select
- #55: Important part of the platform experience (“win as one”)