The Z-Axis: Designing for the Future

by Wren Lanier

17 Reader Comments

Back to the Article
  1. Thanks, Wren. I would love to see some good teaching resources out there to learn some of these techniques.

    One method that I’ve worked with some is using off-canvas patterns (http://jasonweaver.name/lab/offcanvas/) which is handy for achieving some of those basic slide-in/slide-out effects.

    Copy & paste the code below to embed this comment.
  2. I love this.  Thank you.  A lot of great stuff to think about.

    Copy & paste the code below to embed this comment.
  3. Great article! A handy Javascript module that handles z-index manipulation: http://www.designsmoothie.com/custom-module-z-index-manipulation-dom-element-groups-using-tdd-qunit

    Copy & paste the code below to embed this comment.
  4. Strictly speaking, this is not z-axis but just overlaying of elements. In the case of Gmail, it’s not z-axis but shift of axis.

    Copy & paste the code below to embed this comment.
  5. In geometric terms, the z-axis is the vertex that measures space above and below the x- and y-axes.

    Hmm, are you sure? An axis is a line, and a vertex is a point. And neither can “measure”.

    Copy & paste the code below to embed this comment.
  6. Fantastic.  I particularly appreciate the videos to illustrate each point.  I’m seeing more and more of this – particularly the large, dramatic navigation.  Nice work.

    Copy & paste the code below to embed this comment.
  7. Responsiveness is not just about the size and resolution of your screen, it’s also about input device and distance between the screen and the user, and the input device itself, if it matters. Of course the z-axis matters. On both sides of the mirror.

    Copy & paste the code below to embed this comment.
  8. Love the article Wren, thanks for this.

    I think the first time I noticed this was with the XBOX 360 interface, where navigating deeper into a category used zooming to illustrate the movement. But more importantly, the zooming was accompanied with a radial gradient that kept getting darker, the deeper you navigated.

    Personally I’m interested to see where this will take us in the future, and if it’s just a trend or will it really affect certain usage patterns.

    Copy & paste the code below to embed this comment.
  9. web designing is changing day to day and z axis designing will be the latest and innovative trends for every designers. thanks for such an valuable post

    Copy & paste the code below to embed this comment.
  10. Thanks for writing Wren! As the web standards and capabilities improve, we are able to create more user friendly and at the same time, more complex interfaces. I have been designing z-index animations, but I haven’t thought about in such a 3d space before – like the first image you posted.

    I think one really important thing to remember when using animations is to make sure they actually help your users, rather than just look pretty. Sure, it may be cool to have your page do a 360 when transitioning from one to another, but it that user friendly?

    Thanks again!

    Copy & paste the code below to embed this comment.
  11. Cool article Wren!

    iOS 7 has become a great example of this for me. I think it’s a glimpse into how they imagine interaction design and the “parallax” effect is perhaps just the starting blocks for this.

    As hardware becomes stronger, more advanced processing would enable new forms of interaction where we can literally hide/show interface elements on a 3D plane and thereby creating the best possible interface for the intended user.

    The Advanced Sensor Based UI’s and 3D GUI patents by Apple are quite interesting paths to explore…

    I’ve done some writing on this over here: http://movd.co/the-evolution-of-ios-7-and-the-future-of-ui-design/

    Copy & paste the code below to embed this comment.
  12. I love hoverstat.es for this kind of stuff, there is a lot of projects for inspiration.
    Anyway, great article, thanks!

    Copy & paste the code below to embed this comment.
  13. Layering content in a design is always useful when screens are small. The most important part I have found in recent projects is to be consistent in the way you transition between the layers. Users can handle a new design pattern as long as it becomes expected/predictable to access certain screens/info.

    Thanks for writing about this very relevant topic.

    Copy & paste the code below to embed this comment.
  14. Fantastic article. Thank you.

    Copy & paste the code below to embed this comment.
  15. Hey Wren,

    I appreciated your presentation on this topic at ModevUX conference in McLean, VA yesterday, and it is great to see it here in a slightly different iteration because although I took a lot of notes, my handwriting is so bad that when I write the “old-fashion” way, it looks like a palimpsest (i.e., z-axis in a not-good fashion!).
    Thanks,
    Becky Wolsk

    Copy & paste the code below to embed this comment.
  16. My slide on CSS3 transforms explains “z-axis”
    slide share link

    Copy & paste the code below to embed this comment.
  17. Website designing is changing day by day, every business owners and marketers need to adopt to stay in competitive. z axis web designing is one of the key design features in the modern world. thanks for sharing useful information with us.

    Copy & paste the code below to embed this comment.