Windows UX

Windows UX

Design principlesPride in craftsmanship

Be fast and fluid

Authentically digital

Do more with less

Win as one

A principled design approach

Pride in craftsmanship

Based on 20px grid

And a consistent silhouette

Type ramp

Swipe from edgeRight edge for charms

Left edge for running apps

From top edge to bottom to close app

From top edge to right/left for split window

From bottom edge for app bars

Interaction vs. reading areas

Interaction areas: Because tablets are most often held along the side, the bottom corners and sides are ideal locations for interactive elements.

Reading areas: Because tablets are mostoften held along the side, the bottom corners and sides are ideal locations for interactive elements.

Most people are right-handedElements placed on the right are easier to touch

Prevents occlusion of the main UI area

Target sizes

Recommendedminimum size

40px30px 50px100%

Fat fingers?Baby’s finger Basketball

player’s finger

45px

100px

60px

Target sizesMinimum target size(heart-to-heart = 50px)

Low consequence

High consequence

Alignment to the grid

Segoe UI Type ramp

Page headers

Sub-headersBody copyTertiary info

42ptLight

20pt

LightSemilightRegular

11pt

SemilightRegularSemibold

9pt

RegularSemiboldBold