putting the microsoft design language to work

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

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

Post on 06-May-2015

549 views

Category:

Documents


0 download

DESCRIPTION

More info on techdays.be

TRANSCRIPT

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