metro app design
DESCRIPTION
TRANSCRIPT
Tan Chun Siong
Metro Design Step-By-Step
www.tanchunsiong.com
Resolution & Deadzones
1246 x 718
Resolution
Deadzones
1366 x
768
Deadzo
nes
Deadzones
Title extends …
1246 x 718
Resolution
Deadzones
1366 x
768
App Bar
Left Local
Right Global
Typography
Different Typography
ROCKWELLHELVECTICA
SEGOE UI LIGHTMUSEO REGULAR
GILL SANS
FUTURAGARAMONDFERTIGOFRUTIGER
ADOBE CASLON
Typography Layout
The choice of fonts are important to the first impression and design of your application. Alignment in this textbox helps to create a grid effect.
Varying the sizes of fonts and types of fonts can make it interesting for the users. Example using BOLD effects and increasing can give different emphasize.
Use orientation to your advantage to text, grouping them base on types. Example date.
Putting color behind text gives it a feel of title.
Dream Build LaunchIs a continuous campaign tohelp developers get onboard on Windows 8You are currently attending a workshop on Metro Design Step-By-Step in Microsoft Singapore, One Marina Boulevard. This workshop is part of the Dream Build Launch hackathon.
Today’s Date: 16
June 201
2
Description
background
Grids and Whitespace
The choice of fonts are important to the first impression and design of your application. Alignment in this textbox helps to create a grid effect.
Varying the sizes of fonts and types of fonts can make it interesting for the users. Example using BOLD effects and increasing can give different emphasize.
Use orientation to your advantage to text, grouping them base on types. Example date.
Putting color behind text gives it a feel of title.
Dream Build LaunchIs a continuous campaign tohelp developers get onboard on Windows 8You are currently attending a workshop on Metro Design Step-By-Step in Microsoft Singapore, One Marina Boulevard. This workshop is part of the Dream Build Launch hackathon.
Today’s Date: 16
June 201
2
Description
background
Simplicity
Graphics and Colors
Colors brings out life in your application
Color Schemes are important. They should not be too colorful hence making it distracting for the user
Use similar colors to convey messages such as actionable items
Nexthttp://colorschemedesigner.com/
Always Start off with Graphics
Theme: Typography
related
Theme: Time related
Theme: Exercise related
Schemes
http://www.cssdrive.com/imagepalette/index.php
Either fill graphics or corner it
Something heremore things there
Makes the layout a bit moreinteresting
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Maybe there is more text herewhich would describe more ofthe list of items at the bottom
The text here tries to matchthe colors of the overlay at the bottom of the list of item
There could be even more text here,Just make sure that they have enoughWhite space in between
Descri
pti
on
Either fill graphics or corner it
Something heremore things there
Makes the layout a bit moreinteresting
Maybe there is more text herewhich would describe more ofthe list of items at the bottom
The text here tries to matchthe colors of the overlay at the bottom of the list of item
There could be even more text here,Just make sure that they have enoughWhite space in between
Descri
pti
on0 9 3 5: AM
PM
Either fill graphics or corner it