Episode #13: 10 Web Page Layout Designs (How to Choose the Best Design For Your Business)

Building a web page layout is the first step in designing your website and will serve as the foundation for the entire design.

It will determine how your content is communicated, received, and how well it will impact, and influence the visitor.

The visual hierarchy and flow of every page must be an easy to understand and intuitive experience for the viewer.

A web page layout is how visual elements are arranged and ordered on the page to enhance the message, and help the audience navigate.

It’s this sequence of events, and strategic placements, that will draw the most attention, create an enjoyable experience, direct the visitor towards the most important content, and lead them to a call to action.

A great web page layout will keep the visitor on the web site longer because it makes valuable information accessible and easy to find.

However, a bad web page layout will frustrate the visitor.

If they are unable to easily find the information they are searching for, they will quickly leave your website and most likely never return.

Users won’t give you more than a few seconds of their time, so be sure to put in the time and effort required to properly lay out each of your web pages.

When choosing a layout for your web pages, there are a few things to consider in order to create the best user experience.

The first is to make sure the layout supports your brand strategy, most importantly, your visual identity and brand personality.

Think about who your audience is, and how they would like to experience your web pages.

For example, is your brand style elegant and refined, or is it fun and animated?

Should you take advantage of lot’s of white space and be free form, or should your layout be structured into a well defined grid?

Next, think about the content that will be on your webpages.

Perhaps you have a lot of text that needs to be included.

In that case, maybe you should choose a layout that breaks up sections of text with supporting images.

If your website is an ecommerce store, the best solution for you may be to choose a column and row layout, so all your products are easily viewable.

Or maybe your business holds a lot of events, or you have recent news content that needs to be constantly updated.

In that case the best solution for you may be a magazine style layout.

Whichever type of layout you choose, it’s important that it is non-restrictive, and allows for a certain amount of creativity …. but now too much.

Your website should always be an enjoyable visual experience, easy to navigate, and intuitive.

To help you choose the best structure for your website, here are 10 of the most effective and commonly used web page layouts.

Web Page Layout option number 1 is a Z Pattern Layout.

This layout pattern is based on a sequence of visual events that take place from the viewer’s perspective.

When we launch a web page in our browser, the first thing we do is quickly glance it over, to get an overview of the landscape and the content.

Our eyes move from the top left corner to the top right corner, then down to the bottom left, and finally over to the right again.

The Z-pattern layout takes advantage of this scanning habit by distributing the important information across these visual points of contact.

The company logo will typically appear first in the upper left corner, then a navigation menu and an obvious call-to-action button across the horizontal axis to the upper right corner.

Then as the viewers eyes travel diagonally left and down the page is where you should place important, attention grabbing information.

For example, exciting visuals, bold headlines, a compelling message, or anything that introduces, describes, and welcomes the viewer to what the website is about.

Finally, as the viewer’s eyes travel horizontally back across the page to the right, you should include a culmination of everything that the design has been leading up to so far.

Whether that’s buying a product, purchasing a membership, downloading a document, booking a service, or any other final call-to-action.

Z pattern web page layouts are great for businesses that require minimal amounts of text copy and have a specific purpose or conversion goal to offer.

Web Page Layout option number 2 is an F Pattern Layout.

Similar to the Z pattern layout, this layout design is also based on a visitor’s visual page scanning behavior.

The F patterns layout is typically used for web pages that include a lot of text, because it mimics how a person would read sentences and paragraphs.

The upper left is the initial focal point and would typically include the most important element, for example a headline, subtitle, or a featured image.

This viewer will spend the most time analyzing this horizontal line across the top of the page.

They will then scan vertically down the left side of the page, occasionally scanning back to the right to collect additional information that could be highlighted in a compelling way by using additional subtitles, bullet points, icons, or imagery.

F Pattern web page layouts are great for text heavy web pages like blog posts or lengthy product descriptions.

Web Page Layout option number 3 is a Full Screen Image Layout.

This type of layout introduces the viewer with a large full browser width photo, graphic, illustration, or video at the top of the page.

Typically this large graphic is overlaid with a brief, but bold headline, subtitle, and a call to action.

This large visual results in creating an immersive, eye catching, and impactful experience, while communicating the brand’s message.

If you choose this type of layout, be sure the large graphic is high quality, and the heading properly represents your brand’s personality, your purpose, and will generate a positive response from your target demographic.

And because of the initial impactful statement this layout presents, it also works well on mobile.

Full Screen Image web page layouts are great for service businesses like restaurants, wellness companies, or businesses that have a few niche products that they want to boldly display.

Web Page Layout option number 4 is a Split Screen Layout.

This layout option takes the top section of the web page and splits it vertically down the center to create 2 equal sections on the left and right.

A split screen layout allows the designer to place equal emphasis on both sections, and create distinction between 2 different elements.

For example, a clothing website that wants to promote both Mens and Womans clothing lines, without one overpowering the other.

The split screen option is also popular to divide a video or image on one side, and then text content on the other side.

For example, the designer can place a video on the left side and then a heading and text on the right side, further supporting the video with a call to action.

Split screen web page layouts are great for businesses that want to separate significantly different types of content, or businesses that want to evenly combine both visual and text content.

Web Page Layout option number 5 is an Asymmetrical Layout.

This layout is very similar to the split screen layout, however more emphasis is placed on either the left or right side.

Designers can really get creative with this layout and create visual tension through non-uniform distribution of scale, color, and width across the page.

Split screen pages look more dynamic, and can direct the visitors’ focus towards specific elements.

High contrast imagery, or big bold blocks of color, paired with light and airy text can make an extremely impactful statement.

Asymmetrical web page layouts are great for modern and contemporary brands who are interested in presenting an innovative style.

Web Page Layout option number 6 is a Single Column Layout.

This is a simple layout style that displays all the content in a single, centered vertical column down the page.

The content may be divided into additional columns within the parent column to add emphasis or to separate sections, but the main centered column remains consistent.

A single column layout can be used for text heavy web pages, but if you do, try to break it up occasionally using images, headers, or subtitles.

Single column web page layouts are great for businesses that need to display large amounts of content in a chronological order, like blogs or media feeds.

Web Page Layout option number 7 is a Boxed Layout.

A boxed based web page organizes multiple elements geometrically down the page.

Each box contains its own unique, and neatly contained, piece of content.

This layout creates a uniform look because each section holds the same weight, value, and emphasis.

These individual boxes are often linked to additional web pages with more information.

Keep in mind that the boxes do not need to be the same size.

The designer can put more emphasis on certain boxes based on the importance or relevance of the content.

Boxed web page layouts are great for businesses that need to display large amounts of content or features that require additional pages to provide more information.

Web Page Layout option number 8 is a Cards Layout.

This layout is similar to a boxed layout, however in this instance each rectangular container is usually the same size and holds the same value.

The content within each container is typically designed using the same colors, size, and fonts so each section is visually treated equally.

This results in a modular design that allows for intuitive and approachable browsing that fits well on all screen sizes.

Card web page layouts are great for businesses that offer an online store, and need to organize their products or services.

Web Page Layout option number 9 is a Magazine Layout.

This type of layout is inspired by printed newspapers and is built on a hierarchy of multi-column grids organized down the page.

Each section or container is independent of all others, and can be emphasized accordingly based on priority.

A wide array of images, vidoes, heading, subtitles, text blocks, and graphics can be used to quickly communicate large amounts of content and information.

Magazine web page layouts are great for content heavy businesses like news websites or online publications.

Web Page Layout option number 10 is a Horizontal Row Layout.

This type of layout breaks up individual full width sections of content down the page.

Each section is not only full browser width, but typically almost full browser height as well.

By separating content into these large horizontal rows, it builds user anticipation for the next section, as they scroll down the page.

Every row can be designed using individual brand colors, full screen photographs, and parallax to create motion and depth.

Horizontal row web page layouts are great for businesses that need to present large amounts of content in a long scroll. They also work well to present all the information as a journey, without having to break the user’s attention.

So that’s about it when it comes to your web page layout options. Based on your type of business, you should now have a good idea about which of the page layouts are best for your organization.