welcome to the metro application platform

38
Design Principles and Unifying Experiences METRO Katrien De Graeve Evangelist, Microsoft Belgium @katriendg http://blogs.msdn.com/katriend

Upload: microsoft-developer-network-msdn-belgium-and-luxembourg

Post on 27-Jan-2015

107 views

Category:

Technology


2 download

DESCRIPTION

More info on http://www.techdays.be.

TRANSCRIPT

Page 1: Welcome to the Metro Application Platform

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
Page 3: Welcome to the Metro Application Platform
Page 4: Welcome to the Metro Application Platform
Page 5: Welcome to the Metro Application Platform

METRO:The early days

Page 6: Welcome to the Metro Application Platform
Page 7: Welcome to the Metro Application Platform
Page 8: Welcome to the Metro Application Platform
Page 9: Welcome to the Metro Application Platform
Page 10: Welcome to the Metro Application Platform

METRO:Inspiration

Page 11: Welcome to the Metro Application Platform

Modern Design movementThe Bauhaus

International Typographic Style – Swiss Design

Broadcast motion design

Page 12: Welcome to the Metro Application Platform
Page 13: Welcome to the Metro Application Platform
Page 14: Welcome to the Metro Application Platform
Page 15: Welcome to the Metro Application Platform

METROMetro style design principles

Page 16: Welcome to the Metro Application Platform

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

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

New York Times

Page 19: Welcome to the Metro Application Platform
Page 20: Welcome to the Metro Application Platform
Page 21: Welcome to the Metro Application Platform

Be Fast and Fluid

Motion

Delight with

Life is mobile

Immersive

Design for touch

Page 22: Welcome to the Metro Application Platform
Page 23: Welcome to the Metro Application Platform

Authentically digitalCloud connected

Dynamic and alive

Beautiful use of typography

Bold vibrant colors

Motion

Page 24: Welcome to the Metro Application Platform
Page 25: Welcome to the Metro Application Platform

27 6/29/2011MICROSOFT CONFIDENTIAL

Page 26: Welcome to the Metro Application Platform
Page 27: Welcome to the Metro Application Platform
Page 28: Welcome to the Metro Application Platform
Page 29: Welcome to the Metro Application Platform

Do more with less

Be great at something Focused and direct

Content before chrome

Inspire confidence

Page 30: Welcome to the Metro Application Platform

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

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
Page 33: Welcome to the Metro Application Platform
Page 34: Welcome to the Metro Application Platform
Page 35: Welcome to the Metro Application Platform

New UI – New experiences

DifferentiatingFast & fluidPersonalDynamic

ConsistentFrom phones to TVsLargest choice of devicesNo compromise

Page 36: Welcome to the Metro Application Platform

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 37: Welcome to the Metro Application Platform

Thank youRecommended resources:• http://dev.windows.com (Metro &

Win8)

Page 38: Welcome to the Metro Application Platform

© 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.