Metro Design 101
description
Transcript of Metro Design 101
![Page 1: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/1.jpg)
Metro Design 101Clean, clear, to the point
![Page 2: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/2.jpg)
Who am I?
What I do!
![Page 3: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/3.jpg)
AgendaIntroduction
What is Metro?
General Metro design stuff
Windows 8 stuff
Windows Phone 7 stuff
Designing Metro apps
![Page 4: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/4.jpg)
A short video
![Page 5: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/5.jpg)
WeatherFlow Clear
![Page 6: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/6.jpg)
Realistic vs digital
![Page 7: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/7.jpg)
Stand out from the crowd
![Page 8: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/8.jpg)
![Page 9: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/9.jpg)
![Page 10: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/10.jpg)
Designing a Metro app
![Page 11: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/11.jpg)
Type Ramp
9pt 11pt
20pt
42ptSemiboldBoldRegular
SemiboldBoldRegular
RegularSemilightLight
SemilightLight
![Page 12: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/12.jpg)
Grids
![Page 13: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/13.jpg)
Themes, colours, sans gradients
![Page 14: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/14.jpg)
No Chrome
![Page 15: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/15.jpg)
Animation!Purposeful, lively, adhesiveDirect manipulation
![Page 16: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/16.jpg)
Windows 8
![Page 17: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/17.jpg)
Screen size
![Page 18: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/18.jpg)
InteractionCommon
Possible
![Page 19: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/19.jpg)
App bars, Charms & Contracts
![Page 20: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/20.jpg)
New Views!Portrait, landscape, semantic, snapped.
![Page 21: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/21.jpg)
Semantic Zoom
![Page 22: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/22.jpg)
Semantic Zoom
![Page 23: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/23.jpg)
Snapped View
![Page 24: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/24.jpg)
On the move
![Page 25: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/25.jpg)
Windows Phone 7
![Page 26: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/26.jpg)
Tiles!
![Page 27: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/27.jpg)
![Page 28: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/28.jpg)
Xbox
![Page 29: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/29.jpg)
Design your contentApplication launch
![Page 30: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/30.jpg)
The guidelines
![Page 31: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/31.jpg)
Room to move
![Page 32: Metro Design 101](https://reader036.fdocuments.us/reader036/viewer/2022062501/56816207550346895dd23079/html5/thumbnails/32.jpg)
Thanks!@agkdesign [email protected]