Mario "zHeNNiNo" Ciaffone web designer portfolio

Navigation Menu

The “Z-Layout” in web design

The “Z-Layout” in web design

Posted by on Oct 17, 2012 in blog |

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.

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:

z-layout diagramma

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:

z-layout su 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.

z-layout affinato

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:

  1. Branding
  2. Hierarchy
  3. Structure
  4. 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.

Examples of the Z-Layout in Action





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.




Il mio sito utilizza, come tutti, dei cookie che ci aiutano ad erogare dei servizi e a migliorare l’esperienza di navigazione. Continuando la navigazione l’utente accetta le nostre modalità d’uso dei cookie stessi. More Info | Close