Web Designing Layouts (F & Z) Pattern

by Nikesh 

Web Designing Layouts (F & Z) Pattern

Here in Gurzu we believe that web design should focus on how the information is read and scanned on the screen by people. Visual hierarchy, F-pattern and Z-pattern are most important principles behind our effective web design that many people have adored.

Visual Hierarchy

A hierarchy is essentially an order of items, goals, ideas, and/or needs. Hierarchy in web design mainly about focusing a user to understand and embrace the principal goals of a website and interact with the material in the ideal order to facilitate a smooth and pleasant experience with the website.

Visual Hierarchy = Information Prioritization

How we make sense of what we see

Firstly, let’s understand what is visual communication 

  • We recognize similarities and differences. 
  • We look for patterns.
  • We create relationships between the things we see. 

How do we establish hierarchy in layout design? 

  • F pattern
  • Z pattern


F-pattern is one of the most common eye-scanning patterns when we talk about the block of contents. It follows the shape of the letter ‘F’ as it refers to the user first scanning a horizontal line across the top of the screen i.e. Left to right.

General behavior pattern:

  • Start in the upper left corner.
  • Read/scan the first (head)line of the text.
  • Scan down the left side of the column until you find something interesting.
  • Read the interesting thing more carefully.
  • Continue scanning down.

Heatmaps from user eye tracking studies of three websites. The areas where users looked the most are colored red; the yellow areas indicate fewer views, followed by the least-viewed blue areas. Gray areas didn’t attract any fixations.

Why F-Pattern Works

F-Pattern works as it allows readers to scan naturally! This layout is natural & feels it comfortable as we do prefer the reading top to bottom & left to right. There is a myriad website in the realm of web application development that are using this pattern. Most of the advertisements rely heavily on F-layout as it drives user-engagement in more natural & comfortable manner.


\ https://web.archive.org/web/20200629202115im_/http:/jyaasa.com/uploads/ckeditor/pictures/39/content_reddit.png.webp


The Z layout is a design understanding that attempts to get ahead of the user, abstracting any distraction and presenting encouraged action as quickly as possible.\ It tackles the 4 of the big principles of an effective design for branding, call-to-action, structure and hierarchy.

Brand or Logo Recognition

  • Relevant Links Related to the Page, Company or Product.
  • Information gathering – What is the immediate benefit of this product or service?
  • Action – Allow for the visitor to take immediate action related to the product being shown.

Why Z-Pattern Works

However, Z-pattern does not need to any final words. Since, it controls four major reasons for effective web designs as in:

  • Hierarchy
  • Branding
  • A call-to-action
  • Structure

The pattern actually works as in the readers scan the same way as they scan the book i.e. Top to bottom & left to right. The pattern urges simple foundation as in you can add multiple call-to-actions, compress and extend the height of the pattern and whatever you would like that makes sense.





Share Article

Latest Posts

Getting Started With MERN Stack (Part III) 
By Prakash

Getting Started With MERN Stack (Part II) 
By Prakash

Getting Started With MERN Stack (Part I) 
By Prakash

3 Best Practices Every React Developer Should Follow 
By Prakash

Responsive Design - What It Is And How It Works? 
By Stuti