SlideShare une entreprise Scribd logo
1  sur  31
Metro + Metro like
a visual approach
Some Facts, that probably we all know
Metro is an internal code name for a typography-based design
language created by Microsoft, originally for use in Windows Phone
7. A key design principle of Metro is better focus on the content of
applications, relying more on typography and less on graphics.
"Metro" is based on the design principles of classic Swiss graphic
design. Microsoft's design team says that the Metro UI is partly
inspired by signs commonly found at public transport systems.



& The Windows Phone Design Principles are:
Light, Clean, Open, Fast (Fierce Reduction)
Content, not Chrome
Typography
Motion
Authentically Digital
So, why again…
So, being a User experience guy, I also started getting request of
getting applications, dashboards, websites which needs have the
feel of Metro Design, and that’s where my quest started, searched
extensively on the internet to gather more and more information and
references… how other are working with Metro UI or Metro Like
UI…

And I gathered quite a hand full of visuals, which will help me in
enormous way to generate new ideas. And after couple of my
projects, I thought of accumulating all the references so that in
future I can refer the same. In this process this documentation
emerged, and it’s more of a visual references of Metro UI or Metro
Like of the screen shots are taken from Internet and it includes couple of my project
most UI.
Websites
Websites
Websites
Websites
Apps
Apps
Apps
Apps
Apps
Windows 8 Inspired
Windows 8 Inspired
Windows 8 Inspired
Dashboard
Dashboard
Dashboard
Dashboard
Dashboard
Dashboard
Mobility
Mobility
Mobility
Mobility
Mobility
Miscellaneous - Microsoft-office
Miscellaneous - Desktop
Miscellaneous - Icons
Miscellaneous - Keyboard
Hope you like it

                   Thank You

Contenu connexe

En vedette

Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Romain Fonnier
 
Intro to social media on mobile at Mobile Monday Brussels
Intro to social media on mobile at Mobile Monday BrusselsIntro to social media on mobile at Mobile Monday Brussels
Intro to social media on mobile at Mobile Monday BrusselsMobilosoft
 
10 Trends on Mobile
10 Trends on Mobile10 Trends on Mobile
10 Trends on MobileTable19
 
Marketing des applications mobiles
Marketing des applications mobilesMarketing des applications mobiles
Marketing des applications mobilesSamir Bellik
 
Internationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesInternationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesBenjamin Faure
 
Mobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMichel Lent Schwartzman
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Petit Web
 
Running your App as a Business
Running your App as a BusinessRunning your App as a Business
Running your App as a BusinessBill Magnuson
 
China App Index: Will mobile kill the TV star? [July 2013]
China App Index: Will mobile kill the TV star? [July 2013]China App Index: Will mobile kill the TV star? [July 2013]
China App Index: Will mobile kill the TV star? [July 2013]WandouLabs
 
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...Tapit
 
Référencement Mobile - Anji Ismail - SEO Campus 2010
Référencement Mobile - Anji Ismail - SEO Campus 2010Référencement Mobile - Anji Ismail - SEO Campus 2010
Référencement Mobile - Anji Ismail - SEO Campus 2010SEO CAMP
 
What's So Special About Mobile?
What's So Special About Mobile?What's So Special About Mobile?
What's So Special About Mobile?Sara Quinn
 
L’iPad à l’école : usages, avantages et défis
L’iPad à l’école : usages,  avantages et défisL’iPad à l’école : usages,  avantages et défis
L’iPad à l’école : usages, avantages et défisnawras.univers
 
Unlock the Magic: How to set up and use your new ipad
Unlock the Magic: How to set up and use your new ipadUnlock the Magic: How to set up and use your new ipad
Unlock the Magic: How to set up and use your new ipadGina Schreck
 

En vedette (14)

Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013
 
Intro to social media on mobile at Mobile Monday Brussels
Intro to social media on mobile at Mobile Monday BrusselsIntro to social media on mobile at Mobile Monday Brussels
Intro to social media on mobile at Mobile Monday Brussels
 
10 Trends on Mobile
10 Trends on Mobile10 Trends on Mobile
10 Trends on Mobile
 
Marketing des applications mobiles
Marketing des applications mobilesMarketing des applications mobiles
Marketing des applications mobiles
 
Internationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 SecondesInternationaliser son app pour réussir: l'exemple de 94 Secondes
Internationaliser son app pour réussir: l'exemple de 94 Secondes
 
Mobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practiceMobile Marketing: myths, truths and practice
Mobile Marketing: myths, truths and practice
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012
 
Running your App as a Business
Running your App as a BusinessRunning your App as a Business
Running your App as a Business
 
China App Index: Will mobile kill the TV star? [July 2013]
China App Index: Will mobile kill the TV star? [July 2013]China App Index: Will mobile kill the TV star? [July 2013]
China App Index: Will mobile kill the TV star? [July 2013]
 
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
Tapit Cannes 2012 Presentation - Creating Magical Experieneces on Mobile Usin...
 
Référencement Mobile - Anji Ismail - SEO Campus 2010
Référencement Mobile - Anji Ismail - SEO Campus 2010Référencement Mobile - Anji Ismail - SEO Campus 2010
Référencement Mobile - Anji Ismail - SEO Campus 2010
 
What's So Special About Mobile?
What's So Special About Mobile?What's So Special About Mobile?
What's So Special About Mobile?
 
L’iPad à l’école : usages, avantages et défis
L’iPad à l’école : usages,  avantages et défisL’iPad à l’école : usages,  avantages et défis
L’iPad à l’école : usages, avantages et défis
 
Unlock the Magic: How to set up and use your new ipad
Unlock the Magic: How to set up and use your new ipadUnlock the Magic: How to set up and use your new ipad
Unlock the Magic: How to set up and use your new ipad
 

Similaire à Metro + Metro Like

Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patternsKevinHao14
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Akhil Kumar
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Lewis Lin 🦊
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Jessie Doan
 
Top low code mobile app development platforms
Top low code mobile app development platformsTop low code mobile app development platforms
Top low code mobile app development platformsRupesh Dhiwar
 
Developer connect - microservices
Developer connect - microservicesDeveloper connect - microservices
Developer connect - microservicesAnton McConville
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversationyiibu
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Markus Jönsson
 
Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019zainabkashim
 
3._Mobile_App_Development_Process.pptx
3._Mobile_App_Development_Process.pptx3._Mobile_App_Development_Process.pptx
3._Mobile_App_Development_Process.pptxmichellekadzutu
 
Development Of Software Applications
Development Of Software ApplicationsDevelopment Of Software Applications
Development Of Software ApplicationsRikki Wright
 
The best development services available for Pakistan.ppt
The best development services available for Pakistan.pptThe best development services available for Pakistan.ppt
The best development services available for Pakistan.pptConnect Solutions
 
Why windows phone
Why windows phoneWhy windows phone
Why windows phonePawan Kurmi
 
Computer Programming And Software Design Essay
Computer Programming And Software Design EssayComputer Programming And Software Design Essay
Computer Programming And Software Design EssayRobin Anderson
 
Tweet Tracking App Design Document
Tweet Tracking App Design DocumentTweet Tracking App Design Document
Tweet Tracking App Design DocumentBessie Chu
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Brenna Mickey
 

Similaire à Metro + Metro Like (20)

Mobile ui design patterns
Mobile ui design patternsMobile ui design patterns
Mobile ui design patterns
 
Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014Uxpin mobile ui_design_patterns_2014
Uxpin mobile ui_design_patterns_2014
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014
 
Crit presentation
Crit presentationCrit presentation
Crit presentation
 
Top low code mobile app development platforms
Top low code mobile app development platformsTop low code mobile app development platforms
Top low code mobile app development platforms
 
Some words about me 2012
Some words about me 2012Some words about me 2012
Some words about me 2012
 
Developer connect - microservices
Developer connect - microservicesDeveloper connect - microservices
Developer connect - microservices
 
Careers In Web Design
Careers In Web DesignCareers In Web Design
Careers In Web Design
 
Designing for conversation
Designing for conversationDesigning for conversation
Designing for conversation
 
Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013Designing Windows 8 application - Microsoft Techdays 2013
Designing Windows 8 application - Microsoft Techdays 2013
 
Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019Zainab Kashim Portfolio 2019
Zainab Kashim Portfolio 2019
 
3._Mobile_App_Development_Process.pptx
3._Mobile_App_Development_Process.pptx3._Mobile_App_Development_Process.pptx
3._Mobile_App_Development_Process.pptx
 
Development Of Software Applications
Development Of Software ApplicationsDevelopment Of Software Applications
Development Of Software Applications
 
The best development services available for Pakistan.ppt
The best development services available for Pakistan.pptThe best development services available for Pakistan.ppt
The best development services available for Pakistan.ppt
 
Why windows phone
Why windows phoneWhy windows phone
Why windows phone
 
Computer Programming And Software Design Essay
Computer Programming And Software Design EssayComputer Programming And Software Design Essay
Computer Programming And Software Design Essay
 
Tweet Tracking App Design Document
Tweet Tracking App Design DocumentTweet Tracking App Design Document
Tweet Tracking App Design Document
 
Ninjabit ppt
Ninjabit pptNinjabit ppt
Ninjabit ppt
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop
 

Dernier

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...Pranav Subramanian
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Dernier (20)

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
TIMBRE: HOW MIGHT WE REMEDY MUSIC DESERTS AND FACILITATE GROWTH OF A MUSICAL ...
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

Metro + Metro Like