The F & Z Layouts in Web Design

Posted January 1, 2013 in Design, Web Development


understanding-the-f-layout-in-web-designunderstanding-the-z-layout-in-web-design

On the F layout:

The F-Layout relies upon various eyetracking studies for it’s foundational concept. These scientific studies show that web surfers read the screen in an “F” pattern – seeing the top, upper left corner and left sides of the screen most… only occasionally taking glances towards the right side of the screen. These eyetracking studies argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design.

On 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.

Another viewpoint from Vanseo Design:
3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern

Visit Link

Comments

What do you think? Do you have any questions, thoughts, or related links to share? Did I make a mistake in my post?

Submit a Comment