designing metro style apps for windows 8 n.
Download
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

Loading in 2 Seconds...

play fullscreen
1 / 88

Designing metro style apps for Windows 8 - PowerPoint PPT Presentation


  • 177 Views
  • Updated on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - 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?