2. METRO DESIGN LANGUAGE 2
C:UsersshanemDropboxSM Working FilesSM Automatic
FilesProductsWindows Phone
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.
20. METRO DESIGN LANGUAGE 20
INFLUENCES
modern design
bauhaus
“FORM FOLLOWS FUNCTION”
MASS PRODUCTION
Now: Mass digitisation
chairsdesign.net
21. INFLUENCES
international style
INFORMATION IS BEAUTIFUL
“a neutral and objective approach that
emphasized rational planning and de-
emphasized the subjective, or individual,
expression”
Britannica
www.britannica.com/EBchecked/topic/1032864/
graphic-design/242772/Graphic-design-1945-75
wikimedia.org
26. METRO DESIGN LANGUAGE 26
TYPOGRAPHY AND ICONOGRAPHY
text vs icons
A PICTURE CAN SAY A THOUSAND WORDS
… but notice we don‟t talk in pictures?
ICONS ARE USEFUL
compact
recognisable
scannable
BUT EVEN MOST ICONS ARE LEARNT THROUGH
THEIR LABELS
27. METRO DESIGN LANGUAGE 27
TYPOGRAPHY AND WHITESPACE
visual hierarchy
size
CASE
weight
alignment alignment
proximity proximity
colour colour
28. METRO DESIGN LANGUAGE 28
TYPOGRAPHY AND WHITESPACE
visual hierarchy
SPARSE VISUAL STYLE COMPRESSES OPTIONS FOR CREATING A VISUAL HIERARCHY
TWO MAIN DEVICES
white space
typography
32. METRO DESIGN LANGUAGE 32
METRO CHARACTERISTICS
animation
MOTION DELIGHTS THE USER MOTION ORIENTS USERS
IN THE APPLICATION
MOTION ADDS HINTS TOWARDS
INTERACTION
MOTION MASKS SLOW PERFORMANCE
MOTION ADDS PERSONALITY
MOTION ADDS CONSISTENCY
MOTION ADDS ELEGANCE.
msdn.microsoft.com/en-us/library/hh202871
35. METRO DESIGN LANGUAGE 35
METRO CHARACTERISTICS
live tiles
APPS ARE NO LONGER JUST „OPEN‟ DEGREES OF „OPEN‟
OR „CLOSED‟ Lock Screen
A REASON TO RETURN Toast
Tile
Snapped
Full Screen
(Filled, Landscape and Portrait)
Maximised
Desktop
40. METRO DESIGN LANGUAGE 40
AUTHENTICALLY DIGITAL
semantic zoom
msdn.microsoft.com/en-us/
library/windows/apps/hh465319.aspx
41. METRO DESIGN LANGUAGE 41
AUTHENTICALLY DIGITAL
content before chrome
CONTENT IS THE INTERFACE CONTROLS DESIGNED TO REFLECT
Remove controls THIS
or relegate them to the App Bar
42. METRO DESIGN LANGUAGE 42
flickr.com/photos/cybjorg/2332714629/
METRO – THE DESIGN
LANGUAGE FOR
DEVELOPERS?
43. metro influences
MODERN DESIGN - BAUHAUS DESIGN BY NUMBERS?
INTERNATIONAL TYPOGRAPHIC STYLE
– SWISS DESIGN
MOTION DESIGN – CINEMATOGRAPHY
45. METRO DESIGN LANGUAGE 45
metro challenges
INTERACTION INFORMATION
VISUAL DESIGN DESIGN DESIGN
Less visual devices to: Lack of affordance Does everything start with a
Direct attention Lack of discoverability panorama?
Communicate grouping Some clear patterns for Beyond that Metro does not
Delight browsing hierarchical offer much
Brand content
Less clear what to do:
highly interactive
transactional
47. METRO CHALLENGES
branding
BRAND IS A CONVERSATION BETWEEN BRAND OPPORTUNITIES
YOU AND YOUR CUSTOMERS Tiles
Not just Personality
Splash screen
Colours
Set tone, reinforce identity
Fonts First launch
Logos Demonstrate value
Landing page
Translate the identity into action
Glyphs and icons
Imagery
Promotional art on the Windows Store
48. THE METRO SECRET
metro is more than just a visual style
VISUAL LANGUAGE LIKE ALL GOOD DESIGN, DESIGNING
Silhouette FOR METRO DOES NOT START WITH
VISUALS
INTERACTION STYLE AND STRUCTURE
NAVIGATION STYLE AND STRUCTURE
ATTITUDE
49. METRO DESIGN LANGUAGE 49
METRO CHALLENGES
so designers can…
RELAX! PANIC!
You are still needed It will take clients much longer to realise
they need you
And by then it may be too late.
50. METRO DESIGN LANGUAGE 50
metro
STRENGTHS WEAKNESSES
Strong, distinct identity Limited visual expressiveness
Easier to get to adequate Danger of bland
Content focussed Less guidance for highly interactive
Animation is a first class citizen applications
Confident Lack of affordance may affect
learnability
Ugly controls
Supermarket screen
52. METRO DESIGN LANGUAGE 52
METRO DESIGN LANGUAGE
what metro says about the future
INFORMATION IS BEAUTIFUL POST-SKEUMORPHISM
So Information has to do more Authentically Digital
Provide the visual hierarchy
BRAND IS A CONVERSATION,
Communicate the identity NOT A LOGO
CONTENT IS THE INTERFACE DESIGN IS STILL REQUIRED
Death of (intrinsic) affordance Adequate is easier, but…
Confident users Just wait, they‟ll come crawling back…
53. resources
DESIGNING UX FOR APPS (WINDOWS MICROSOFT .TOOLBOX DESIGN
8) TRAINING
design.windows.com www.microsoft.com/design/toolbox/school
USER EXPERIENCE DESIGN
GUIDELINES FOR WINDOWS PHONE
msdn.microsoft.com/en-
us/library/hh202915
Microsoft’s new design languageInteresting Departure from contemporary phone and tablet UI’s I nparticularMS showing a rare amount of confidence in its design
Set the scene with a videoIgnore marketing messagesSkepticNoteTypographyContent before chromeMotionLive TilePanoramic views
We’ll come back to “Authentic”
Disclosure:recovering MS employee and MVP
Not teach you MetroPoint out some of the features and talk about what it might mean for interaction design as a whole – Microsoft or not.
Metro didn’t strictly appear out of nowhere
no coincidence – it’s all about the content
started with media centreanimationXX more pics
Once again, all about contentMinimal controls, minimal interactive functionality (search and browse)1st panorama, with selection of content (XXX pic of panorama)
Panorama, live tiles
Panormam
Desktop is not deadStrength and weakness of Windows 8
This is where it starts to make senserole of wayfinding signage.All about content and clear communication
rational
Truth of text and truth of photographyDesigners newly able to be flexible with photography and layout due to printing advances (photo composition)
Metro takes it furtherUses motion to orientBest on the phone
Metro does use icons. For something interesting – for commands.Presumably to create a visual signpost for commands.Then they also give us buttons that are square and ugly. Which is just stupid
note consistent use of everything, especially colourless is more – minimise variation!
typography is a natural visual hierarchyCoz the smaller it gets the closer you have to lookEasy for non-designers to applyImportance of grid
not just for show
Grids or Hubs in Win 8Spatial reasoningWide and flat navigationSearch Plus BrowseContent orientedmagazine rackpique interestUniquely Metro Identity
New challenge – motion designPhone does it best
Inevitable response to need to surface content and provide a marketplaceMore or less open
Demo the levelsLive tiles are just politeNot a guessing game
or leather with stitchingSemantic zoom – and the idea that the display of information changes depending on the level of zoom – is a good example of authentically digital.
or leather with stitchingSemantic zoom – and the idea that the display of information changes depending on the level of zoom – is a good example of authentically digital.
Semantic zoom – and the idea that the display of information changes depending on the level of zoom – is a good example of authentically digital. Authentically Digital Comes back to content before chrome.Less affordanceUser will click
Bauhaus – rationaleInternational Style – the information is enoughMotion design – delight with a purpose.
Metro may help non-designers settle on a visual style, which may get them over an initial hump of looking professionalBut like any design language, Metro cannot solve all your problems.
Interaction DesignIf you’re designing an RSS reader or photo browser you’re in business
XXX branded app picThese opportunities are not unique to Metro
Post-chromeImplications for user behaviourOne design language for multiple screens
sort of by way of summaryInformation is beautifulSo information has to do more – eg provide the visual hierarchy, and the identity