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.

Transcript

1. Secret Sauce: Desi nin on the Z-Axis Wren Lanier // @heywren
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
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
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!