1. 03 | UWA Design
Jerry Nixon | Microsoft Developer Evangelist Daren May | President & Co-founder, Crank211

2. The user experience defines your app

3. Module Agenda Platform capabilities Device variability
Design considerations

4. Platform capabilities

5. Platform-specific design language

6. Optimize the user experience for the device they are on

7. Platform-specific capabilities
Windows
Phone
Print contract
New window
Search Box
App Bar
Call dialog
Back button
Status Bar
Pivot control

8. Accessibility UI automation Assistive technologies Theme Resources
Accessibility checker (
Assistive technologies
On screen keyboard, only Keyboard
Voice recognition, varying input
Screen readers, varying output
Theme Resources
High contrast
Variable Fonts
Media captioning
Customizing controls (
Automation peers (IValueProvider)
Accessibility names / Label(Name) / View(Raw) / LiveRegion

9. Device variability

10. What if the user…? The emulator is sufficient for flow verification.
Follow standard approaches with controls

11. 40” What if the device is…? 30” 24” 18” 14” 10” 8”6” 4”
The emulator is insufficient for asset verification.
It’s up to you to set the expected size of assets.
Avoid adding additional scaling to your own assets.
Don’t overthink it. If it looks good, you’re done.

12. Design tooling

13. Adaptive
Fixed

14. 11.6” 1366x768
11.6” 1920x1080

15. Design considerations

16. Designing with a common visual vocabulary

17. Don’t forget! Tailor to the platform

18. It’s okay if each version doesn’t look the same and doesn’t have the same features

19. Which design assets to share
Windows
Assets
Scaled Images
Dictionaries
Templates.xaml
FontSizes.xaml
Controls.xaml
Platform.xaml
Views
Main.xaml
Detail.xaml
Settings.xaml
Phone
Shared
Images
Simple Images
Brushes.xaml
FontFamilies.xaml
Login.xaml
WidePage.xaml
NarrowPage.xaml

20. There’s no silver bullet

21. Module Recap Platform capabilities Device variability
Design considerations