implementing windows 8 design principles
DESCRIPTION
Windows 8 marks a complete shift in design principles for the Windows platform. To stay relevant as a developer on the Windows platform, you have to learn to implement the new Windows 8 design principles. In this session, we will cover what you need to know about what has changed and what hasn't. We will look at how you, the developer, can leverage these design principles from the perspective you know best: the code.TRANSCRIPT
![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