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

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

9. metro inspiration

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

58. Thank You
shane@automaticstudio.com.au
@shanemo

59. Follow us on
use hash tag