Download - Implementing Windows 8 Design Principles
![Page 1: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/1.jpg)
Implementing Windows 8 Design PrinciplesBrent Edwards
Associate Principal [email protected]@brentledwardsbrentedwards.nethttps://github.com/brentedwards
![Page 2: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/2.jpg)
Get Startedhttp://aka.ms/Dev8
http://aka.ms/UXGuidelines
![Page 3: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/3.jpg)
Launch your Windows 8 App in 30 days
Generation App Online training and tips from insiders Tele-support with a Windows 8
architect Exclusive one-on-one WinRT and
Windows UX design consultation
Sign up at http://aka.ms/30Days
Build your app: Generation App
Learn.Build.Publish.
![Page 4: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/4.jpg)
Local Events
• Twin Cities Windows 8 User Group – 4th Tuesday of Month– http://windows8ug.com/
• Windows 8 JavaScript and HTML Camp – Oct 4th
– http://aka.ms/Win8JavaScript• Windows 8 Developer Camp – Oct 9th
– http://aka.ms/Win8Camp• Windows 8 Hackathon – Oct 10th
– http://aka.ms/Win8Hackathon
![Page 5: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/5.jpg)
Level Set
• Designer?• Developer?• Aren’t Designer but play one at work?
![Page 6: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/6.jpg)
Windows 8 Design PrinciplesWhat are they?
![Page 7: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/7.jpg)
Windows 8 Design Principles
• Do more with less– Content before chrome
• Pride in craftsmanship– Styling, layout, typography – The details matter
• Be fast and fluid– Design for touch with motion and ergonomics in mind
• Authentically digital– Remember that user is interacting with computerized device
• Win as one– Use contracts to work with other apps
![Page 8: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/8.jpg)
That’s awful designer-likeWhat about us developer types?
![Page 9: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/9.jpg)
Approach Your UI Differently
• Design for Touch• Put Content Before Chrome
– Full Screen Content• Leverage Adaptive Layout• Be Authentically Digital
– Don’t try to mimic the real world
![Page 10: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/10.jpg)
Design for Touch
![Page 11: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/11.jpg)
Windows 8 Touch Language
• Design your app to be touch first
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx
![Page 12: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/12.jpg)
How Does Touch Change Things?
• Targets must be bigger
• 40 x 40px – Recommended minimum size– IF a wrong touch can be fixed in 1-2 gestures or within 5 seconds
• 50 x 50px – Recommended for actions with severe consequences– Close, Delete– Requires 2 gestures, 5 seconds, or major context change to correct
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx
![Page 13: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/13.jpg)
What Doesn’t Work With Touch?
• Listbox and ComboBox– Don’t have a good form factor for touch UI– Still available, but their use is discouraged
![Page 14: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/14.jpg)
Content Before Chrome
![Page 15: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/15.jpg)
Content Before Chrome
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh868264.aspx
![Page 16: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/16.jpg)
Content Before Chrome
• What is Chrome?– Chrome is anything that isn’t CONTENT– Chrome is clutter
• Drop the clutter– Focus on what is important– Let the rest fade away
• Example:– Commands don’t have to take up screen real estate
• Get rid of menu bars• Swipe from edge for system commands• Swipe from bottom for your app commands in AppBar
![Page 17: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/17.jpg)
Adaptive Layout
![Page 18: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/18.jpg)
Adaptive Layout
• What is Adaptive Layout?– A layout that adapts to the available screen real estate
Source: http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx
![Page 19: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/19.jpg)
Adaptive Layout[Demo]
![Page 20: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/20.jpg)
Adaptive Layout
• Snap View• GridView• ListView
![Page 21: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/21.jpg)
Snap View
Source: http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx
![Page 22: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/22.jpg)
Snap View
• 320px Fixed Width• Matches Height of Screen• Allows for multitasking
![Page 23: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/23.jpg)
GridView
• First thing you see with Start Screen• Primary way to display data• Scrolls Horizontally• Uses Rows and Columns• Can display grouped content
– Using CollectionViewSource
![Page 24: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/24.jpg)
GridView[Demo]
![Page 25: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/25.jpg)
ListView
• Exactly the same as GridView EXCEPT:– Scrolls Vertically– Uses Rows
• Works great for Snap View
![Page 26: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/26.jpg)
ListView[Demo]
![Page 27: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/27.jpg)
Authentically DigitalDon’t try to mimic the real world
![Page 28: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/28.jpg)
Semantic Zoom
• Lets user quickly navigate large amounts of data with touch gestures
• 2 Levels– Zoomed Out
• The Forest– Zoomed In
• The Trees
![Page 29: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/29.jpg)
Semantic Zoom[Demo]
![Page 30: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/30.jpg)
FlipView
• ItemsControl to view a single item at a time from a collection• Navigate between items with swipe gesture• Good for a small number of items
![Page 31: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/31.jpg)
FlipView[Demo]
![Page 32: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/32.jpg)
AppBarMore Content Before Chrome
![Page 33: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/33.jpg)
AppBar
• Menu Bars are clutter– Not CONTENT– Commands aren’t needed constantly
• Only show when needed– Swipe from edge for system commands– Swipe from bottom for your app commands in AppBar
![Page 34: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/34.jpg)
AppBar[Demo]
![Page 35: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/35.jpg)
Recap
• Design for Touch• Utilize Content Before Chrome
– Full Screen Content• Leverage Adaptive Layout• Be Authentically Digital
– Don’t try to mimic the real world
• Developers can make good looking apps too
![Page 36: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/36.jpg)
Questions?
![Page 37: Implementing Windows 8 Design Principles](https://reader035.vdocument.in/reader035/viewer/2022062511/54b70fa94a79590f628b45a8/html5/thumbnails/37.jpg)
Brent EdwardsAssociate Principal Consultant with Magenic
[email protected]@brentledwardsbrentedwards.nethttps://github.com/brentedwards