metro app design

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