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

The user experience defines your app

Module Agenda Platform capabilities Device variability Design considerations

Platform capabilities

Platform-specific design language

Optimize the user experience for the device they are on

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

Accessibility UI automation Assistive technologies Theme Resources Accessibility checker (http://aka.ms/Ib27rq) 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 (http://aka.ms/He28ge) Automation peers (IValueProvider) Accessibility names / Label(Name) / View(Raw) / LiveRegion

Device variability

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

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.

Design tooling

Adaptive Fixed

11.6” 1366x768 11.6” 1920x1080

Design considerations

Designing with a common visual vocabulary

Don’t forget! Tailor to the platform

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

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

There’s no silver bullet

Module Recap Platform capabilities Device variability Design considerations