Dec 23 2013

Creating Depth in Design: Z-Axis Inspiration

z-axis-hero-graphic

If you’ve explored iOS7, then you’ve witnessed the parallax layering effect of the background, icons, and opened apps. When browsing on a Mac, you’ve probably seen the impressive 3D views in cover flow and Time Machine. And if you’ve checked out Gmail or Spotify for mobile, you’ve seen sidebar navigation create depth. Besides these examples of digital layering & 3D transformations in software and apps, we have the whole web demonstrating more dimension in a site’s layers of content. Layered content includes the now ever-present parallax scrolling, but we have even more innovative examples of z-axis animation emerging in our browsers & apps.

An incisive article by Wren Lanier explains how to approach z-axis designs, urges us to keep iterating, and suggests trimming needless flourishesTaking 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. Also check out our post that will inspire your next y-axis effects!

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

Check out this impressive demo of an unfurling 3D menu. I imagine the content being layered similarly to Clear when, one glorious day, I see the Makisu style debut on a popular iPhone app :D

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?

About the Author:

Julia Larson is a freelance copywriter & copyeditor at digital-telepathy. When not on a quadrilateral device, she’s on her yoga mat, a hike, or a cooking spree. Connect with her on Google+ and Twitter.

Leave a Response

2 Responses

  1. Jan 06 2014
    Tom

    Great stuff. Really enjoyed!

  2. Jan 07 2014
    best design company kolkata

    It is a very informative post,It will help the beginers. Thank you