Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Secret Sauce: Designing on the Z-Axis (ConvergeFL 2013)

248b62984871a1320c4550ea9784c698?s=47 Wren Lanier
September 13, 2013

Secret Sauce: Designing on the Z-Axis (ConvergeFL 2013)

No matter what screen size you're designing for, multi-layered experiences are an important part of every designer's toolbox. Flat may be trendy, but depth is where it's at. **Note: most of the screenshot examples in this deck were animated in the original Keynote version. Check out the apps to see them in action.

248b62984871a1320c4550ea9784c698?s=128

Wren Lanier

September 13, 2013
Tweet

More Decks by Wren Lanier

Other Decks in Design

Transcript

  1. Secret Sauce: Desi nin on the Z-Axis Wren Lanier //

    @heywren
  2. None
  3. behance.net/saturized

  4. Axure template by appetitedesign.nl

  5. The Nearby app

  6. Z-Axis enables three-dimensional experiences

  7. Three-dimensional experiences are the future

  8. None
  9. Based on the resolution rumor alon with the newly revealed

    pillars of iOS 7, I think the next frontier that Apple mi ht be venturin into with iOS hardware is fully realized 3D Retina Displays. - Jeff Rock, Mobelux “ jeffrock.com/deep.html
  10. It’s time to put away the 2D tricks and start

    desi nin deeper interactions
  11. Layered interfaces are a powerful desi n tool

  12. Where do I put this? = Can the Z-Axis help

    here?
  13. MENUS

  14. Tumblr app

  15. 500px app

  16. None
  17. dribbble.com/dash

  18. ACTION BUTTONS

  19. (old) Foursquare

  20. Foursquare app

  21. Felix app

  22. Facebook app

  23. CONTENT/ INFORMATION

  24. Path app

  25. Foursquare app

  26. http://source.tutsplus.com/webdesign/tutorials/005_parallax/demo/

  27. http://letsfreecongress.org/

  28. http://insideintercom.io/why-cards-are-the-future-of-the-web/

  29. Evernote app

  30. THINKING ON THE Z-AXIS

  31. LAYERS • Each layer should have a purpose • Layer

    hierarchy should reflect feature hierarchy—most important action on top • Take advanta e of the ability to move elements independently of one another in space or time
  32. ZOOM • Your canvas is both deep and wide •

    Zoom animations should describe the relationship between views and information - Zoom out for hi her-level views - Zoom in for detailed views
  33. OBJECTS HAVE SIDES • Instead of slidin , flip thin

    s over • Use the back of an object to display less frequently used options • Adhere to real world physics
  34. Don’t let parlor tricks interfere with a quality user experience

  35. Thank you!