Implementing Windows 8 Design Principles
Upcoming SlideShare
Loading in...5
×
 

Implementing Windows 8 Design Principles

on

  • 1,227 views

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

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.

Statistics

Views

Total Views
1,227
Views on SlideShare
1,225
Embed Views
2

Actions

Likes
1
Downloads
5
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Implementing Windows 8 Design Principles Implementing Windows 8 Design Principles Presentation Transcript

    • Implementing Windows 8Design PrinciplesBrent EdwardsAssociate Principal ConsultantBrentE@magenic.com@brentledwardsbrentedwards.nethttps://github.com/brentedwards
    • Get Startedhttp://aka.ms/Dev8http://aka.ms/UXGuidelines
    • Build your app: GenerationApp 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
    • 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
    • Level Set• Designer?• Developer?• Aren’t Designer but play one at work?
    • Windows 8 Design PrinciplesWhat are they?
    • 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
    • That’s awful designer-likeWhat about us developer types?
    • 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
    • Design for Touch
    • Windows 8 Touch Language• Design your app to be touch first Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx
    • 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
    • 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
    • Content Before Chrome
    • Content Before Chrome Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh868264.aspx
    • 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
    • Adaptive Layout
    • 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
    • Adaptive Layout[Demo]
    • Adaptive Layout• Snap View• GridView• ListView
    • Snap View Source: http://blogs.msdn.com/b/b8/archive/2012/03/21/scaling-to-different-screens.aspx
    • Snap View• 320px Fixed Width• Matches Height of Screen• Allows for multitasking
    • 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
    • GridView[Demo]
    • ListView• Exactly the same as GridView EXCEPT: – Scrolls Vertically – Uses Rows• Works great for Snap View
    • ListView[Demo]
    • Authentically DigitalDon’t try to mimic the real world
    • Semantic Zoom• Lets user quickly navigate large amounts of data with touch gestures• 2 Levels – Zoomed Out • The Forest – Zoomed In • The Trees
    • Semantic Zoom[Demo]
    • 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
    • FlipView[Demo]
    • AppBarMore Content Before Chrome
    • 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
    • AppBar[Demo]
    • 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
    • Questions?
    • Brent EdwardsAssociate Principal Consultant with MagenicBrentE@magenic.com@brentledwardsbrentedwards.nethttps://github.com/brentedwards