SlideShare a Scribd company logo
1 of 54
Download to read offline
ALL ABOARD:
the Metro design language
and what it means to you
SHANE MORRIS
METRO DESIGN LANGUAGE   2




C:UsersshanemDropboxSM Working FilesSM Automatic
FilesProductsWindows Phone
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.
METRO DESIGN LANGUAGE   4




a bit about me
METRO DESIGN LANGUAGE   5




WARNING: MAY CONTAIN TRACES OF OPINIONS

WHAT I WANT TO TALK ABOUT
METRO DESIGN LANGUAGE   6




BACKGROUND
BACKGROUND

the evolution of metro




                         www.superkids.com/aweb/pages/
                         reviews/encyclo1/encart95/mlk_ms.gif
BACKGROUND

the evolution of metro
BACKGROUND

the evolution of metro
BACKGROUND

the evolution of metro
METRO DESIGN LANGUAGE   11

BACKGROUND

the evolution of metro
Metro Design Language - WebDU
METRO DESIGN LANGUAGE   13




WHAT ABOUT THE “RIBBON”?
METRO DESIGN LANGUAGE   14




fluent ui and metro
FLUENT UI             METRO




function focussed     content focused




  input    output       input    output
METRO DESIGN LANGUAGE   15




WINDOWS 8 „METRO-STYLE‟ APPS

VERY QUICK DEMO
METRO DESIGN LANGUAGE   16




metro characteristics
              INTERACTION                  INFORMATION
VISUAL DESIGN DESIGN                       DESIGN
Flat colour      Lack of controls          Live tiles
Typography       Animation                 Semantic zoom (Windows 8)
Whitespace       Live tiles                Panoramic views
Panoramic view   Edge swipes (Windows 8)
                 Panoramic views
METRO DESIGN LANGUAGE   17




INSPIRATION
Metro Design Language - WebDU
metro influences
MODERN DESIGN - BAUHAUS
INTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGN
MOTION DESIGN – CINEMATOGRAPHY
METRO DESIGN LANGUAGE   20

INFLUENCES

modern design
bauhaus

“FORM FOLLOWS FUNCTION”


MASS PRODUCTION
Now: Mass digitisation




                                      chairsdesign.net
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
INFLUENCES

motion design
MOTION DESIGN IS QUINTESSENTIALLY MODERN




                                                                  Saul Bass
                                North by Northwest - Metro-Goldwyn-Mayer
                                              http://youtu.be/jIlqatMQSgI
METRO DESIGN LANGUAGE   23




metro characteristics
              INTERACTION                  INFORMATION
VISUAL DESIGN DESIGN                       DESIGN
Flat colour      Lack of controls          Live tiles
Typography       Animation                 Semantic zoom (Windows 8)
Whitespace       Live tiles                Panoramic views
Panoramic view   Edge swipes (Windows 8)
                 Panoramic views
METRO DESIGN LANGUAGE   24




metro characteristics
              INTERACTION                  INFORMATION
VISUAL DESIGN DESIGN                       DESIGN
Flat colour      Lack of controls          Live tiles
Typography       Animation                 Semantic zoom (Windows 8)
Whitespace       Live tiles                Panoramic views
Panoramic view   Edge swipes (Windows 8)
                 Panoramic views
METRO DESIGN LANGUAGE   25




TYPOGRAPHY AND
WHITESPACE
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
METRO DESIGN LANGUAGE   27

TYPOGRAPHY AND WHITESPACE

visual hierarchy


size
CASE




weight
 alignment                  alignment
 proximity                  proximity
 colour                     colour
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
METRO DESIGN LANGUAGE   29




PANORAMAS
METRO DESIGN LANGUAGE   30

FLATTER, WIDER NAVIGATION

panorama
METRO DESIGN LANGUAGE   31




ANIMATION
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
METRO DESIGN LANGUAGE   33




LIVE TILES
Metro Design Language - WebDU
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
METRO DESIGN LANGUAGE   36




METRO PRINCIPLES
WINDOWS 8

metro principles
PRIDE IN CRAFTSMANSHIP
BE FAST AND FLUID
AUTHENTICALLY DIGITAL
DO MORE WITH LESS
WIN AS ONE
METRO PRINCIPLES

authentically digital
METRO PRINCIPLES

authentically digital
METRO DESIGN LANGUAGE   40

AUTHENTICALLY DIGITAL

semantic zoom
                        msdn.microsoft.com/en-us/
                        library/windows/apps/hh465319.aspx
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
METRO DESIGN LANGUAGE 42
              flickr.com/photos/cybjorg/2332714629/




METRO – THE DESIGN
LANGUAGE FOR
DEVELOPERS?
metro influences
MODERN DESIGN - BAUHAUS           DESIGN BY NUMBERS?
INTERNATIONAL TYPOGRAPHIC STYLE
– SWISS DESIGN
MOTION DESIGN – CINEMATOGRAPHY
METRO DESIGN LANGUAGE   44




METRO:
THE SAFE PATH TO
„ADEQUATE‟?
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
METRO DESIGN LANGUAGE   46

METRO CHALLENGES

branding
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
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
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.
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
what metro means
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…
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
thank you
SHANE MORRIS
SHANE@AUTOMATICSTUDIO.COM.AU
@SHANEMO

More Related Content

Viewers also liked

Integrating Technology In Education
Integrating Technology In EducationIntegrating Technology In Education
Integrating Technology In EducationBrent Daigle, Ph.D.
 
Disproportionate Representation In Special Education
Disproportionate Representation In Special  EducationDisproportionate Representation In Special  Education
Disproportionate Representation In Special EducationBrent Daigle, Ph.D.
 
Foundations Of Effective Technology Integration
Foundations Of Effective Technology  IntegrationFoundations Of Effective Technology  Integration
Foundations Of Effective Technology IntegrationBrent Daigle, Ph.D.
 
Essential Technology Resources For Educators !!!
Essential Technology Resources For Educators !!!Essential Technology Resources For Educators !!!
Essential Technology Resources For Educators !!!Brent Daigle, Ph.D.
 
Diaporama Seance Commune
Diaporama Seance CommuneDiaporama Seance Commune
Diaporama Seance CommuneMarty Bruno
 
I N V E R N O N A F I N L A N D I A
I N V E R N O  N A  F I N L A N D I AI N V E R N O  N A  F I N L A N D I A
I N V E R N O N A F I N L A N D I ATVPortugal
 
Silverlight Splashes Out
Silverlight Splashes OutSilverlight Splashes Out
Silverlight Splashes OutShane Morris
 
Non food Incentives and Rewards to Use in the Classroom
Non food Incentives and Rewards to Use in the ClassroomNon food Incentives and Rewards to Use in the Classroom
Non food Incentives and Rewards to Use in the ClassroomBrent Daigle, Ph.D.
 
Cerejeirasno Japã£O
Cerejeirasno Japã£OCerejeirasno Japã£O
Cerejeirasno Japã£OTVPortugal
 
Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712Shane Morris
 
Citizen Power Project
Citizen Power ProjectCitizen Power Project
Citizen Power Projectsmuemd
 
Be kind to everyone book (reading comprehension)
Be kind to everyone book (reading comprehension)Be kind to everyone book (reading comprehension)
Be kind to everyone book (reading comprehension)Brent Daigle, Ph.D.
 

Viewers also liked (20)

Top 100 High Schools In The Usa
Top 100 High Schools In The UsaTop 100 High Schools In The Usa
Top 100 High Schools In The Usa
 
Branches Of Government
Branches Of GovernmentBranches Of Government
Branches Of Government
 
Intellectual Disabilities
Intellectual DisabilitiesIntellectual Disabilities
Intellectual Disabilities
 
Integrating Technology In Education
Integrating Technology In EducationIntegrating Technology In Education
Integrating Technology In Education
 
Disproportionate Representation In Special Education
Disproportionate Representation In Special  EducationDisproportionate Representation In Special  Education
Disproportionate Representation In Special Education
 
Foundations Of Effective Technology Integration
Foundations Of Effective Technology  IntegrationFoundations Of Effective Technology  Integration
Foundations Of Effective Technology Integration
 
Essential Technology Resources For Educators !!!
Essential Technology Resources For Educators !!!Essential Technology Resources For Educators !!!
Essential Technology Resources For Educators !!!
 
Placevaluewords
PlacevaluewordsPlacevaluewords
Placevaluewords
 
Diaporama Seance Commune
Diaporama Seance CommuneDiaporama Seance Commune
Diaporama Seance Commune
 
I N V E R N O N A F I N L A N D I A
I N V E R N O  N A  F I N L A N D I AI N V E R N O  N A  F I N L A N D I A
I N V E R N O N A F I N L A N D I A
 
Silverlight Splashes Out
Silverlight Splashes OutSilverlight Splashes Out
Silverlight Splashes Out
 
Non food Incentives and Rewards to Use in the Classroom
Non food Incentives and Rewards to Use in the ClassroomNon food Incentives and Rewards to Use in the Classroom
Non food Incentives and Rewards to Use in the Classroom
 
Cerejeirasno Japã£O
Cerejeirasno Japã£OCerejeirasno Japã£O
Cerejeirasno Japã£O
 
Vitrais
VitraisVitrais
Vitrais
 
Overview Of Direct Instruction
Overview Of  Direct  InstructionOverview Of  Direct  Instruction
Overview Of Direct Instruction
 
Reading comprehension
Reading comprehensionReading comprehension
Reading comprehension
 
Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712Aimia- Future Of Usability 0712
Aimia- Future Of Usability 0712
 
Citizen Power Project
Citizen Power ProjectCitizen Power Project
Citizen Power Project
 
Be kind to everyone book (reading comprehension)
Be kind to everyone book (reading comprehension)Be kind to everyone book (reading comprehension)
Be kind to everyone book (reading comprehension)
 
Apa Quick Reference Guide
Apa Quick Reference GuideApa Quick Reference Guide
Apa Quick Reference Guide
 

Similar to Metro Design Language - WebDU

Metro Design Language
Metro Design LanguageMetro Design Language
Metro Design LanguageShane Morris
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft StoryNikita Lukianets
 
Modelling the User Interface
Modelling the User InterfaceModelling the User Interface
Modelling the User InterfacePedro J. Molina
 
WIndows Phone 7 UX
WIndows Phone 7 UXWIndows Phone 7 UX
WIndows Phone 7 UXShane Morris
 
Designing Globe News - Windows 8 App Workshop
Designing Globe News - Windows 8 App WorkshopDesigning Globe News - Windows 8 App Workshop
Designing Globe News - Windows 8 App WorkshopLuciano Castillo
 
From Print to Digital Design
From Print to Digital DesignFrom Print to Digital Design
From Print to Digital DesignAndrew Duck
 
What makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest SydneyWhat makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest SydneyShane Morris
 
UX Unicorns - legend or fable?
UX Unicorns - legend or fable?UX Unicorns - legend or fable?
UX Unicorns - legend or fable?Vanessa Kirby
 
Graphic Design Introduction Upload
Graphic Design Introduction   UploadGraphic Design Introduction   Upload
Graphic Design Introduction UploadNida Aslam
 
Insight show slides final june 2011 text
Insight show slides final june 2011 textInsight show slides final june 2011 text
Insight show slides final june 2011 textChris Arning
 
Bringing the Sidekick Back by Charles Goran
Bringing the Sidekick Back by Charles GoranBringing the Sidekick Back by Charles Goran
Bringing the Sidekick Back by Charles GoranDeviceDesignDay
 
Unthinkable Drinks - Design the Future
Unthinkable Drinks - Design the FutureUnthinkable Drinks - Design the Future
Unthinkable Drinks - Design the FutureMatthew Olney
 
ISMAR 2014 AR Workshop: Designing Location Based Experiences
ISMAR 2014 AR Workshop: Designing Location Based ExperiencesISMAR 2014 AR Workshop: Designing Location Based Experiences
ISMAR 2014 AR Workshop: Designing Location Based ExperiencesMark Melnykowycz
 
Portfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the JobPortfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the JobLynn Teo
 
UX Portfolios Matter
UX Portfolios MatterUX Portfolios Matter
UX Portfolios MatterJobvite
 

Similar to Metro Design Language - WebDU (20)

Metro Design Language
Metro Design LanguageMetro Design Language
Metro Design Language
 
Flat Design. Microsoft Story
Flat Design. Microsoft StoryFlat Design. Microsoft Story
Flat Design. Microsoft Story
 
Modelling the User Interface
Modelling the User InterfaceModelling the User Interface
Modelling the User Interface
 
When Games Go Small
When Games Go SmallWhen Games Go Small
When Games Go Small
 
WIndows Phone 7 UX
WIndows Phone 7 UXWIndows Phone 7 UX
WIndows Phone 7 UX
 
Designing Globe News - Windows 8 App Workshop
Designing Globe News - Windows 8 App WorkshopDesigning Globe News - Windows 8 App Workshop
Designing Globe News - Windows 8 App Workshop
 
From Print to Digital Design
From Print to Digital DesignFrom Print to Digital Design
From Print to Digital Design
 
What makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest SydneyWhat makes your app grouse - #appfest Sydney
What makes your app grouse - #appfest Sydney
 
Holistic Brand Language
Holistic Brand LanguageHolistic Brand Language
Holistic Brand Language
 
UX Unicorns - legend or fable?
UX Unicorns - legend or fable?UX Unicorns - legend or fable?
UX Unicorns - legend or fable?
 
Some words about me 2012
Some words about me 2012Some words about me 2012
Some words about me 2012
 
Graphic Design Introduction Upload
Graphic Design Introduction   UploadGraphic Design Introduction   Upload
Graphic Design Introduction Upload
 
Flat Design
Flat DesignFlat Design
Flat Design
 
Putting the Microsoft Design Language to work
Putting the Microsoft Design Language to workPutting the Microsoft Design Language to work
Putting the Microsoft Design Language to work
 
Insight show slides final june 2011 text
Insight show slides final june 2011 textInsight show slides final june 2011 text
Insight show slides final june 2011 text
 
Bringing the Sidekick Back by Charles Goran
Bringing the Sidekick Back by Charles GoranBringing the Sidekick Back by Charles Goran
Bringing the Sidekick Back by Charles Goran
 
Unthinkable Drinks - Design the Future
Unthinkable Drinks - Design the FutureUnthinkable Drinks - Design the Future
Unthinkable Drinks - Design the Future
 
ISMAR 2014 AR Workshop: Designing Location Based Experiences
ISMAR 2014 AR Workshop: Designing Location Based ExperiencesISMAR 2014 AR Workshop: Designing Location Based Experiences
ISMAR 2014 AR Workshop: Designing Location Based Experiences
 
Portfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the JobPortfolios Matter: Building the Portfolio to Win the Job
Portfolios Matter: Building the Portfolio to Win the Job
 
UX Portfolios Matter
UX Portfolios MatterUX Portfolios Matter
UX Portfolios Matter
 

More from Shane Morris

Morris prototyping - oredev - share
Morris   prototyping - oredev - shareMorris   prototyping - oredev - share
Morris prototyping - oredev - shareShane Morris
 
Expression Blend for Windows Phone
Expression Blend for Windows PhoneExpression Blend for Windows Phone
Expression Blend for Windows PhoneShane Morris
 
101 Things I Learned In Interaction Design School - Web Directions South
101 Things I Learned In Interaction Design School - Web Directions South101 Things I Learned In Interaction Design School - Web Directions South
101 Things I Learned In Interaction Design School - Web Directions SouthShane Morris
 
Defining the recipient journey ux
Defining the recipient journey uxDefining the recipient journey ux
Defining the recipient journey uxShane Morris
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Shane Morris
 
Design For Multiple Touchpoints
Design For Multiple TouchpointsDesign For Multiple Touchpoints
Design For Multiple TouchpointsShane Morris
 
Design In The Round: Creating Compelling User Experiences for Surface
Design In The Round: Creating Compelling User Experiences for SurfaceDesign In The Round: Creating Compelling User Experiences for Surface
Design In The Round: Creating Compelling User Experiences for SurfaceShane Morris
 
Customer Experience and the 3 F's
Customer Experience and the 3 F'sCustomer Experience and the 3 F's
Customer Experience and the 3 F'sShane Morris
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane MorrisShane Morris
 
Web311 Designing Compelling Silverlight User Experiences With Expression St...
Web311   Designing Compelling Silverlight User Experiences With Expression St...Web311   Designing Compelling Silverlight User Experiences With Expression St...
Web311 Designing Compelling Silverlight User Experiences With Expression St...Shane Morris
 
Pimp My App Shane Morris
Pimp My App   Shane MorrisPimp My App   Shane Morris
Pimp My App Shane MorrisShane Morris
 
Using Microsoft Silverlight for Creating Rich Mobile User Experiences
Using Microsoft Silverlight for Creating Rich Mobile User ExperiencesUsing Microsoft Silverlight for Creating Rich Mobile User Experiences
Using Microsoft Silverlight for Creating Rich Mobile User ExperiencesShane Morris
 
Pimp My App Shane Morris
Pimp My App   Shane MorrisPimp My App   Shane Morris
Pimp My App Shane MorrisShane Morris
 

More from Shane Morris (13)

Morris prototyping - oredev - share
Morris   prototyping - oredev - shareMorris   prototyping - oredev - share
Morris prototyping - oredev - share
 
Expression Blend for Windows Phone
Expression Blend for Windows PhoneExpression Blend for Windows Phone
Expression Blend for Windows Phone
 
101 Things I Learned In Interaction Design School - Web Directions South
101 Things I Learned In Interaction Design School - Web Directions South101 Things I Learned In Interaction Design School - Web Directions South
101 Things I Learned In Interaction Design School - Web Directions South
 
Defining the recipient journey ux
Defining the recipient journey uxDefining the recipient journey ux
Defining the recipient journey ux
 
Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!Silverlight won't save your user experience - you will!
Silverlight won't save your user experience - you will!
 
Design For Multiple Touchpoints
Design For Multiple TouchpointsDesign For Multiple Touchpoints
Design For Multiple Touchpoints
 
Design In The Round: Creating Compelling User Experiences for Surface
Design In The Round: Creating Compelling User Experiences for SurfaceDesign In The Round: Creating Compelling User Experiences for Surface
Design In The Round: Creating Compelling User Experiences for Surface
 
Customer Experience and the 3 F's
Customer Experience and the 3 F'sCustomer Experience and the 3 F's
Customer Experience and the 3 F's
 
From Website To Webapp Shane Morris
From Website To Webapp   Shane MorrisFrom Website To Webapp   Shane Morris
From Website To Webapp Shane Morris
 
Web311 Designing Compelling Silverlight User Experiences With Expression St...
Web311   Designing Compelling Silverlight User Experiences With Expression St...Web311   Designing Compelling Silverlight User Experiences With Expression St...
Web311 Designing Compelling Silverlight User Experiences With Expression St...
 
Pimp My App Shane Morris
Pimp My App   Shane MorrisPimp My App   Shane Morris
Pimp My App Shane Morris
 
Using Microsoft Silverlight for Creating Rich Mobile User Experiences
Using Microsoft Silverlight for Creating Rich Mobile User ExperiencesUsing Microsoft Silverlight for Creating Rich Mobile User Experiences
Using Microsoft Silverlight for Creating Rich Mobile User Experiences
 
Pimp My App Shane Morris
Pimp My App   Shane MorrisPimp My App   Shane Morris
Pimp My App Shane Morris
 

Recently uploaded

The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 

Recently uploaded (20)

The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 

Metro Design Language - WebDU

  • 1. ALL ABOARD: the Metro design language and what it means to you SHANE MORRIS
  • 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.
  • 4. METRO DESIGN LANGUAGE 4 a bit about me
  • 5. METRO DESIGN LANGUAGE 5 WARNING: MAY CONTAIN TRACES OF OPINIONS WHAT I WANT TO TALK ABOUT
  • 6. METRO DESIGN LANGUAGE 6 BACKGROUND
  • 7. BACKGROUND the evolution of metro www.superkids.com/aweb/pages/ reviews/encyclo1/encart95/mlk_ms.gif
  • 11. METRO DESIGN LANGUAGE 11 BACKGROUND the evolution of metro
  • 13. METRO DESIGN LANGUAGE 13 WHAT ABOUT THE “RIBBON”?
  • 14. METRO DESIGN LANGUAGE 14 fluent ui and metro FLUENT UI METRO function focussed content focused input output input output
  • 15. METRO DESIGN LANGUAGE 15 WINDOWS 8 „METRO-STYLE‟ APPS VERY QUICK DEMO
  • 16. METRO DESIGN LANGUAGE 16 metro characteristics INTERACTION INFORMATION VISUAL DESIGN DESIGN DESIGN Flat colour Lack of controls Live tiles Typography Animation Semantic zoom (Windows 8) Whitespace Live tiles Panoramic views Panoramic view Edge swipes (Windows 8) Panoramic views
  • 17. METRO DESIGN LANGUAGE 17 INSPIRATION
  • 19. metro influences MODERN DESIGN - BAUHAUS INTERNATIONAL TYPOGRAPHIC STYLE – SWISS DESIGN MOTION DESIGN – CINEMATOGRAPHY
  • 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
  • 22. INFLUENCES motion design MOTION DESIGN IS QUINTESSENTIALLY MODERN Saul Bass North by Northwest - Metro-Goldwyn-Mayer http://youtu.be/jIlqatMQSgI
  • 23. METRO DESIGN LANGUAGE 23 metro characteristics INTERACTION INFORMATION VISUAL DESIGN DESIGN DESIGN Flat colour Lack of controls Live tiles Typography Animation Semantic zoom (Windows 8) Whitespace Live tiles Panoramic views Panoramic view Edge swipes (Windows 8) Panoramic views
  • 24. METRO DESIGN LANGUAGE 24 metro characteristics INTERACTION INFORMATION VISUAL DESIGN DESIGN DESIGN Flat colour Lack of controls Live tiles Typography Animation Semantic zoom (Windows 8) Whitespace Live tiles Panoramic views Panoramic view Edge swipes (Windows 8) Panoramic views
  • 25. METRO DESIGN LANGUAGE 25 TYPOGRAPHY AND WHITESPACE
  • 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
  • 29. METRO DESIGN LANGUAGE 29 PANORAMAS
  • 30. METRO DESIGN LANGUAGE 30 FLATTER, WIDER NAVIGATION panorama
  • 31. METRO DESIGN LANGUAGE 31 ANIMATION
  • 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
  • 33. METRO DESIGN LANGUAGE 33 LIVE TILES
  • 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
  • 36. METRO DESIGN LANGUAGE 36 METRO PRINCIPLES
  • 37. WINDOWS 8 metro principles PRIDE IN CRAFTSMANSHIP BE FAST AND FLUID AUTHENTICALLY DIGITAL DO MORE WITH LESS WIN AS ONE
  • 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
  • 44. METRO DESIGN LANGUAGE 44 METRO: THE SAFE PATH TO „ADEQUATE‟?
  • 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
  • 46. METRO DESIGN LANGUAGE 46 METRO CHALLENGES branding
  • 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

Editor's Notes

  1. Microsoft’s new design languageInteresting Departure from contemporary phone and tablet UI’s I nparticularMS showing a rare amount of confidence in its design
  2. Set the scene with a videoIgnore marketing messagesSkepticNoteTypographyContent before chromeMotionLive TilePanoramic views
  3. We’ll come back to “Authentic”
  4. Disclosure:recovering MS employee and MVP
  5. 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.
  6. Metro didn’t strictly appear out of nowhere
  7. no coincidence – it’s all about the content
  8. started with media centreanimationXX more pics
  9. Once again, all about contentMinimal controls, minimal interactive functionality (search and browse)1st panorama, with selection of content (XXX pic of panorama)
  10. Panorama, live tiles
  11. Panormam
  12. Desktop is not deadStrength and weakness of Windows 8
  13. This is where it starts to make senserole of wayfinding signage.All about content and clear communication
  14. rational
  15. Truth of text and truth of photographyDesigners newly able to be flexible with photography and layout due to printing advances (photo composition)
  16. Metro takes it furtherUses motion to orientBest on the phone
  17. 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
  18. note consistent use of everything, especially colourless is more – minimise variation!
  19. typography is a natural visual hierarchyCoz the smaller it gets the closer you have to lookEasy for non-designers to applyImportance of grid
  20. not just for show
  21. Grids or Hubs in Win 8Spatial reasoningWide and flat navigationSearch Plus BrowseContent orientedmagazine rackpique interestUniquely Metro Identity
  22. New challenge – motion designPhone does it best
  23. Inevitable response to need to surface content and provide a marketplaceMore or less open
  24. Demo the levelsLive tiles are just politeNot a guessing game
  25. 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.
  26. 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.
  27. 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
  28. Bauhaus – rationaleInternational Style – the information is enoughMotion design – delight with a purpose.
  29. 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.
  30. Interaction DesignIf you’re designing an RSS reader or photo browser you’re in business
  31. XXX branded app picThese opportunities are not unique to Metro
  32. Post-chromeImplications for user behaviourOne design language for multiple screens
  33. sort of by way of summaryInformation is beautifulSo information has to do more – eg provide the visual hierarchy, and the identity