Windows 8 design 101

1,922 views

Published on

This is a presentation we gave at the Microsoft Gen Appathon on November 9th, 2012. It is an introduction to the user centered design process and Windows 8 design.

Published in: Design
1 Comment
8 Likes
Statistics
Notes
  • hello valentina, do you have any more information about the usability study of windows 8 on paper prototypes?
    thank you
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,922
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Windows 8 design 101

  1. 1. Windows 8 Design 101Christina Seong and Valentina Ferrari
  2. 2. About Us Christina Seong Valentina Ferrari MS Human Centered Design & Engineering @valeaseattle
  3. 3. OutlineDesign 101 Windows 8 DesignUser Experience OriginsBenefits 5 PrinciplesProcess Windows UX Branding Case Study
  4. 4. design 101
  5. 5. Why is design important? BUSINESS TECHNICAL Viable Feasible DESIGN Desirable
  6. 6. What is UX?User Experience Useful(UX) is about Usable Desirablehow a personfeels about using Valuablea system ordevice. Findable Accessible Credible
  7. 7. Core UX Disciplines Content Information User Research Strategy Architecture Interaction Visual Usability Design Design Evaluation
  8. 8. Benefits• Increased user efficiency• Improved user productivity• Customer satisfaction• Increased adoption rates• Reduced time & costs in development• Decreased training & support costs• Reduced maintenance costs
  9. 9. Design Phase brainstorming exploration consolidation• Feature ideation • Competitive analysis • Wireframes• User research • User research • Mockups/Comps• Personas • Whiteboarding • Information architecture• Whiteboarding • Post-it notes • Paper prototypes• Sketching • Prototype testing
  10. 10. Ideation & Sketching
  11. 11. Wireframes
  12. 12. Usability Study
  13. 13. Visual Design
  14. 14. Windows 8
  15. 15. Origins• Modern Design• Swiss Design• Motion Design
  16. 16. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  17. 17. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  18. 18. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  19. 19. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  20. 20. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  21. 21. Navigation – Tap on Headers (Hub → Section)
  22. 22. Navigation – Navigation Bar (Hub → Hub)
  23. 23. Navigation – Charms
  24. 24. Navigation – Tiles
  25. 25. Hierarchy HUB PAGE SECTION PAGE DETAIL PAGE
  26. 26. Hub Page
  27. 27. Section Page
  28. 28. Detail Page
  29. 29. TypographySegoe UI CalibriHeader – 42pt Calibri is a sans-serif font family designed for reading long texts onscreen. Use Calibri for text that the user writes or edits, such as text in an email or chat client. It is the default font in Microsoft Outlook, Microsoft Word, andSubheader – 20pt Microsoft PowerPoint. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporSub secondary – 20pt incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exSmall subheader – 11pt ea commodo consequat. Duis aute irure dolorNavigation – 11pt in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sintBody Text – 11pt occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  30. 30. Grid
  31. 31. Snap & Layout Views
  32. 32. Snap & Layout Views
  33. 33. Branding – In the Store
  34. 34. Branding – Tile
  35. 35. Branding – Loading Screen
  36. 36. Branding – Splash Screen Vs. Loading Screen
  37. 37. Branding – Typography
  38. 38. Branding – Color Scheme
  39. 39. Branding – Background
  40. 40. case study
  41. 41. Design Contest
  42. 42. Sketching
  43. 43. Wireframes
  44. 44. Visual Design
  45. 45. …back to sketching…
  46. 46. Hub Screen
  47. 47. Semantic Zoom
  48. 48. Detail Page
  49. 49. appendix
  50. 50. Windows 8 Resources• Making Great Metro Style Apps• Planning Metro Style Apps• How Navigation works• Commands and Charms• Touch Interaction• PSD Resources from Microsoft• Typography• The Grid• UX Guidelines for Metro Style Apps• Scaling to different screen• Gestures• Splash Screen Guidelines• Skeuomorphic Design
  51. 51. Design ResourcesTypographyFont SquirrelDaFontColor SchemesColor Scheme DesignerColour LoversIconsThe Noun ProjectIcon Finder
  52. 52. Apps Featured• Wordpress • The Times of India• Zomato • Treehouse Stampede• Cookbook • Sudoku• MusixMatch • Check• Reddit (concept design) • Picstream• News360 • Photobucket• Dailymotion • Netflix• Kindle • NASA• Weather• Slacker Radio• Xe Currency• Cut the rope

×