Understanding the Z-Layout in Web Design
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Brandon Jones
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
The Z-Layout is pretty well known in design for a long time now. But aren’t there studies showing that, in the web, the F-Layout is a more appropriate option?
Yep, and we’re actually going to be discussing the F layout in the next article in this series :)
thanks for the article.I have seen the ‘Z’ concept..for the first time I heard about ‘F’….:D
Luis – Was just about to ask that.
Brandon – Awesome. :)
I can’t agree with this article, the “Z” layout assumes that the web is a linear media such as books and magazines, but in fact the web is quite different and most of the patterns of old medias just don’t apply here. Sad but true.
Eye tracking researches do show that users are more likely to scan webpages using an “F” shaped pattern (actually that means that they stick to the left of the page) and using the “Z” layout technique can only make it more difficult to find what you want them to find. That does not mean that they will not find that big shiny button on the right, but it will probably take more time since on the web the eye of the user is not automatically led to the right-bottom as in print (talking about ocidental users of course).
The web inherits professionals and consequently knowledgment from older medias, but we must understand that some (or most) of this knowledge just don’t apply on the web.
Replies are welcome, I’m open to some discussion.
Hi Emanuel – I’ll agree with you on the main points :) Just remember that this is the first in a series of articles where we’ll be cataloging the various layout paradigms. The F shaped pattern that you brought up is actually next on our series. To put this in context, I actually just added a quick comment in the intro about the “series” nature of this post. Thanks for the great comments!
Users follow F shape if the page they see follows F-layout. However, it can be anticipated that for Z-layout the eye tracking results will be different.
I’m sorry if that sounds wrong, but I dare anyone here to show a trustworthy eyetracking research that shows a natural (not against the natural flow) “Z” shapped reading pattern in the web, so it can be analysed against the well known “F” shapped pattern test results.
This discussion is a dead end if we only point out unempirical opinions.
Good point Emanuel, I’ll try to fit in a “scientific analysis of eyeflow” article towards the end of this series of posts. I think it’s a great idea to include empirical
opinions(hey, that’s an oxymoron!) data as part of this survey series.That would be great Brandon! Even if in the worst case scenario it prove me wrong, science that is the right path to follow.
I will be waiting for the next articles.
That’s just silly. It might be helpful for discussion if you would give some support for the idea that traditional visual design principles don’t apply on the web, as you seem to have just stated it as a matter of fact. I suspect you’ll have a hard time though.
One of the most important aspects of visual design is guiding the viewer’s eyes. Using weight, value, line, and color a skilled designer can give a heavy bias to the path the visitor’s eyes are going to follow. To say this can’t be done in web design because it is a new medium is like saying it can’t be done in a computer-generated artwork because it’s not oil-painting. Yes, there is a new dynamic from interactivity, but interactivity doesn’t void all concept of visual design. If it did, it would be true that all we designers do is make things pretty. We would be doing nothing more than hanging little bits on the almighty ‘F’ pattern. That’s preposterous to anyone who has studied traditional art and design.
Brandon, Great article. I’ve heard of the Z pattern before but I’ve never seen it overlayed to previous designs that image is very powerful… Are there any other design path layouts commonly used that you can write future posts about?
Thanks,
Siz
Hi Eric – Yes, there are actually quite a few design-path layouts that we’ll be reviewing later on in this series of posts, so check back in the weeks to come for more studies like this. Thanks for the comments!
Hey great article! Can’t wait to see the ampersand layout.
Another excellent post. Would love to see other layouts examined.
Thanks Bobby – we’ll absolutely have more of these types of articles in the future :)
Simple ideas that makes the difference. It’s all that we need. Nice tut, tanks!
I have seen this post before, and i think on your own website?
Yep – I had posted a very rough version of this article about 6 months ago while we were prepping the seed content – the old one was pulled, rewritten from the ground up, and posted here for the launch month as the first in the new series of “layout” walkthroughs. Thanks for the comment Mark!
Ah, well still a good article ;)
Thanks Mark! Glad you liked it.
Really liked this post!
Looking forward to seeing the F-Layout.
Excellent! I am sort of new to web design so this was very helpful. I cannot wait to see what else is in store with this series :)
Nice one, i`m really enjoying the articles!
Awesome article, can’t wait for more articles in the series.
Just one question, where is the Z in Code Monkey and Campaign Monitor. I see it in Campaign Monitor if the 4th step is the features image, 5th point is the call to action buttons. Looks more like F to me :)
Or E, i’m not a designer btw :)
The thing with “Z” layout is that you can see it in every single page ( if you want ) that’s like a numerology where people to tend get some exact sum out of anything.
The only thing i would recommend for people just use your common sense on how people read and see things, certantly the biggest truth here is that most of people read left-to-right and that you should keep in mind.
Yeah it’s what i was thinking about
Z design is logical. You don’t wan’t that the name of your website (of your brand) appears on the bottom of the page. Just because people have to know where they are without scrolling along the page.
And you can’t start your website with “Join ! Send $ !” without tell anything before ^^
in fact… you can
but i don’t think it’s a very good idea :P
I’m waiting for the F design
IMO we should discuss poorly-optimized/-structured javascript/AJAX elements, pop-unders, etc as examples of the FU design pattern, as I often feel that’s what the site owners are saying to me when I see these
*grin*
LOL – Funny that you mention it, but I’ve been considering an article that outlines some of the *ahem* “less than desirable” design habits that we see out there. I probably won’t include it in this particular series, but you can definitely look forward to a “stomp on bad design practices” article sometime in the future :) Thanks for the comments Ben!
Wow, webdesigntuts is quickly becoming my favorite Envato channel, great stuff!
I’ve never really taken the time to learn about these layouts, and I look forward to whatever other styles of layouts exist for the web. There are so many ways to start a layout, my personal favorite is just creating a loose wireframe on paper where I can shift elements and decide where I want them, and more importantly, why. ;)
Another great article! , Looking forward for the F layout
Is there such a thing as an “L” shaped site?
So a big simple header and details down bottom?
What other letters are there?!
I actually studied for three years and web and interactive media was the most prominent subject. The thing is our lecturers never even mentioned the Z or F layout, so this is COMPLETELY new to me, not to mention awesome.
Thanks for filling in the blanks Brandon, great methods I’ll definitely use from now on!
…that’s why I flippin love all the Tuts+ sites. Better than any college !!!
Very nice article!I found it very helpful!Thank you for the post!
Great article.. thanks.. for sharing..!
I think that’s pseudo-scientific. Though it looks nice, when you actually follow the human eye scan the very page you’ve presented in this tutorial you will see that the first thing scanned by most people’s eyes will be the exaggeratedly big image, then either the branding or the almost annoyingly intrusive ‘call to action’ (assuming that it is as big and ridicusouly colorful as the image, which it obviously is). The menu buttons are most likely to be spotted last of all the elements on the whole page (if they aren’t ‘overstyled’ too that is).
I think the only reason for the z-layout to work is the fact the a good designer can even make non-effective layout look good. Your description does not convince me, neither do I believe that this kind of design is effective just because of an assumed z-scanning-motion of the eye that will most likely not occur.
Furthermore I don’t think more than maybe 5% of the potential viewers will scan this or most so-called z-layouts in a way that one could call a z-motion, rather than a zig-zag motion. A good understanding of size and color, the most valuable contrasting methods, will help more than such pseudo-scientific nonsense.
I agree with you on fact, that most iportant are colour contrast and white space. Properly used will guide the user from point to point to experience the journey that was designed for him.
But also all the cultures based on latin alphabet are used to reading from top left to bottom right. It is a natural movement that is good to use to your advantage. All the Z, F, or E movement do nothing else but follow that simple fact.
Its good to know about this, but obviously it doasnt mean you can forget about the proper use of colour, shape or white space.
Good article btw. Im starting to get angry you guys start publishing all the stuff that took me ages to find out, learn and understand. :)
Good article, so easy to learn and read ;)
Yeah! Great Article!
I’ve read your previous article on this ‘Z’ layout somewhere else but i’m not sure where!
That was really helpful!
But I must say, this was is not much different than the previous (including the examples; in-fact those examples reminded & confirmed me that I’ve read this article before) & I was expecting a little bit more from this one!! (you know, tuts+ network is my best & I expect more)
Hope we’ll get the best of the ‘F’ layout in your next series!!
Thanks! :)
actually.. I never consider such things when designing a website until now I found this amazing post!
thanks..
Wow, everything makes so much more sense now! Should be able to improve a few of my sites with this idea. A problem I keep having is the top end of the site is great and it just gets more and more average as we go down the page.
looks like webdesign tuts.. is starting to lead the pack… ^_^
all your tutos here are amazing…priceless… i think even my professor in college doesn’t know any of this stuff..
Thank you so much!
Actually I´ve been using this layout for years, but never realized that it was an actual “Z”
Nice article and it´s a winning layout for small business or on-line services.
Great work Brandon! This article was very interesting, I’m new into the world of web sites design. The Z concept was something I’ve got to understand in a way by nature, by instinct, but for real, I did not thought of it, or plan it. I will take it into consideration for my next project, I think simple designs that can create a path for the reader are the best type of websites, so this article right here was of great help and inspiration for me =) Thanks a lot
Glad to hear you liked it Lucas – keep an eye out for the next posts in this series, as they will relate directly to this one :)
I got a question about Campaign Monitor design.
on Z3 (Try it for free) and Z4(View Features), which one would be more important to come first? Z3 or Z4?
There are too many variables in design for one type of layout to work better than another. The hierarchy of what people look at first will be entirely thrown off if you have lifestyle photography on your page. People will always concentrate their vision on a person’s face before anything else on the page. Do some research using heat maps.
If you enjoyed this article, you may find this one helpful as well. It goes into the C pattern and a few other’s. Anatomy of an Interface: http://www.resolutionim.com/anatomy
Interesting read, visual overlay made it more understandable
read “F Shaped” layout article on 2009
http://www.fuelyourinterface.com/how-to-use-the-f-pattern-correctly/
but i can see why you started with Z-Shapped rather than F, not all design situations fit F-layout
some times i feel that how nice this world is when we share our knowledge, we have to make it even nicer
looking forward to next articles (with some scientific evidence)
As a first year student studying web system designs ‘hallam uni’ I am looking forward to the F design post. The picture is clear to see that the Z system works and is a solid way of creating easy on the eye sites. The natural flow of the page is clear and easy to read, like the posts you are putting on the site and look forward to the future of webdesigntuts.
It would be interesting to see if people subconsciously recognize a particular layout pattern and then adjust how they scan the page.
Great Article, waiting for the other articles of this series. Thanks brandon
When will the Q Layout be discussed?
Glad to see Web Design added to the Tuts websites. What other series besides layouts can we look forward to? I am anxiously awaiting the F layout post, as it will be new to me. Also, I would be interested to see links discussing any scientific analysis of these layouts(I am a sucker so serious backup).
interesting article thanks for it
Greate article! I’ll try this Z layout. Thanks.
Me encantan la estructura de este tipo de paginas, pero por los ejemplos que vi, creo que la “Z” funciona mucho mejor en paginas web pequeñas o de pequeñas empresas…. Re piolas!!!!!!!!!! voy a hechar un vistazo a la “F”
You know that you have a dead link that links to this page. If you clock on “Great Design Hurts: Striving for Pixel Perfection” you’ll end up here
One month later the link is still dead. What gives?
Nice post, pretty interesting read. I might give this layout a shot and see how it goes, I like how clean it can turn out too.
Wow my site is laid out like this without even thinking about it!! I enjoyed reading about the technicalities of it all :)
hmmm. now i understandt between F design and Z design. Really education
In the middle east I will… use the reverse Z pattern then… and in The east-East I’ll use the upside down pattern… and what if we just create our own pattern through forceful use of very bright colours ;) but all kidding aside though, all depends on the project you are working on, an internel knowledge base website is totally different from an online portfolio or webshop
very informative. I took web layout for granted until i took a crack at it myself. Soo, much to learn still ;(
Not sure I agree with this, wouldnt the visual tendencies be based entirely due to the navigational aspects that are relative to the site?
The f-layout article is gone. Please help.
It’s been rescheduled (you spotted it was missing during a very small down-time period – well done!) Anyway, check again now, it should all be fine once more :)
This is something I didn’t know about layout. I suppose it’s often used in promotion for a product however the F layout is popular with content based sites such as blogs and articles.
Nice tut! :)
great article ..