Adaptive design

Windows 10

Agenda
The Microsoft design language
How Windows makes design easier

What am I designing?
Techniques to adapt

http://windows.Microsoft.com

The Microsoft
Design Language

Microsoft design language principles

Keep it Simple

Make it Personal

Think Universal

Create Delight

Isnt it nice when things just work, when the

next step is intuitive, and people are inspired?

Better technology for anyone is better

technology for everyone. Its an attitude.

We design for real people, not requiring people

can fit into our design. Personal means human.

Attention of detail equals moments of delight.

Sometimes delight is so perfect it is invisible.

Design as One

Work together and do amazing things.

Many teams, one ecosystem, happy customers.

http://windows.Microsoft.com

Typeography

http://windows.Microsoft.com

Iconography
2px

http://windows.Microsoft.com

For most text, use

15 epx Segoe UI Regular

Four is the magic number

http://windows.Microsoft.com

How Windows
makes design easier

Adaptive controls

http://windows.Microsoft.com

Input intelligence

http://windows.Microsoft.com

Scaling algorithm

http://windows.Microsoft.com

http://windows.Microsoft.com

Physical versus effective pixel

4 Phone
480x854

4 Phone
480x854
5 Phone
720x1280

5 Phone
720x1280
6 Phone
1080x1920

6 Phone
1080x1920

http://windows.Microsoft.com

Effective pixel

Physical Pixel

Effective Pixel

http://windows.Microsoft.com

Ignore scale, resolution, & dpi.

Design in Effective Pixels

What am I designing?

Planning your design

13

Tablets and 2 in 1

Phone

Viewing Distance:
20

Viewing Distance: 16.3

Small and Large Desktop Monitors

Viewing Distance:
28

Small and Large Laptops

Viewing Distance:
24.5

TV

Viewing Distance:
84

http://windows.Microsoft.com

Snap points

epx

320

548

720

phone

limited landscape support

one frame at a time
sys tray on the left
steering wheel on the right
4+ actions on the bottom
tabs are centered

1024

phablet &
tablet

limited landscape support

one frame at a time
sys tray on the left
steering wheel on the right
4+ actions on the bottom
single column stops scaling
tabs are centered

full landscape support

two frames
actions at the top
one visible -TBD
tabs are left aligned
Show search field if search was
represented as an icon on
smaller devices

desktop

full landscape support

three frames
compact navpane
actions at the top
one visible
tabs left aligned

http://windows.Microsoft.com

The weather app

DEMO

Flow, not size

My UI

My UI

My UI

http://windows.Microsoft.com

Flow, not size

My UI

My UI

My UI

My UI

My UI
My UI

http://windows.Microsoft.com

Check variants

http://windows.Microsoft.com

As you design
1. Adapt to size change
2. Adapt to input change

3. Build with effective pixels

4. Count on the scaling algorithm

http://windows.Microsoft.com

Where to start
1. Effective pixels
2. Iconography

3. Design templates

http://windows.Microsoft.com

Techniques to adapt

Three core adaptive approaches

Responsive design
Resize your content
Reflow your content

Adaptive design
Reposition your content
Redesign your content

Tailored design

http://windows.Microsoft.com

Resize

http://windows.Microsoft.com

Reflow

http://windows.Microsoft.com

Reposition

http://windows.Microsoft.com

Redesign

http://windows.Microsoft.com

Don't assume you will use

only one technique.

Review
The Microsoft design language
How Windows makes design easier

What am I designing?
Techniques to adapt

http://windows.Microsoft.com