Advertisement
Design Theory

Understanding the Z-Layout in Web Design

by

The Z-Layout is a great way to start just about any web design project because it addresses the core requirements for any effective site: branding, hierarchy, structure, and call to action. While the classic "Z-Layout" isn't going to be the perfect solution for each and every website out there, it's certainly a layout that's effective enough to warrant inclusion in any web designer's arsenal of layout ideas.

Attaining a better grasp of how different layouts can change user behavior is one of the central principles of creating an effective user experience.

This post marks the first in a series where we’ll be examining the wide variety of layout paradigms that exist in the world of web design. The goal: to better understand why you might choose one layout concept over another. In this series, we'll also be looking at the "F" shaped pattern, the open layout, and some out of the box layouts that are sure to give you some great ideas. Attaining a better grasp of how different layouts can change user behavior is one of the central principles of the creating an effective user experience.


Introducing the Z-Layout

The premise of the Z-Layout is actually pretty simple: super-impose the letter Z on the page. Place the items that you want the reader to see first along the top of the Z. The eye will naturally follow the path of the Z, so the goal is to place your "call to action" at the end. All along the path you can include bits of information that build up to the call-to-action. Let's take a look at the diagram:

Notice that we've numbered the key points along the path - these represent the order in which a reader is likely to view the page content. Let's see how this translates to an actual layout:

Now let's overlay the Z-Diagram on top of the layout:

Simple, right? There's certainly nothing complicated about this layout - but it quickly and effectively moves the eye from Point 1 to Point 4 in a logical order - concluding with a powerful call to action. There's still a few things that we can do to spice this layout up though... so let's add a few things to the design:

  • Background separation to focus the eye movement inside the framework of our design.
  • A styled logo to grab the user's attention at point #1.
  • A colorful "sign up" button at point #2: this will reinforce the desired eye movement.
  • A Featured Image Slider in the center of the page: this will separate the top section of the design from the bottom, and facilitate eye movement downward.
  • Icons at point #3 and along the bottom axis: this will encourage "title scanning" as the eye moves to the call to action.
  • A big "call to action" at point #4 - thanks to the new background separation, this feature should stand out more.

Here you can see that the new "sign up" button in the navigation stands out more; The "slider" that we've added to the leaderboard area helps keep the user's attention within the center of the frame; The 2 icons next to the blocks of content in Point 3 also help to make them a bit more visually interesting. Again - this stuff is simple as it can be, but simple can be good when it comes to website design! You can layers in complexity as you please, but don't overlook the power of a simple, effective layout.


Why it Works

The Z-Layout certainly doesn't need to be the final concrete solution for all sites, but as I mentioned before, it's often a great jumping off point for any design project because it tackles the 4 of the big principles of an effective design:

  • Branding
  • Hierarchy
  • Structure
  • A Call to Action

It works because most Western readers will scan a site the same way that they would scan a book - top to bottom, left to right. From this simple foundation you can pretty much go anywhere: Add multiple calls to action, shrink the height of the Z, extend it, do whatever you'd like that makes sense to the goal of the site.

Let's take a look at a few great site designs that use the Z-Layout as the basic structure. One thing you'll want to note in these examples is how the z-layout is able to adapt. The Call to Action may not always be the same (some sites may want to drive you to their portfolio more than they want to you "Sign Up"); the content along the path may look markedly different than our example. The thing to notice is how the storytelling aspect is carried across: 1, 2, 3, Action! By moving the eye along the Z-Path, the chances that a viewer will end up doing what you want them to do is increased.

While you view these examples, try to find the Z-path that the designer wants you to follow.


Examples of the Z-Layout in Action


Evernote looks complex at first glance, but a closer inspection reveals a z-path ending with the "download" button.

Much simpler, the Daina Reed site delivers a couple quick bits of information, then prompts a "Get in Touch" action.

The path on CodeMonkey starts at the logo and ends on "Get Started".

It's a bit harder to see here because of the duo-chrome palette, but the z-layout creates the general framework.

This example ends with a bright, bold price tag.

Probably one of the clearest uses of the Z-Layout, the Blue Acorn design hits each point along the path.

Campaign Monitor's design mixes up the layout, but the 1, 2, 3, 4 steps are all intact.

Caveats Worth Mentioning

It's important to note that the Z-Layout isn't the only layout paradigm that's out there. Heck, there are about as many layouts as there are letters in the alphabet. The Z-Layout is one of the principle layouts because it's so simple to use as a foundation, but you'll always want to trust your instincts when it's time to make a final layout decision.

...Regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page.

There have been a bunch of interesting studies done on eye-tracking that suggest trying to predict eye-movement across a website is about as erratic as sending 1,000 kids into a candy store. Several studies have also shown that the "F" shaped layout (which we'll be reviewing next in this series) is more effective at controlling a viewer's eye movement across a page. The simple truth is that, regardless of any specific layout design, viewers are more likely to first look at the biggest, brightest, and most highly contrasted elements on a page. Keep this in mind; if your goal is to guide a viewer through the Z-Layout, don't give them any more opportunity to be distracted along the way than they already have.

Where the Z-Layout truly shines is in design projects where simplicity and a call-to-action are the most important principles. Trying to force a Z-Layout on a complicated content structure probably won't work well, but allowing the Z-pattern to form a framework for a very basic site can bring a sense of order that can help increase your conversion rate.

Check out the "F" shaped pattern post!


Oh! Check out a list of stock-templates that use the Z-Layout here.
Related Posts
  • Web Design
    HTML & CSS
    A “Readability First” Approach to Media Queries and LayoutReadability first thumb
    In this article I'll be talking about a methodology that is a mixture of many approaches to Responsive Web Design, with a few extras stirred in. It's both "Content First" and "Device Agnostic", and was originally inspired by the typography focused em based "Goldilocks Approach". I like to think of it as a "Readability First" approach.Read More…
  • Web Design
    Interface
    How to Become a Conversion-Centered DesignerUnbounce
    So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.Read More…
  • Web Design
    Applications and Tools
    The ThemeForest Author’s Guide to Unbounce TemplatesUnbounce preview
    In this tutorial I'm going to introduce you to Unbounce, a tool for building campaign-specific landing pages. We'll walk through the anatomy of various types of landing page, go through the tool’s features, then cover what’s needed to sell your own Unbounce templates on Themeforest.Read More…
  • Design & Illustration
    Illustration
    Cartoon Fundamentals: How to Create Movement and ActionCartoonmovements preview new 400x400b
    What is a cartoon without any kind of action? What is a cartoon, that doesn't tell us a story? You may have seen artistic studies of the human body, drawn from a live model for reference. They work very well for understanding how anatomy and muscles react when we suggest a move. But the sentiment behind this movement is not clear! It's just a reproduction of real life and nothing more. The way to express movement and action in a cartoon style drawing is quite different from real life. Therefore, beyond the necessary knowledge to build your character's body, mastering the techniques needed to add life to these forms is essential. And that's what we'll talk about in this tutorial!Read More…
  • Business
    Planning
    How to Set Goals With No Room For Excuses5 set goals with no excuses
    Business plans are notorious for being bland, uninspiring and filled with business jargon. There's no real reason for them to be this way, other than tradition. For bigger businesses, it can also be what their bank and lawyer requires (those legal and financial types love jargon-ese). But for freelancers, bootstrappers, and microbusinesses, your business plan is written primarily for you. It's about giving you the motivation and energy to get up in the morning and do what it takes to make your business into a success story.Read More…
  • Web Design
    User Experience
    Best Practices for Designing Effective Banner AdsAd effective retina
    If you’ve ever been online — which, if you’re reading this, I assume you have — you’ve probably encountered a banner advertisement or two. These typically come in the form of a prominent image on the page, although the exact size, positioning and content can differ drastically.Read More…