1 / 88

Designing metro style apps for Windows 8

Designing metro style apps for Windows 8 . A walkthrough some UI / UX best practices. Lanny Geffen , Creative Director, Digiflare. Who am I ?. Agenda:. Metro style background & design principles Layout and typography Navigation design Filters, pivots, sorts, and views Command design

reuben
Download Presentation

Designing metro style apps for Windows 8

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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?

More Related