Download
designing metro style apps for windows 8 n.
Skip this Video
Loading SlideShow in 5 Seconds..
Designing metro style apps for Windows 8 PowerPoint Presentation
Download Presentation
Designing metro style apps for Windows 8

Designing metro style apps for Windows 8

183 Views Download Presentation
Download Presentation

Designing metro style apps for Windows 8

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Designing metro style apps for Windows 8 A walkthrough some UI / UX best practices Lanny Geffen, Creative Director, Digiflare

  2. Who am I ?

  3. Agenda: • Metro style background & design principles • Layout and typography • Navigation design • Filters, pivots, sorts, and views • Command design • Touch design

  4. Metro background & design principles

  5. Three key influences Modern design – Bauhaus International typographic style – Swiss design Motion design – Cinematography

  6. Why Swiss design? Focus on cleanliness, readability and beautiful graphic design. The tools of Swiss design: Typography Grid Bold flat color Photography in place of illustration or drawings

  7. Three key influences • Modern design – Bauhaus • International typographic style – Swiss design • Motion design – Cinematography

  8. Three key influences • Modern design – Reduce to the essence • International typographic style – Clear, honest, and beautiful • Motion design – Bring it to life

  9. Metro style design principles Pride in craftsmanship Be fast and fluid Authentically digital Do more with less Win as one

  10. Pride in craftsmanship Sweat the details Make it safe and reliable Balance, symmetry, hierarchy Align to the grid

  11. Layout & typography

  12. Navigation design

  13. Be fast and fluid Life is mobile Delight with motion Design for touch Intuitive interaction Be responsive and ready Immersive and compelling

  14. Hierarchical system Hierarchical system: Hub pages Section page Detail pages

  15. Flat system Flat system: Games Browsers Document Creation

  16. Hub page and content sections

  17. Semantic zoom

  18. Nav bar navigation Header and back button Hub page Content section or categories

  19. Header menu

  20. Filters, pivots, sorts and views

  21. Filters, pivots, sorts and views Give users control over the way they experience content Use on-canvas controls for filtering, pivoting, or sorting when finding an item is a primary task Controls should go into the app bar, if the focus of the app is on browsing for content (e.g. magazine, or shopping)

  22. Filters, pivots, sorts and views Give users control over the way they experience content Use on-canvas controls for filtering, pivoting, or sorting when finding an item is a primary task Controls should go into the app bar, if the focus of the app is on browsing for content (e.g. magazine, or shopping)

  23. Command design

  24. command design Use the canvas for all core scenarios Use the charms to enable the most common app commands (search, share, devices, settings) Use the app bar to display commands on-demand Use context menus for clipboard actions, or commands that apply to content that cannot be selected (like an image)

  25. command placements Step 1: organize commands What commands should appear throughout the app? What comands should show only on certain pages? What commands should use charms or go in settings?