An incisive article by Wren Lanier explains how to approach z-axis designs, urges us to keep iterating, and suggests trimming needless flourishes. Taking advantage of the z-axis helps us solve for interfaces that require a complex UX/UI.
Here are some examples to inspire your next foray into layers & depth.
Z-axis Examples for Your Inspiration
1. Axel Aubert’s nav
I’m a huge fan of this site’s surprising hover effect on the nav bar. It swings back the entire page to give a sense that there’s structure underneath.
2. Manuel Rueda’s clips
This portfolio sports an innovative z-axis animation. Scrolling brings Manuel’s videos from flat to upright.
3. Paperfold CSS’s demo
Found on Mozilla’s HTML5 demo studio, this concept provides a fun, efficient & useful way to arrange content. (What I want to know: When will Twitter adopt it?)
4. “Mind Control” by Pitchfork
This layered parallax effect has become incredibly popular, but Pitchfork brings it to a whole new level with this Janelle Monáe feature. Not only are flat panes of text superimposed on images, but the images themselves are also animated with depth. For instance, in the image above, the flowers are blurred and hover as an additional layer between the text and Janelle.
5. nimbletank’s nav
Simply click the card to bring it to the top. An engaging way to add dimension & delight to navigation, especially when viewed on a tablet or mobile device.
6. Batterii’s Flip Form & Origami
Reveal a dt-designed card flip when you click the bottom-of-the-page’s “Sign Up for Demo.” Directly above the flip form, the boxes’ layers unfold to reveal more information beneath (as seen on our Impress site).
7. IFTTT’s card flip
If you have the iOS app, then you can see that card flip when you click on the settings cog. I mentioned this one in a delightful details roundup, and there are plenty of iPhone & Android sidebars, flips, and reveals to inspire.
As this nice article on cards as the future of the web emphasizes, cards can be manipulated. This is a huge boon to responsive web design and the manual gestures we make on touchscreens.
8. Twenty Things I Learned’s animated page turns
Simply hover on the edge of the book’s page, and it’ll begin to creep up. Click the corner, and it’ll fold over and reveal the next page, like a real book. Check out other Chrome Experiments for even more inspiration.
9. Makisu’s sushi-inspired folds
10. Silverback’s parallax resizing
Looking for a throwback to a true parallax classic? Look no further than Silverback’s site. Resize your browser from the left or right side, or drag a corner in and out, and you’ll see the dimensional leaves.
From A to Z
Demos and examples will hopefully get you going on your next 3D project for your site, client, or purely for your own delight. With y-axis effects beginning to look dated, it’s time to up your game with the 3D effects on the z-axis. If you ask for my rule of thumb, it’s to only add that snazzy 3D effect when it reduces friction (and increases delight!) for the user. What’s your take on the next trend? Do you think z-axis is the next wave of web design?