-
Adaptive design
Windows 10
-
http://windows.Microsoft.com
Agenda
The Microsoft design language
How Windows makes design easier
What am I designing?
Techniques to adapt
-
The MicrosoftDesign Language
-
http://windows.Microsoft.com
Microsoft design language principles
Keep it SimpleIsnt it nice when things just work, when the next
step is intuitive, and people are inspired?
Make it PersonalWe design for real people, not requiring
people
can fit into our design. Personal means human.
Think UniversalBetter technology for anyone is better
technology for everyone. Its an attitude.
Create DelightAttention of detail equals moments of delight.
Sometimes delight is so perfect it is invisible.
Design as OneWork together and do amazing things.
Many teams, one ecosystem, happy customers.
-
http://windows.Microsoft.com
Typeography
-
http://windows.Microsoft.com
2px
Iconography
-
For most text, use 15 epx Segoe UI Regular
-
http://windows.Microsoft.com
Four is the magic number
-
How Windowsmakes design easier
-
http://windows.Microsoft.com
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 Phone480x854
5 Phone720x1280
6 Phone1080x1920
4 Phone480x854
5 Phone720x1280
6 Phone1080x1920
-
http://windows.Microsoft.com
Effective pixel
Effective PixelPhysical Pixel
-
Ignore scale, resolution, & dpi.Design in Effective
Pixels
-
What am I designing?
-
http://windows.Microsoft.com
Planning your design
PhoneViewing Distance: 16.3
Tablets and 2 in 1Viewing Distance:
20
Small and Large LaptopsViewing Distance:
24.5
Small and Large Desktop MonitorsViewing Distance:
28
TVViewing Distance:
84
5 813
-
http://windows.Microsoft.com
Snap points
phablet & tablet
desktopphone
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
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
full landscape support three frames compact navpane actions at
the top one visible tabs left aligned
548 720 1024320epx
-
DEMO
The weather app
-
http://windows.Microsoft.com
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
-
Techniques to adapt
-
http://windows.Microsoft.com
Three core adaptive approaches
Responsive designResize your content
Reflow your content
Adaptive designReposition 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
-
Don't assume you will use only one technique.
-
http://windows.Microsoft.com
Review
The Microsoft design language
How Windows makes design easier
What am I designing?
Techniques to adapt
