Connect With Us

Web Designing Layouts (F & Z) Pattern

By Nikesh Suwal on Apr, 10, 2017 in web-design-layout-pattern, design, f-patter, z-pattern

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:


Add a new comment

Latest Posts

Getting started with React Native: Core Architecture of React Native By Aman Maharjan on Dec, 15, 2017

First Step to Software Development: Design Thinking Process By Rasna Shakya on Nov, 03, 2017

Bourbon By Rasna Shakya on Oct, 20, 2017

Design Sprint By Neha Suwal on Aug, 14, 2017

3 years of helping startups and entrepreneurs with technology By Neha Suwal on Aug, 04, 2017