Implementing Windows 8 Design Principles

37
Implementing Windows 8 Design Principles Brent Edwards Associate Principal Consultant [email protected] @brentledwards brentedwards.net https://github.com/brentedwards

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 of Implementing Windows 8 Design Principles

Page 1: Implementing Windows 8 Design Principles

Implementing Windows 8 Design PrinciplesBrent Edwards

Associate Principal [email protected]@brentledwardsbrentedwards.nethttps://github.com/brentedwards

Page 2: Implementing Windows 8 Design Principles

Get Startedhttp://aka.ms/Dev8

http://aka.ms/UXGuidelines

Page 3: Implementing Windows 8 Design Principles

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

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

Level Set

• Designer?• Developer?• Aren’t Designer but play one at work?

Page 6: Implementing Windows 8 Design Principles

Windows 8 Design PrinciplesWhat are they?

Page 7: Implementing Windows 8 Design Principles

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

That’s awful designer-likeWhat about us developer types?

Page 9: Implementing Windows 8 Design Principles

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

Design for Touch

Page 11: Implementing Windows 8 Design Principles

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

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

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

Content Before Chrome

Page 16: Implementing Windows 8 Design Principles

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

Adaptive Layout

Page 18: Implementing Windows 8 Design Principles

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

Adaptive Layout[Demo]

Page 20: Implementing Windows 8 Design Principles

Adaptive Layout

• Snap View• GridView• ListView

Page 21: Implementing Windows 8 Design Principles

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

Snap View

• 320px Fixed Width• Matches Height of Screen• Allows for multitasking

Page 23: Implementing Windows 8 Design Principles

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

GridView[Demo]

Page 25: Implementing Windows 8 Design Principles

ListView

• Exactly the same as GridView EXCEPT:– Scrolls Vertically– Uses Rows

• Works great for Snap View

Page 26: Implementing Windows 8 Design Principles

ListView[Demo]

Page 27: Implementing Windows 8 Design Principles

Authentically DigitalDon’t try to mimic the real world

Page 28: Implementing Windows 8 Design Principles

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

Semantic Zoom[Demo]

Page 30: Implementing Windows 8 Design Principles

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

FlipView[Demo]

Page 32: Implementing Windows 8 Design Principles

AppBarMore Content Before Chrome

Page 33: Implementing Windows 8 Design Principles

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

AppBar[Demo]

Page 35: Implementing Windows 8 Design Principles

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

Questions?

Page 37: Implementing Windows 8 Design Principles

Brent EdwardsAssociate Principal Consultant with Magenic

[email protected]@brentledwardsbrentedwards.nethttps://github.com/brentedwards