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. Brent Edwards is an Associate Principal Consultant for Magenic, a Microsoft Gold Partner software development firm. He is an accomplished software developer, architect, mentor, and speaker with over 7 years of experience in developing innovative solutions with Microsoft technologies. Brent has worked on projects ranging from ASP.NET MVC with jQuery to WPF to Silverlight. He is also the author of MVVM Fabric, a free MVVM framework for WPF. In addition to Microsoft technologies, Brent develops applications for the Android platform. His apps have over two million downloads and he was selected by Google as a Top Android Developer for their Device Seeding Program. When not cranking out code, you can find him hanging out with his wife and four kids or riding his wakeboard, snowboard or mountain bike.

1. Implementing Windows 8
Design Principles
Brent Edwards
Associate Principal Consultant
BrentE@magenic.com
@brentledwards
brentedwards.net
https://github.com/brentedwards

2. Get Started
http://aka.ms/Dev8
http://aka.ms/UXGuidelines

3. Build your app: Generation
App
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

4. Local Events
• Twin Cities Windows 8 User Group – 4th Tuesday of Month
– http://windows8ug.com/

5. Level Set
• Designer?
• Developer?
• Aren’t Designer but play one at work?

6. Windows 8 Design Principles
What are they?

7. 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

8. That’s awful designer-like
What about us developer types?

9. 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
• Use Contracts to interact with other apps
– Share
– Search

10. Design for Touch

11. Windows 8 Touch Language
• Design your app to be touch first
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

12. How Does Touch Change Things?
• Targets must be bigger
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx
• 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

13. 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

14. Content Before Chrome

15. Content Before Chrome
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh868264.aspx

16. 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

17. Adaptive Layout

18. 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

19. Adaptive Layout
[Demo]

20. Adaptive Layout
• Use Adaptive Layout
– Snap View
• Implement Adaptive Layout
– GridView
– ListView

21. Snap View
Source: http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx

22. Snap View
• 320px Fixed Width
– Allows for consistency in design
• Matches Height of Screen
• Allows for multitasking
• We’ll see Snap View in action in a bit…

23. 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

24. GridView
[Demo]

25. ListView
• Exactly the same as GridView EXCEPT:
– Scrolls Vertically
– Uses Rows
• Works great for Snap View

26. ListView / Snap View
[Demo]

27. Authentically Digital
Don’t try to mimic the real world

28. Semantic Zoom
• Lets user quickly navigate large amounts of data with touch gestures
• 2 Levels
– Zoomed Out
• The Forest
– Zoomed In
• The Trees

29. Semantic Zoom
[Demo]

30. 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

31. FlipView
[Demo]

32. AppBar
More Content Before Chrome

33. 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

34. AppBar
[Demo]

35. Contracts

36. Contracts
• What are they?
– Agreement between one or more apps
• Contracts provide consistency across all apps
• Contracts have two sides
– Source
– Target

37. Examples of Contracts
• Share
• Search
• Settings
• Play To
• File Picker
• Cached File Updater

38. Contracts - Share
• Share content from your app
Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh758314.aspx

39. Share Contract
[Demo]

40. Contracts - Search
• Search your app from anywhere in the OS
• Minimum Requirements
– Declare Search contract in app manifest
– Create search results page
– Respond to search query while app is active
– Respond to search query while app is not active

41. Search Contract
[Demo]

42. 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
• Use Contracts to interact with other apps
• Developers can make good looking apps too

43. Questions?

44. Brent Edwards
Associate Principal Consultant with Magenic
BrentE@magenic.com
@brentledwards
brentedwards.net
https://github.com/brentedwards