The 3 Most Important Page Layouts (And When to Use Them)

Designing effective page layouts is important for higher reader engagement and conversions, but most people don’t understand how or when to use the right type of layout for their content.

By learning about a few different patterns that readers on the web follow, you can create layouts that fit these patterns, so they are more likely to be read and acted upon.

In this article we will take a look at studies performed by user experience experts to determine how reader patterns work together with the most common types of web pages to create effective page layouts.

What Constitutes a Page Layout?

Quite simply, page layout is the order and sizing of elements on a webpage.

While you can apply all of these techniques to the headers, footers and sidebars, in this article we’re going to focus on the text, media, and clickable actions unique to the page(s) you are creating.

Each of the following sections focuses on a typical ‘type’ of web content, then explains how to layout that content to create an effective user experience.

Layout 1: The Gutenburg Diagram for Plain Text Pages

Before graduating to more complex layouts, it’s good to start with the basic concept of the Gutenburg Diagram.

If you’re working on a page that must consist of plain text columns (for example: long-winded documentation, reports, or privacy statements), this layout is for you. It is one of the least addressed layouts, but does call for your consideration.

The main idea is that attention begins strong in the upper left hand corner, and is drawn down to a final stopping point in the lower right hand corner.

You can visualize this as follows:

You won’t usually find yourself working on pages like this, but understanding how this theory applies will improve your ability to write better content and design more complex layouts.

For more technical details, check out Universal Principles of Design and The Gutenburg Diagram in Design.

How to Apply the Gutenburg Diagram

Using the Gutenburg Diagram is simple – you must write your content appropriately.

Truly plain text pages without any headings are rare, but if you find yourself designing one, above are the strategies you should use. When possible, we recommend using headers and tying your content into Layout 3 below.

Regardless, the design theory that the reader’s eye naturally travels from top left and looks for an action point on the bottom right goes far beyond plain text, as you’re about to see with the following layouts.

Layout 2: Z Pattern for Content Groups With a Variety of Media

Let’s say you’re building a homepage, or perhaps a landing page for your most recent product. These types of pages usually have lots of big images, videos, and strong typography, while leaving out large bodies of smaller text.

In these situations, create your design using the Z pattern.

The Z pattern is an extension of the Gutenburg Diagram and how it applies to readers scanning a web page when you’re offering more than plain text.

You can see how similar the concept is:

Essentially, since there is more to take in on the page, the reader has a tendency to do a full scan in a Z shape pattern before finally reaching the lower right corner. It fits right on top of the Gutenburg Diagram, with the strongest points being the top left and lower right corners.

Here’s how it comes together in practical terms:

For an example, check out how we’ve employed this tactic in our own home page.

You can manipulate the Z pattern by creating an alternative visual hierarchy with strong graphics, though this is not recommended as it can create user experience friction.

If you’re really into design theory and want to learn more, we recommend reading How the Human Eye Reads a Website and Understanding the Z Layout in Web Design.

How to Implement the Z Pattern

Implementing the Z pattern is a little more complicated than writing your content in a certain way. You’ll want to plan out your content’s layout before trying to build it on your website.

This is called wire framing, and it’s a lot easier than you think! We recommend sketching out your ideas first. Here are a few resources to get you started:

Once you’ve sketched out an effective layout, it’s time to implement it on your website, which is incredibly easy to do with Avada’s Page Builder. You can go from concept to a completed page in minutes!

Layout 3: F Pattern for Text-Heavy Pages With a Strong Hierarchy

Your most typical scenario for the F pattern will be blog posts and articles.

A strong hierarchy is created for the F pattern when you use headings to split up the page. This is compared to Layout 1, which relates to lots of text without many headings.

Due to the nature of the content (lots of text), the reader’s attention is a little bit different here. You can see how it changes with the following graphic:

Even noting the differences, this pattern still borrows from some of the ideas in the Gutenburg Diagram. Particularly, that readers will always begin in the upper left hand corner of the page.

A few of the overarching principles to keep in mind:

The F pattern benefits greatly by adding imagery into the page. Images throughout the page help maintain attention by moving the eye through the page, much like using large and bolded text headings.

It’s easiest to understand how the F pattern works by using a hypothetical heat map. Red is where the user is likely to pay attention to, while purple is where readers will spend the least amount of time as they scan through the page.

For further education, read Understanding the F Layout in Web Design.

How to Implement the F Pattern

You can see from the example above that headings build a structure for the reader to scan through.

Use effective headings to build a virtual outline to help the reader take in the most important ideas within your content. Once a reader knows that your content has what they are looking for, they’re much more likely to slow down and pay attention.

If you need another example, try skimming through this article reading only the headings! We use this principle with every blog post we write.

Not sure how to create outlines? Here’s a quick resource to get you started.

Conclusion

Building an effective page layout depends on what kind of content you are dealing with, and most people do not know how to recognize the reader patterns on which to build page layouts.

By understanding the type of content you are working with, and how to pair it with common reader patterns, you can intentionally direct attention to the most important elements on your page by using the principles for each pattern.

How will you use this information to create more effective layouts for your website? Were you already aware of any of these techniques? We’d love to hear about your experiments with page layouts in the comments section below!

The post The 3 Most Important Page Layouts (And When to Use Them) appeared first on Theme Fusion.