SlideShare a Scribd company logo
1 of 13
Metro         By
Design   Chin Wye Jin
"Metro" is an internal
               code name created by
               Microsoft.

               "Metro" is based on the
Introduction   design principles of
               classic Swiss graphic
               design. -- wikipedia

               In designer's language:
               Is a typography-based
               design.
Introduction
Less is More

             Design based on "Best At"

Principles   Typography
Content is the focus, not UI elements.

               Feels fast and responsive

               Focus on main task
Less is more
               Heavily Reduce Unnecessary Elements

               Resulting not just a clean, but also
               simplify the application flow.
Content is King, not UI elements.

               Chrome Bad
               (UI chrome, not google chrome)

               Interaction with Content
Less is more
Different Font styles, size and color to
             show "The King" (Content) in a
             structured ordered.

             Typography is a ART.

Typography
Pick 3 most usage
                          Highest Usage                   Lower Usage


            Build First
                            < Search >

                               1

"Best At"                            < Compare >

                                           2
                                                        < Bookmark >

                                          < Contact >

                                               3           < Share >
            Build Last
Sneak Preview
Buttons
        Check Boxes
        Radio Buttons
        Toggle Switches
        Sliders
        Rating Control
        Select / Dropdown / Combo box Controls

Bonus   Progress Controls
        Tooltips
        Text box


        **Although it is a guidelines for building Metro Style App, but
        most of the stuff stated inside is UX related.
Thank You

More Related Content

Viewers also liked

Internet of things - Business Opportunities in the Connected World
Internet of things - Business Opportunities in the Connected WorldInternet of things - Business Opportunities in the Connected World
Internet of things - Business Opportunities in the Connected WorldJag Randhawa
 
Java Performance: What developers must know
Java Performance: What developers must knowJava Performance: What developers must know
Java Performance: What developers must knowDiego Lemos
 
adaptTo() 2014 - Integrating Open Source Search with CQ/AEM
adaptTo() 2014 - Integrating Open Source Search with CQ/AEMadaptTo() 2014 - Integrating Open Source Search with CQ/AEM
adaptTo() 2014 - Integrating Open Source Search with CQ/AEMtherealgaston
 
Digital Defense for Activists (and the rest of us)
Digital Defense for Activists (and the rest of us)Digital Defense for Activists (and the rest of us)
Digital Defense for Activists (and the rest of us)Michele Chubirka
 
BIM與VR AR虛實整合趨勢
BIM與VR AR虛實整合趨勢BIM與VR AR虛實整合趨勢
BIM與VR AR虛實整合趨勢FAUST CHOU
 
結合雲端新科技跨越真實與虛擬
結合雲端新科技跨越真實與虛擬  結合雲端新科技跨越真實與虛擬
結合雲端新科技跨越真實與虛擬 FAUST CHOU
 
ZNetLive- A Quick Overview
ZNetLive- A Quick OverviewZNetLive- A Quick Overview
ZNetLive- A Quick OverviewZNetLive
 
OOH家外媒體行銷運用ARVR科技案例分享
OOH家外媒體行銷運用ARVR科技案例分享 OOH家外媒體行銷運用ARVR科技案例分享
OOH家外媒體行銷運用ARVR科技案例分享 cori shieh
 

Viewers also liked (9)

Internet of things - Business Opportunities in the Connected World
Internet of things - Business Opportunities in the Connected WorldInternet of things - Business Opportunities in the Connected World
Internet of things - Business Opportunities in the Connected World
 
Java Performance: What developers must know
Java Performance: What developers must knowJava Performance: What developers must know
Java Performance: What developers must know
 
adaptTo() 2014 - Integrating Open Source Search with CQ/AEM
adaptTo() 2014 - Integrating Open Source Search with CQ/AEMadaptTo() 2014 - Integrating Open Source Search with CQ/AEM
adaptTo() 2014 - Integrating Open Source Search with CQ/AEM
 
Digital Defense for Activists (and the rest of us)
Digital Defense for Activists (and the rest of us)Digital Defense for Activists (and the rest of us)
Digital Defense for Activists (and the rest of us)
 
Invest Karnataka
Invest Karnataka Invest Karnataka
Invest Karnataka
 
BIM與VR AR虛實整合趨勢
BIM與VR AR虛實整合趨勢BIM與VR AR虛實整合趨勢
BIM與VR AR虛實整合趨勢
 
結合雲端新科技跨越真實與虛擬
結合雲端新科技跨越真實與虛擬  結合雲端新科技跨越真實與虛擬
結合雲端新科技跨越真實與虛擬
 
ZNetLive- A Quick Overview
ZNetLive- A Quick OverviewZNetLive- A Quick Overview
ZNetLive- A Quick Overview
 
OOH家外媒體行銷運用ARVR科技案例分享
OOH家外媒體行銷運用ARVR科技案例分享 OOH家外媒體行銷運用ARVR科技案例分享
OOH家外媒體行銷運用ARVR科技案例分享
 

Similar to Metro Design

Product Management & Design At Startups
Product Management & Design At StartupsProduct Management & Design At Startups
Product Management & Design At StartupsDan Olsen
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipallanchao
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypestec
 
Use Xamarin.Forms and surprise your customers when develop native apps, in le...
Use Xamarin.Forms and surprise your customers when develop native apps, in le...Use Xamarin.Forms and surprise your customers when develop native apps, in le...
Use Xamarin.Forms and surprise your customers when develop native apps, in le...Paulo Cesar Ortins Brito
 
Business power point templates linear arrow design of process sales ppt slides
Business power point templates linear arrow design of process sales ppt slidesBusiness power point templates linear arrow design of process sales ppt slides
Business power point templates linear arrow design of process sales ppt slidesSlideTeam.net
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo MobileAndrew Ferrier
 
End-to-end Model-driven Development of Applications with Eclipse using the ...
End-to-end Model-driven Development of Applications with Eclipse using  the ...End-to-end Model-driven Development of Applications with Eclipse using  the ...
End-to-end Model-driven Development of Applications with Eclipse using the ...emanuelemolteni
 
Enterprise UI/UX - design as code
Enterprise UI/UX - design as codeEnterprise UI/UX - design as code
Enterprise UI/UX - design as codeWorks Applications
 
UX Patterns & Design Systems
UX Patterns & Design SystemsUX Patterns & Design Systems
UX Patterns & Design SystemsRoshan Ravi
 
Enterprise Software copywriting: A guide to the neglected component
Enterprise Software copywriting: A guide to the neglected component Enterprise Software copywriting: A guide to the neglected component
Enterprise Software copywriting: A guide to the neglected component Skyron
 
Design Before Code: Thinking About Accessibility from the Ground Up
Design Before Code: Thinking About Accessibility from the Ground UpDesign Before Code: Thinking About Accessibility from the Ground Up
Design Before Code: Thinking About Accessibility from the Ground UpCaitlin Geier
 
Programming basics
Programming basicsProgramming basics
Programming basicsSenri DLN
 
API Design & Moving from Junior to Senior Developer
API Design & Moving from Junior to Senior DeveloperAPI Design & Moving from Junior to Senior Developer
API Design & Moving from Junior to Senior Developerchristophercotton
 
Blazor + Bot Framework = a Microsoft Teams Platform Dream Team
Blazor + Bot Framework = a Microsoft Teams Platform Dream TeamBlazor + Bot Framework = a Microsoft Teams Platform Dream Team
Blazor + Bot Framework = a Microsoft Teams Platform Dream TeamThomas Gölles
 
Testing More With Less
Testing More With LessTesting More With Less
Testing More With LessTom Swain
 
Windows 8 App Developer Day
Windows 8 App Developer DayWindows 8 App Developer Day
Windows 8 App Developer DayPatric Boscolo
 
Visual basic concepts
Visual basic conceptsVisual basic concepts
Visual basic conceptsmelody77776
 

Similar to Metro Design (20)

Product Management & Design At Startups
Product Management & Design At StartupsProduct Management & Design At Startups
Product Management & Design At Startups
 
Class 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurshipClass 4: Introduction to web technology entrepreneurship
Class 4: Introduction to web technology entrepreneurship
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
Use Xamarin.Forms and surprise your customers when develop native apps, in le...
Use Xamarin.Forms and surprise your customers when develop native apps, in le...Use Xamarin.Forms and surprise your customers when develop native apps, in le...
Use Xamarin.Forms and surprise your customers when develop native apps, in le...
 
Business power point templates linear arrow design of process sales ppt slides
Business power point templates linear arrow design of process sales ppt slidesBusiness power point templates linear arrow design of process sales ppt slides
Business power point templates linear arrow design of process sales ppt slides
 
Intel Builder Design Specifications
Intel Builder Design SpecificationsIntel Builder Design Specifications
Intel Builder Design Specifications
 
Real-world Dojo Mobile
Real-world Dojo MobileReal-world Dojo Mobile
Real-world Dojo Mobile
 
End-to-end Model-driven Development of Applications with Eclipse using the ...
End-to-end Model-driven Development of Applications with Eclipse using  the ...End-to-end Model-driven Development of Applications with Eclipse using  the ...
End-to-end Model-driven Development of Applications with Eclipse using the ...
 
Enterprise UI/UX - design as code
Enterprise UI/UX - design as codeEnterprise UI/UX - design as code
Enterprise UI/UX - design as code
 
UX Patterns & Design Systems
UX Patterns & Design SystemsUX Patterns & Design Systems
UX Patterns & Design Systems
 
Enterprise Software copywriting: A guide to the neglected component
Enterprise Software copywriting: A guide to the neglected component Enterprise Software copywriting: A guide to the neglected component
Enterprise Software copywriting: A guide to the neglected component
 
Orion
OrionOrion
Orion
 
Design Before Code: Thinking About Accessibility from the Ground Up
Design Before Code: Thinking About Accessibility from the Ground UpDesign Before Code: Thinking About Accessibility from the Ground Up
Design Before Code: Thinking About Accessibility from the Ground Up
 
Programming basics
Programming basicsProgramming basics
Programming basics
 
Metro + Metro Like
Metro + Metro LikeMetro + Metro Like
Metro + Metro Like
 
API Design & Moving from Junior to Senior Developer
API Design & Moving from Junior to Senior DeveloperAPI Design & Moving from Junior to Senior Developer
API Design & Moving from Junior to Senior Developer
 
Blazor + Bot Framework = a Microsoft Teams Platform Dream Team
Blazor + Bot Framework = a Microsoft Teams Platform Dream TeamBlazor + Bot Framework = a Microsoft Teams Platform Dream Team
Blazor + Bot Framework = a Microsoft Teams Platform Dream Team
 
Testing More With Less
Testing More With LessTesting More With Less
Testing More With Less
 
Windows 8 App Developer Day
Windows 8 App Developer DayWindows 8 App Developer Day
Windows 8 App Developer Day
 
Visual basic concepts
Visual basic conceptsVisual basic concepts
Visual basic concepts
 

Recently uploaded

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 

Recently uploaded (20)

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 

Metro Design

  • 1. Metro By Design Chin Wye Jin
  • 2. "Metro" is an internal code name created by Microsoft. "Metro" is based on the Introduction design principles of classic Swiss graphic design. -- wikipedia In designer's language: Is a typography-based design.
  • 4. Less is More Design based on "Best At" Principles Typography
  • 5. Content is the focus, not UI elements. Feels fast and responsive Focus on main task Less is more Heavily Reduce Unnecessary Elements Resulting not just a clean, but also simplify the application flow.
  • 6. Content is King, not UI elements. Chrome Bad (UI chrome, not google chrome) Interaction with Content Less is more
  • 7.
  • 8.
  • 9. Different Font styles, size and color to show "The King" (Content) in a structured ordered. Typography is a ART. Typography
  • 10. Pick 3 most usage Highest Usage Lower Usage Build First < Search > 1 "Best At" < Compare > 2 < Bookmark > < Contact > 3 < Share > Build Last
  • 12. Buttons Check Boxes Radio Buttons Toggle Switches Sliders Rating Control Select / Dropdown / Combo box Controls Bonus Progress Controls Tooltips Text box **Although it is a guidelines for building Metro Style App, but most of the stuff stated inside is UX related.