Welcome to the Metro Application Platform
-
Upload
microsoft-developer-network-msdn-belgium-and-luxembourg -
Category
Technology
-
view
107 -
download
2
description
Transcript of Welcome to the Metro Application Platform
![Page 1: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/1.jpg)
Design Principles and Unifying Experiences
METRO
Katrien De Graeve Evangelist, Microsoft Belgium@katriendghttp://blogs.msdn.com/katriend
![Page 2: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/2.jpg)
![Page 3: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/3.jpg)
![Page 4: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/4.jpg)
![Page 5: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/5.jpg)
METRO:The early days
![Page 6: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/6.jpg)
![Page 7: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/7.jpg)
![Page 8: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/8.jpg)
![Page 9: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/9.jpg)
![Page 10: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/10.jpg)
METRO:Inspiration
![Page 11: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/11.jpg)
Modern Design movementThe Bauhaus
International Typographic Style – Swiss Design
Broadcast motion design
![Page 12: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/12.jpg)
![Page 13: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/13.jpg)
![Page 14: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/14.jpg)
![Page 15: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/15.jpg)
METROMetro style design principles
![Page 16: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/16.jpg)
Metro style Design Principles1. Pride in craftsmanship
2. Be fast and fluid
3. Authentically digital
4. Do more with less
5. Win as one
![Page 17: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/17.jpg)
Pride in craftsmanship
Sweat the detailsMake it safe and reliable
Balance, symmetry,
hierarchy
Align to the grid
![Page 18: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/18.jpg)
New York Times
![Page 19: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/19.jpg)
![Page 20: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/20.jpg)
![Page 21: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/21.jpg)
Be Fast and Fluid
Motion
Delight with
Life is mobile
Immersive
Design for touch
![Page 22: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/22.jpg)
![Page 23: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/23.jpg)
Authentically digitalCloud connected
Dynamic and alive
Beautiful use of typography
Bold vibrant colors
Motion
![Page 24: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/24.jpg)
![Page 25: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/25.jpg)
27 6/29/2011MICROSOFT CONFIDENTIAL
![Page 26: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/26.jpg)
![Page 27: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/27.jpg)
![Page 28: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/28.jpg)
![Page 29: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/29.jpg)
Do more with less
Be great at something Focused and direct
Content before chrome
Inspire confidence
![Page 30: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/30.jpg)
Win as one
Fit into the UI model
Reduce redundancy
Work together to complete scenarios
Tools and templates are designed to scale
Widescreen (1366x768+)
Snap view (required)
Minimum (1024x768)
Portrait
![Page 31: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/31.jpg)
Metro style Design Principles1. Pride in craftsmanship
2. Be fast and fluid
3. Authentically digital
4. Do more with less
5. Win as one
![Page 32: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/32.jpg)
![Page 33: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/33.jpg)
![Page 34: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/34.jpg)
![Page 35: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/35.jpg)
New UI – New experiences
DifferentiatingFast & fluidPersonalDynamic
ConsistentFrom phones to TVsLargest choice of devicesNo compromise
![Page 36: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/36.jpg)
Full Bleed Photos
Pictures can set a mood orevoke emotion, making fora more memorable presentation.Follow us @microsoftbe
More info on dev.microsoft.com
![Page 38: Welcome to the Metro Application Platform](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c777b74a79590f5b8b45bc/html5/thumbnails/38.jpg)
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.