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.


Wren Lanier

September 13, 2013

More Decks by Wren Lanier

Other Decks in Design


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

  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

  13. MENUS

  14. Tumblr app

  15. 500px app

  16. None
  17. dribbble.com/dash


  19. (old) Foursquare

  20. Foursquare app

  21. Felix app

  22. Facebook app


  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


  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!