Web Design Basics: Eye Flow in Web Design

Everyone wants a website “that looks good” but very seldom do we pay attention to where our eyes are looking. This seems absurd. You can’t view a website if you can’t see, so therefore you can say with 99% certainty that the people visiting your website will be using their eyes. If this is the case then why do we put such a large focus on making sure our brains interpret the web design as “pretty”, and almost always forget about how your visitors are going to be scanning your website content. Good web design happens when you pay attention to eye flow.



Left to Right

If you’re reading this, you probably speak English and read left to right. How do we know this? Because we speak english and read left to right, and therefore we have targeted clients who do the same.
When presented with a piece of paper, or screen, your eyes have been trained to quickly scan from left to right, before finding a focal point to stop at. When visiting a website, you behave in the same exact way without even thinking about it.

It’s important that websites are designed with this in mind. Naturally, because we read and write in this way, we often design similarly. However, when we pay special attention to this, we can make small changes to our website layouts that result in large increases in conversion rates.

This is typically referred to as a “Z pattern” due to the way our eyes scan the screen in a “Z” like sequence.

Slide the image below to see exactly what we mean

[twenty20 img1=”2886″ img2=”2887″ width=”100%” offset=”0.5″ before=”Typical Website Layout” after=”Website Layout With Eyeflow Guide”]


Top to Bottom

Just like how we read from left to right, we also scan a page from top to bottom.
When presented with a piece of paper, it is highly unlikely that you immediately look at the center of the page. So why do we often design website with to focus being smack bang in the middle?

There are some standard items we need to make sure we keep in order, such as navigation menus need to remain near the top of the page, but doesn’t it make more sense to place content of high importance closer to the top than at the bottom?

Being aware of your visitors eye flow can allow you to position important information in the right place.

For Example:
Placing an email subscribe form on the top right hand corner of your homepage is probably not the best idea, as we scan almost diagonally, so this part of your page is very seldom looked at. However, placing the same form around ¾ the way down the top viewable area (above the fold) and off the the left hand side is a much better idea.
[twenty20 img1=”2891″ img2=”2892″ width=”100%” offset=”0.5″ before=””Above the fold” website layout showing where we moved the sign up from” after=””Z” eye flow diagram to show why this new placement is much better”]


This example is actually a real life scenario where we were able to increase a client’s conversion rates by 700% simply by changing the location of their sign up form.



As well as the “Z-pattern” that we typically use to scan everything, another way to layout a website is to use the F-pattern. The name pretty much tells you exactly what this is, but it’s when we scan pages in the shape of an F..

Designers use this layout to amplify the probability of the website visitor easily finding important content.
this style is most typically used on websites that have more content, as it allows designers to easily magnify important content and bring it to the attention of the visitor[twenty20 img1=”2889″ img2=”2890″ width=”100%” offset=”0.5″ before=”Basic Website Layout with F-Pattern Design” after=”F-Pattern Eyeflow guide”]

If you have any comments or questions, leave it below and we will make sure to respond.

Interested in finding out more, but not ready to commit yet?

Just add your details below and we can get to know each other
No hard-sell guarantee

Explore Vision Digital

Who We Are_


Be Social_

On YouTube
Coming 2021


Better Websites Podcast
Coming 2021

YouTube Tutorials
Coming 2021

Coming 2021

We would love to hear from you, so click the button below to get in touch