Uploaded byValentina Ferrari
Windows 8 design 101
The document provides an overview of Windows 8 design principles and user experience, highlighting the importance of design in enhancing usability and customer satisfaction. It outlines five core principles, including 'be fast and fluid' and 'pride in craftsmanship', along with the design process involving ideation, wireframes, and user research. Additionally, it includes resources for design and branding guidelines essential for creating Metro style apps.
More Related Content
Windows 8 design 101
- 1. Windows 8 Design101 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.
- 5. Why is designimportant? BUSINESS TECHNICAL Viable Feasible DESIGN Desirable
- 6. What is UX? UserExperience 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 userefficiency • 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.
- 11.
- 12.
- 13.
- 14.
- 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 – Tapon Headers (Hub → Section)
- 22. Navigation – NavigationBar (Hub → Hub)
- 23.
- 26.
- 27. Hierarchy HUB PAGE SECTION PAGE DETAIL PAGE
- 28.
- 29.
- 30.
- 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.
- 33. Snap & LayoutViews
- 34. Snap & LayoutViews
- 35. Branding – Inthe Store
- 36.
- 37. Branding – LoadingScreen
- 38. Branding – SplashScreen Vs. Loading Screen
- 39.
- 40. Branding – ColorScheme
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 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 ColorSchemes 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