Embed Size (px)
DESCRIPTION
The New Windows UI presented by Oliver Scheer at the Intel Ultrabook AppLab Berlin
Citation preview
The New Windows User InterfaceOliver Scheer Technical EvangelistMicrosoft
[email protected]@theoliverblog.the-oliver.com
design.windows.com
8 Traits of a Windows App
1. Windows New UI Design2. Fast and fluid3. Snap and scale beautifully4. Use the right contracts5. Invest in a great Tile6. Feel connected & alive7. Roam to the cloud8. Embrace Design principles
design.windows.com
Windows User Interface DesignDo more with less
Pride in craftsmanship
Be fast and fluid
Authentically digital
Win as one
Do more with lessContent before chromeVisual clarity
design.windows.com
Content before chrome
Content is the heart of the experience
Leave only the most relevant elements on screen
Solve for distractions, not discoverability
Let people be immersed in what they love and they will explore the rest.
1:09
O Green World Gorillaz Demon days
InteractionIntegrate commands into the content
ClearanceSale
Gifts forKids
Holiday Shopping
Home & Garden
Everything For Winter
ClearanceSale
Gifts forKids
Holiday Shopping
Home & Garden
Everything For Winter
InteractionIntegrate commands into the contentLeverage the edge
Title
InteractionIntegrate commands into the contentLeverage the edgeProvide commands contextually
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
NavigationViews should be about where you are at, not where you might goIntegrate navigational elements into the contentAvoid persistent way finding chrome (such as tabs)
Contoso Travel Featured destinations Last minute deals My Trips
Contoso Travel Featured destinations Last minute deals My Trips Featured destinations Last minute deals My Trips
Pride in craftsmanshipEvery pixel matters
TypographyGrid
design.windows.com
Segoe UI Type ramp
Page headers
Sub-headersBody copyTertiary info
42pt
20pt
11pt
11pt
11pt
9pt
42pt
20pt
11pt
9pt
Can I use something other than Segoe UI?
Cambria Type ramp
9ptRegularBold
11ptRegularBold
20ptRegularBold
Basic units
design.windows.com
1
3
2
Size and proportion
1
2
3
Position
Dolor Sit AmetElitMattisDiam
Lorem ipsum Dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam
Content type
Dolor sit amet dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Consectetur adipiscing elit.dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Consectetur adipiscing elit. dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Consectetur adipiscing elit.
Dolor sit amet dolor sit amet, consectetur adipiscing elit. Aliquam suscipit mattis diam venenatis varius. Consectetur adipiscing elit.
Lorem ipsum
dolor sit amet,
consectetur adipiscing
elit. Aliquam suscipit
mattis diam venenatis
varius. Consectetur
adipiscing elit. dolor sit
amet, consectetur
adipiscing elit. Aliquam
suscipit mattis diam
venenatis varius.
Consectetur
Be fast and fluidEvery pixel matters
Continuity through motionErgonomics & touchSimplified flow
design.windows.com
Continuity through motion
Motion brings life to the UI design languagePurposeful animations tie experiences together and tell a storyUse the Animation Library to get the new UI style, scenario-based animations
Win as oneContracts 1+1=3Consistent UI model
design.windows.com
Contracts: 1+1=3Leverage contracts to complete scenarios with other apps Share
Search
File Picker
Etc.
design.windows.com
Consistent UI Model
Charms for Search, Share, Settings, and DevicesTouch language for interactionsApp bar for commandingEtc.
Leverage contracts to complete scenarios with other apps Share
File Picker
design.windows.com
design.windows.com
design.windows.com
Authentically digitalEvery pixel matters
Beyond physical metaphorsInfographics & glyphs
design.windows.com
Beyond physical metaphors
Embrace the fact that we are pixels on screenRemove physical boundaries to create something that is better than realityBring out the information in the content by reducing visual decoration
design.windows.com
design.windows.com
Windows User Interface Design
Content before chromeVisual clarity
Do more with less
TypographyGrid
Pride in craftsmanship
Continuity through motion Ergonomics & touchSimplified flow
Be fast and fluid
Beyond physical metaphorInfographic and glyphs
Authentically digital
Consistent UI modelContracts: 1+1 = 3
Win asone
Thank you.
