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.
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
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
25.
26.
27.
28.
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
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
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
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
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
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