Website layout – Why you should use a Z Shaped Pattern

How many people read every word on a website page? Most of the time, no one. People scan pages they don’t read. They will stop when something resonates with them.

This is why the Z pattern works when creating your website layout. Drawing the eye to the most important content. Call to actions, sign-up forms, features and the more important benefits of using your services and products.

In this blog I will explain the benefits of using the Z shape website layout and why it is works for every website.


How the Z website layout pattern works

As you already realise the z pattern follow the shape of the letter Z. It follows the way we read when scanning a website page. Left to right, top to bottom.

  1. We start at the top left and across to the right horizontally.
  2. Then down to the left-hand size, diagonally
  3. Finally, back across horizontally to the right


Z layout
Image credit: Tutplus


Keeping this in mind you can use it to your advantage, placing the important bits to get the reader’s attention.


Blogs and text heavy pages

Text heavy pages such as blogs and articles are different matter. The F pattern is a better solution (I will post about this at a latter date). The Z pattern is used for pages with minimal copy pushing a call to action.

Using this layout, you can put your main message in front of the user to encourage to take the action you need them to take such a signing up to a mailing list, joining your website, clicking through to an important article or contacting you.


Facebook z Website layout
Facebook landing page is a great example of  Z Layou


Simplicity is key, take a look at the Facebook sign up page, directing the user to the all-important call to action. Signing up.

How you should use the Z shape website layout

The first thing you should do before designing your website page layout is to answer a few questions:

  1. What is the most important information you want the visitor to see first?
  2. In what order do they need to see next element?
  3. The actions you want the user to do on the page?


TIP: Place a letter Z on a piece of paper and map out the elements.

Place the most important information at the top and the second most important next and so on. You should be creating a flow for the user. Placing the information in the users scanning path, presenting the correct information in the right order.


Make it simple for the user’s eye

1: The start of the user journey. A good place for your logo!

2: The information you want the user to view first, 9 time out of 10 this will be your navigation. You can place a secondary call to action at the end if needed. (I use this for my contact button).

3: The canter of the area. The hero image keep the users interest but does not distract them from scanning the rest of your area.

4: Promoting your offer. Offer the benefits of why they should take action, convince the user of why they should hit the ‘sign up now’ or similar call to action.

5: Take action. The final piece of the puzzle the ‘Submit’, ‘Buy Now” of “Sign up” call to action. Make sure your CTA (call to action) is clear and stands out.

Read my simple guide to The Anatomy of a Call to Action.


The Z pattern is also perfect for landing pages, but don’t forget to remove the navigation. A landing page should have no distractions other than the key message


Suggested Z-layout

Below you can see two great examples of Z layouts

H bloom Website layout
Image via Prettylinks


Website layout for iZettle


Website layout Zig-Zag Patterns continued

The great thing about the Z pattern is that we can extend this to creating a number of zig zag patterns for maximum effect.

Dropbox uses this perfectly by directing viewers through their features and ending with a “sign up now” call to action”. Learn more is added to become a secondary call to action, giving the user the option to find out more information on the service before signing up.

Website layout


Z-layout is the perfect solution to guide users to the content or action you need them to take, and the reason why so many websites adopt it.

I am a web designer, graphic design and digital marketeer helping SME’s, Micro businesses and new business start ups with their on-line marketing.

If you found this useful, why not download my FREE Local SEO guide below.

Leave a comment

Pin It on Pinterest