Best Layout For Top Performing Landing Pages
top of page

Best Layout For Top Performing Landing Pages



Today I want to talk about something that is very important which is the basic layout and design of your landing page.


You don’t have to worry about this too much.  There are so many fantastic Software out there with proven templates that you can use. 


F-Pattern

The second thing you should understand are the viewing patterns of visitors online. There is something called the F-pattern which is a description of how website visitors will view your page. You can see from the image below, the heat maps show where the viewers eyes are going while viewing your page.


You will see that users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the “F’s” top bar.


Next the users usually move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. this additional element forms the “F’s” lower bar.


Lastly, you see that the users scan the contents left side in a vertical movement. this last element forms the “F’s” stem.


So understanding all of this we will know where to place certain important elements on our landing pages.


Z-Pattern

Now there is another pattern call the Z-pattern. While the F-layout tends to be more appropriate for pages dense with content, the Z layout is primarily meant for pages with minimal copy.

The Z-Pattern is better suited for pages where simplicity is a priority and the main takeaway is the Call to Action (CTA).



Top Fold

If you have been in marketing for a certain amount of time you have probably heard of “The Myth of the Top Fold.”

The term Fold actually comes from the print industry and it is an outdated and old term that is a false belief that some online marketers still believe and hold on to. The fold is the area of a web page that is immediately visible upon landing on a page without scrolling. Because some marketers still use this style it can create a very messy, cluttered look on there page as you can see with the example below.

When designing your landing page, the best style to use if you want a lot of info would be the F-Pattern. But if your page is more simplistic then using the Z pattern would be the better option for you.


And don’t forget “The Myth of the Top Fold” when designing your pages.


bottom of page