Your SlideShare is downloading. ×
Windows 8 design 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Windows 8 design 101

1,425
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.

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,425
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
1
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Windows 8 Design 101Christina Seong and Valentina Ferrari
  • 2. About Us Christina Seong Valentina Ferrari MS Human Centered Design & Engineering @valeaseattle
  • 3. OutlineDesign 101 Windows 8 DesignUser Experience OriginsBenefits 5 PrinciplesProcess Windows UX Branding Case Study
  • 4. design 101
  • 5. Why is design important? BUSINESS TECHNICAL Viable Feasible DESIGN Desirable
  • 6. What is UX?User Experience Useful(UX) is about Usable Desirablehow a personfeels about using Valuablea system ordevice. Findable Accessible Credible
  • 7. Core UX Disciplines Content Information User Research Strategy Architecture Interaction Visual Usability Design Design Evaluation
  • 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. 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. Ideation & Sketching
  • 11. Wireframes
  • 12. Usability Study
  • 13. Visual Design
  • 14. Windows 8
  • 15. Origins• Modern Design• Swiss Design• Motion Design
  • 16. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  • 17. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  • 18. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  • 19. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  • 20. Five Principles• Pride in Craftsmanship• Be Fast and Fluid• Authentically Digital• Do More with Less• Win as One
  • 21. Navigation – Tap on Headers (Hub → Section)
  • 22. Navigation – Navigation Bar (Hub → Hub)
  • 23. Navigation – Charms
  • 24. Navigation – Tiles
  • 25. Hierarchy HUB PAGE SECTION PAGE DETAIL PAGE
  • 26. Hub Page
  • 27. Section Page
  • 28. Detail Page
  • 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. Grid
  • 31. Snap & Layout Views
  • 32. Snap & Layout Views
  • 33. Branding – In the Store
  • 34. Branding – Tile
  • 35. Branding – Loading Screen
  • 36. Branding – Splash Screen Vs. Loading Screen
  • 37. Branding – Typography
  • 38. Branding – Color Scheme
  • 39. Branding – Background
  • 40. case study
  • 41. Design Contest
  • 42. Sketching
  • 43. Wireframes
  • 44. Visual Design
  • 45. …back to sketching…
  • 46. Hub Screen
  • 47. Semantic Zoom
  • 48. Detail Page
  • 49. appendix
  • 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. Design ResourcesTypographyFont SquirrelDaFontColor SchemesColor Scheme DesignerColour LoversIconsThe Noun ProjectIcon Finder
  • 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