82
Putting the Microsoft Design Language to work Laurent Bugnion Senior Director, IdentityMine Microsoft MVP, Regional Director

Putting the Microsoft Design Language to work

Embed Size (px)

DESCRIPTION

More info on techdays.be

Citation preview

Page 1: Putting the Microsoft Design Language to work

Putting the Microsoft Design Language to work

Laurent BugnionSenior Director, IdentityMineMicrosoft MVP, Regional Director

Page 2: Putting the Microsoft Design Language to work

what‘s in a name

Page 3: Putting the Microsoft Design Language to work

the names

Metro apps Windows Store apps

Metro design language Microsoft design (style) language

Metro design principles Microsoft design (style) principles

http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

Page 4: Putting the Microsoft Design Language to work

the principles

Page 5: Putting the Microsoft Design Language to work

the five design principles

pride in craftsmanshipfast and fluidauthentically digitaldo more with lesswin as one

Page 6: Putting the Microsoft Design Language to work

the typography

Page 7: Putting the Microsoft Design Language to work

swiss typography

Page 9: Putting the Microsoft Design Language to work
Page 10: Putting the Microsoft Design Language to work
Page 11: Putting the Microsoft Design Language to work
Page 12: Putting the Microsoft Design Language to work
Page 13: Putting the Microsoft Design Language to work

the fonts

segoe ui

bold

semilight

semibold

light

Page 14: Putting the Microsoft Design Language to work
Page 15: Putting the Microsoft Design Language to work
Page 16: Putting the Microsoft Design Language to work
Page 17: Putting the Microsoft Design Language to work
Page 18: Putting the Microsoft Design Language to work

the motion

Page 19: Putting the Microsoft Design Language to work

motion design

saul basshttp://www.youtube.com/watch?v=lAmem5wVOUU

kinetic typographyhttp://www.youtube.com/watch?v=47NbXRq2dlI

Page 20: Putting the Microsoft Design Language to work

the digital age

Page 21: Putting the Microsoft Design Language to work

Skeuomorphism

Page 22: Putting the Microsoft Design Language to work
Page 23: Putting the Microsoft Design Language to work
Page 24: Putting the Microsoft Design Language to work
Page 25: Putting the Microsoft Design Language to work

playful and delightful

Page 26: Putting the Microsoft Design Language to work
Page 27: Putting the Microsoft Design Language to work
Page 28: Putting the Microsoft Design Language to work
Page 29: Putting the Microsoft Design Language to work
Page 30: Putting the Microsoft Design Language to work
Page 31: Putting the Microsoft Design Language to work
Page 32: Putting the Microsoft Design Language to work

bold and beautiful

Page 33: Putting the Microsoft Design Language to work

of taste and colors

Page 34: Putting the Microsoft Design Language to work

of taste and colors [phone]

Page 35: Putting the Microsoft Design Language to work

of taste and colors [store]

Page 36: Putting the Microsoft Design Language to work

the essence of space

Page 37: Putting the Microsoft Design Language to work
Page 38: Putting the Microsoft Design Language to work
Page 39: Putting the Microsoft Design Language to work
Page 40: Putting the Microsoft Design Language to work
Page 41: Putting the Microsoft Design Language to work
Page 42: Putting the Microsoft Design Language to work
Page 43: Putting the Microsoft Design Language to work
Page 44: Putting the Microsoft Design Language to work
Page 45: Putting the Microsoft Design Language to work
Page 46: Putting the Microsoft Design Language to work
Page 47: Putting the Microsoft Design Language to work

portrait / snap view design demo

Page 48: Putting the Microsoft Design Language to work

content is king

Page 49: Putting the Microsoft Design Language to work
Page 50: Putting the Microsoft Design Language to work
Page 51: Putting the Microsoft Design Language to work
Page 52: Putting the Microsoft Design Language to work
Page 53: Putting the Microsoft Design Language to work
Page 54: Putting the Microsoft Design Language to work
Page 55: Putting the Microsoft Design Language to work
Page 56: Putting the Microsoft Design Language to work
Page 57: Putting the Microsoft Design Language to work
Page 58: Putting the Microsoft Design Language to work
Page 59: Putting the Microsoft Design Language to work
Page 60: Putting the Microsoft Design Language to work
Page 61: Putting the Microsoft Design Language to work

the search conundrum

Page 62: Putting the Microsoft Design Language to work
Page 63: Putting the Microsoft Design Language to work
Page 64: Putting the Microsoft Design Language to work
Page 65: Putting the Microsoft Design Language to work
Page 66: Putting the Microsoft Design Language to work

the collaboration

Page 67: Putting the Microsoft Design Language to work
Page 68: Putting the Microsoft Design Language to work
Page 69: Putting the Microsoft Design Language to work
Page 70: Putting the Microsoft Design Language to work

it‘s nice to share

Page 71: Putting the Microsoft Design Language to work
Page 72: Putting the Microsoft Design Language to work
Page 73: Putting the Microsoft Design Language to work
Page 74: Putting the Microsoft Design Language to work
Page 75: Putting the Microsoft Design Language to work
Page 76: Putting the Microsoft Design Language to work
Page 77: Putting the Microsoft Design Language to work
Page 78: Putting the Microsoft Design Language to work
Page 79: Putting the Microsoft Design Language to work

share contract demo

Page 80: Putting the Microsoft Design Language to work

the inspiration

Page 81: Putting the Microsoft Design Language to work

http://msdn.microsoft.com/en-us/library/windows/apps/hh868274

Page 82: Putting the Microsoft Design Language to work

http://blog.galasoft.chhttp://www.galasoft.ch

http://www.identitymine.com

@LBugnion