Windows 8 design 101
•
9 likes•1,877 views
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.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Windows 8 design 101
Similar to Windows 8 design 101 (20)
Recently uploaded
Recently uploaded (20)
Windows 8 design 101
- 1. Windows 8 Design 101 Christina Seong and Valentina Ferrari
- 2. About Us Christina Seong Valentina Ferrari MS Human Centered Design & Engineering @valeaseattle
- 3. Outline Design 101 Windows 8 Design User Experience Origins Benefits 5 Principles Process 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 Desirable how a person feels about using Valuable a system or device. 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
- 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)
- 27. Hierarchy HUB PAGE SECTION PAGE DETAIL PAGE
- 28. Hub Page
- 29. Section Page
- 30. Detail Page
- 31. Typography Segoe UI Calibri Header – 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, and Subheader – 20pt Microsoft PowerPoint. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Sub secondary – 20pt incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex Small subheader – 11pt ea commodo consequat. Duis aute irure dolor Navigation – 11pt in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint Body Text – 11pt occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
- 32. Grid
- 33. Snap & Layout Views
- 34. Snap & Layout Views
- 35. Branding – In the Store
- 36. Branding – Tile
- 37. Branding – Loading Screen
- 38. Branding – Splash Screen Vs. Loading Screen
- 40. Branding – Color Scheme
- 42. case study
- 43. Design Contest
- 44. Sketching
- 45. Wireframes
- 46. Visual Design
- 48. Hub Screen
- 49. Semantic Zoom
- 50. Detail Page
- 51. appendix
- 52. 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
- 53. Design Resources Typography Font Squirrel DaFont Color Schemes Color Scheme Designer Colour Lovers Icons The Noun Project Icon Finder
- 54. 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