the new windows ui - intel ultrabook applab berlin
DESCRIPTION
The New Windows UI presented by Oliver Scheer at the Intel Ultrabook AppLab BerlinTRANSCRIPT
![Page 1: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/1.jpg)
The New Windows User InterfaceOliver Scheer Technical EvangelistMicrosoft
[email protected]@theoliverblog.the-oliver.com
![Page 2: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/2.jpg)
![Page 3: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/3.jpg)
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
![Page 4: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/4.jpg)
design.windows.com
Windows User Interface DesignDo more with less
Pride in craftsmanship
Be fast and fluid
Authentically digital
Win as one
![Page 5: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/5.jpg)
Do more with lessContent before chromeVisual clarity
![Page 6: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/6.jpg)
![Page 7: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/7.jpg)
![Page 8: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/8.jpg)
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.
![Page 9: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/9.jpg)
![Page 10: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/10.jpg)
![Page 11: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/11.jpg)
1:09
O Green World Gorillaz Demon days
![Page 12: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/12.jpg)
InteractionIntegrate commands into the content
![Page 13: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/13.jpg)
ClearanceSale
Gifts forKids
Holiday Shopping
Home & Garden
Everything For Winter
![Page 14: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/14.jpg)
ClearanceSale
Gifts forKids
Holiday Shopping
Home & Garden
Everything For Winter
![Page 15: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/15.jpg)
InteractionIntegrate commands into the contentLeverage the edge
![Page 16: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/16.jpg)
![Page 17: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/17.jpg)
Title
![Page 18: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/18.jpg)
![Page 19: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/19.jpg)
InteractionIntegrate commands into the contentLeverage the edgeProvide commands contextually
![Page 20: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/20.jpg)
![Page 21: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/21.jpg)
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
Product name
![Page 22: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/22.jpg)
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)
![Page 23: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/23.jpg)
Contoso Travel Featured destinations Last minute deals My Trips
![Page 24: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/24.jpg)
Contoso Travel Featured destinations Last minute deals My Trips Featured destinations Last minute deals My Trips
![Page 25: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/25.jpg)
Pride in craftsmanshipEvery pixel matters
TypographyGrid
![Page 26: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/26.jpg)
design.windows.com
Segoe UI Type ramp
Page headers
Sub-headersBody copyTertiary info
![Page 27: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/27.jpg)
42pt
20pt
11pt
11pt
11pt
9pt
![Page 28: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/28.jpg)
42pt
20pt
11pt
9pt
![Page 29: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/29.jpg)
Can I use something other than Segoe UI?
![Page 30: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/30.jpg)
Cambria Type ramp
9ptRegularBold
11ptRegularBold
20ptRegularBold
![Page 31: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/31.jpg)
Basic units
![Page 32: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/32.jpg)
![Page 33: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/33.jpg)
![Page 34: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/34.jpg)
![Page 35: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/35.jpg)
![Page 36: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/36.jpg)
![Page 37: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/37.jpg)
![Page 38: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/38.jpg)
![Page 39: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/39.jpg)
design.windows.com
![Page 40: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/40.jpg)
![Page 41: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/41.jpg)
![Page 42: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/42.jpg)
![Page 43: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/43.jpg)
![Page 44: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/44.jpg)
![Page 45: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/45.jpg)
![Page 46: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/46.jpg)
1
3
2
Size and proportion
![Page 47: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/47.jpg)
1
2
3
Position
![Page 48: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/48.jpg)
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
![Page 49: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/49.jpg)
Be fast and fluidEvery pixel matters
Continuity through motionErgonomics & touchSimplified flow
![Page 50: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/50.jpg)
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
![Page 51: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/51.jpg)
Win as oneContracts 1+1=3Consistent UI model
![Page 52: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/52.jpg)
design.windows.com
Contracts: 1+1=3Leverage contracts to complete scenarios with other apps Share
Search
File Picker
Etc.
![Page 53: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/53.jpg)
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
![Page 54: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/54.jpg)
design.windows.com
![Page 55: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/55.jpg)
design.windows.com
![Page 56: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/56.jpg)
design.windows.com
![Page 57: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/57.jpg)
Authentically digitalEvery pixel matters
Beyond physical metaphorsInfographics & glyphs
![Page 58: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/58.jpg)
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
![Page 59: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/59.jpg)
![Page 60: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/60.jpg)
![Page 61: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/61.jpg)
![Page 62: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/62.jpg)
design.windows.com
![Page 63: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/63.jpg)
![Page 64: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/64.jpg)
![Page 65: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/65.jpg)
![Page 66: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/66.jpg)
![Page 67: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/67.jpg)
![Page 68: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/68.jpg)
![Page 69: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/69.jpg)
![Page 70: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/70.jpg)
![Page 71: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/71.jpg)
![Page 72: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/72.jpg)
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
![Page 73: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/73.jpg)
![Page 74: The New Windows UI - Intel Ultrabook AppLab Berlin](https://reader038.vdocument.in/reader038/viewer/2022110118/554eeba5b4c905911d8b52b7/html5/thumbnails/74.jpg)
Thank you.