UI design for Windows apps

Three speakers talked about platform specific UI designing during Ncell App Camp 2015. Chandan shared his experience of designing in Windows app.

Transcript

1. UI design for Windows apps Chandan Gupta Bhagat Solutions Architect and Co-Founder Yorbit Technologies Pvt. Ltd.
2. Windows apps • Application for – Mobile device family: Windows Phones, phablets – Desktop device family: Laptops, PCs – Team device family: Surface hub – IoT device family: Compact devices such as wearables or household appliances
3. Features for designers • Effective pixels and platform scaling • Universal input and smart interactions • Responsive designs • Universal building blocks • Give life to your apps
4. • Windows reimagined • All the apps you want • Cloud-connected • Built for business • Great experience across all hardware • Built on a solid foundation
5. • Windows Reimagined • New fast and fluid Start screen Touch, mouse, keyboard
6. • All the apps you want • Apps are at the heart of Windows Apps • The apps you need are built right in • Apps work together and make each other better • Mail Calendar • SkyDrive Photos • People Messaging
7. • Cloud-connected • Your Windows, everywhere • Connected to your people, files and apps
8. • Built for business • A better business tablet • New possibilities for mobile productivity • Enhanced end-to-end security • Virtualization and management
9. • Great experiences across all hardware • Tablets to laptops to all-in-ones • Share between devices • Touch, mouse, keyboard • Highest power to the most efficient chipset
10. • Built on a solid foundation • Fast, compatible and protected • More for power users • Enhanced desktop
11. Designs Principle
12. Pride in craftsmanship • Sweat the details. • Make using apps safe and reliable. • Use balance, symmetry, and hierarchy. • Align your app layout to the grid, the new layout for apps. • Make your app accessible to the widest possible audience, including people who have impairments or disabilities.
13. Be fast and fluid • Be responsive to user interaction and ready for the next interaction. • Design for touch and direct interaction. • Delight your users with motion. • Smoothly connect to what comes before and after.
14. Authentically digital • Be dynamic and alive with communication. • Use typography beautifully. • Use bold, vibrant colors. • Connect to the cloud so that your users can stay connected to each other.
15. Do more with less • Be great at something instead of mediocre at lots of things. • Put content before chrome. • Be visually focused and direct, letting people get immersed in what they love, and they will explore the rest. • Inspire confidence in users. • Reduce redundancy in your UI.
16. Win as one • Use the UI model. • Work with other apps to complete scenarios by participating in app contracts. • Use our tools and templates to promote consistency.
17. Anatomy of an app
18. • Navigation elements – Tabs and Pivots, Hyperlinks, and Nav panes. • Command elements – Button and Command bar • Content elements – Contents and Contents
19. Navigation Element Content Element Command Element
20. Common UI patterns • Active canvas – Command + Content • Master/details – Navigation + Content • Nav pane – Navigation + Content • Tabs and pivots – Navigation + Content
21. Active canvas
22. Master/details
23. Nav pane
24. Tabs and pivots
25. Thank You chandan@yorbittech.net