Connect With Us

DesignRush Go to Design Rush

Web Designing Layouts (F & Z) Pattern

By Nikesh Suwal on Apr, 07, 2017

Here in Jyaasa 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.

Eyetracking heatmaps with 3 different examples of the F-pattern for reading web pages

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.




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 This:

Latest Posts

Why we organize all hands Annual Retreat? By Promising Software Engineer on Sep, 17, 2019

Career Conclave 2019 By Promising Software Engineer on Jul, 30, 2019

Ruby Workshop at Jyaasa By Promising Software Engineer on Jul, 30, 2019

Bootcamp @ Jyaasa By Promising Software Engineer on Jul, 30, 2019

Integrating Afterpay Payment in a Rails Project By Umesh P Kafle on Sep, 07, 2018