Blog

2 Design Layouts To Consider for Your Website

Coming up with the right colors, images, and content for your website can be difficult. Once you've got that covered, you still have to decide the best way to lay all the information out on your website. There are endless choices for your website layout, but I recommended two commonly used choices: the f-pattern or the z-pattern.

F-Pattern Layout

Jacob Nielsen conducted an eye-tracking study to record how 232 users looked at thousands of web pages. This study found that the eye starts in the top left, moves horizontally to the top right and then comes back to the left edge before making another horizontal scan to the right. This second scan won’t extend as far as the first one. Any additional scans won't extend as far as the previous scan, and for the most part the eye stays close to the left side of your page.

Reader tracking diagram

The f-pattern study suggests that:

  • People don't read your web content. They scan through it.
  • The most important information on your website should be placed across the top of the design
  • Any lesser information should be placed in a list form across the left edge

The f-pattern is good for text heavy websites. Your content should guide the eyes down the page on the left edge. If someone finds the content they are scanning through interesting, they will read through the whole page so don't place all your content in the F.

Z-Pattern Layout

The Z-pattern, sometimes referred to as the reverse S pattern, is a great pattern to cover all the bases. Viewers start in the top left, move horizontally to the top right and then diagonally to the bottom right before finishing with another horizontal movement to the bottom right.

Z pattern diagram

The z-pattern suggests that:

  • People don't read your web content. They scan through it
  • You should place a strong call to action at the bottom of your page
  • Information to support your call of action should be included along the Z pattern in a logical order to back up the call to action

It's important to keep in mind that both of these patterns focus on where people's eyes naturally go. If you want to lay your content out in a different patter that is fine as long as you use a hierarchical design to guide viewers along the path you would like them to go.

Post author
Kimberly Portuondo
January 27, 2015
min read
Category:
Share this article
Explore

Related Posts

What You Need to Know About Google's Mobile-First Indexing

What You Need to Know About Google's Mobile-First Indexing

Google crawls and indexes your website based on the experience, quality, and content on your website. The index prioritizes websites based on the experience and if it is related to the query.

Kimberly Portuondo
|
April 10, 2018
READ MORE
5 Must Haves for Your Website

5 Must Haves for Your Website

A website is an essential aspect of a successful business because іt helps establish credibility and build your brand’s reputation The longer you avoid creating a professional presence online, the less likely you are to reach your audience. If you aren't already familiar with web design you can start small and build over time. No one knows everything at the beginning. The best advice we can give is to set yourself uр by listening to feedback from customers and make adjustments accordingly. Alternatively there’s always the option of hiring a professional web developer to fill in the gaps for you. In the meantime, if you do have a website for your business it MUST include at least these 5 things

Kimberly Portuondo
|
April 3, 2018
READ MORE
Focusing on the User Experience

Focusing on the User Experience

You might always have your users at the forefront of your mind, but that doesn't necessarily equate to a streamlined user experience. Here's some quick tips on what to consider to make sure your users get the best experience when interacting with your brand.

Kimberly Portuondo
|
August 22, 2017
READ MORE