Website layouts: Examples and Tips

Website layouts: Examples and Tips

January 28, 2021

The layout is perhaps the most important part of your web design. But which website layout do you use? With examples and tips.

What is a website layout?

A layout is a format with which a design can created easily. It determines the composition and where the elements will be placed. A good layout guides the user's eyes through the design with a smooth movement. The layout thus determines the order in which the website is viewed. It makes clear what is most important about a design. By using an existing layout, you do not have to invent the wheel yourself when designing, and your visitors will understand your design faster.

Creating a Website Layout

Website layout maken

How do you create a website layout? Make a list of all your website elements and website content. Then choose the most important element of your website. If you have trouble choosing the most important thing, ask yourself the following question; "What is the first thing my website visitor should see when visiting the website?" This is often a call-to-action button or a title of the page. Mark how important each point in your list is. You can now choose a website layout based on this list.

Types of Website Layouts

There are different types of website layouts. But how do you choose the right one? And what are the characteristics of the most common types? Below you can see the most common types of layouts.

F-Pattern

F-patroon Website Layout

The F-pattern is one of the most common website layouts. Many people read pieces of text this way, occasionally scanning the page. The lines at the top are read fully, but the further you go down, the less you read and the faster you scroll.

This layout is very suitable if you want to show large pieces of information to your users. This is why many search results are displayed this way (just look at Google). You can give the user a helping hand by applying clear headings and other formatting.

Z-Pattern

Z-patroon Website Layout

Like the F pattern, this layout relates to the reading direction. The visitor's eyes are guided along a Z-shape. This direction is also very natural, just look at how you read a book.

On websites, this layout is often used on landing pages or one page websites to draw attention to a call-to-action. Try to experiment with white space and images to incorporate the Z-pattern into your website.

Magazine Layout

Magazine Website Layout

A magazine layout is often used to display news or blog posts. A grid is often used to align everything. The information is shown in a structured way so that a lot can be shown on the screen at the same time.

Grid Layout

Website layout Grid

Just like the magazine layout, a grid layout is used to display many types of information in a hierarchical way. Even more than with the magazine layout, a grid is used and the blocks (also called cards) are often repeated. In a typical grid layout, the information is not displayed hierarchically, so all information looks the same.

Websites that use a grid layout are for example blog, portfolio or video websites. You can show a lot of complex information in a grid, without it looking sloppy. Make sure you have enough white space to make scanning easier.

View more websites in a grid layout

Asymmetrical Layout

Asymmetrische website layout

An asymmetrical layout divides the screen into parts of different sizes. This creates a dynamic appearance.

To enhance this uneven distribution, you can play with images or use color to enhance this effect. It also allows you to indicate a hierarchy and direct the user's attention to the most important thing on the website.

Single Column Layout

Website layout enkele kolom

One column websites look very minimalistic. All content is placed below each other. Often used when there is a lot of content, but it needs to be arranged, for example, by date. Even if there is a lot of text, such as with an article, the single column is often used.

Websites that use a single column are Twitter (which shows Tweets one below the other by date) or Medium (where long articles are placed in a single column).

Website Layout Examples

The theory we covered above seems quite abstract, so here are some examples of web pages that have chosen a good website layout. Also pay attention to the way in which color, typography and images are used to enhance the layout.

Mailchimp: Z-Pattern

Website layout Mailchimp

The Mailchimp website uses a Z-pattern. This is achieved through the use of color (the turquoise buttons draw attention to the yellow background), but the headline and the illustration next to it also stand out. This creates a natural reading direction. The elements that stand out the most are the main elements of the website; the website visitor can register directly or view the prices.

ABC News: Magazine Layout

Magazine layout

The ABC News website is a classic example of a magazine layout. The website is divided into three columns in which news items are given an image, a headline and a date. By placing everything in a grid, the design looks organized. The colorful images attract attention and stand out because of the black and white color palette.

Medium: Single Column Layout

Enkele kolom layout

Medium is the perfect candidate for the single column layout. The entire article is put in a single column, so that all attention goes to the text. The column is narrower than the full width of the screen to ensure that the text is still comfortable to read and the lines do not become too wide.

Nike: Grid Website Layout

Nike Website Grid Layout

Nike.com uses a strict grid in where it puts its shoes. Because of the grid a lot of products can be shown at the same time, without looking overwhelming.

code d'azur: Asymmetric Website Layout

Asymmetrische website layout

code d'azur creates an exciting composition by aligning the main text on the right side of the website. The asymmetric layout works very well when creating a unique website. A lot of white space is created on the left, which balances the website nicely.

Creating a website layout?

Want to experiment with different website layouts? Create wireframes before you waste valuable time designing your website. If you are going to make wireframes for your website, you can quickly sketch and test ideas.