When designing websites, it’s key to organize elements in a way that welcomes users and guides them as they navigate each page. This reading will take your knowledge one step further and examine each layout in more detail, including tips for using each one.

Single column layout

The single column layout features just one column for the website’s content, which makes it one of the simplest layout options. Single column layouts are often the standard design for mobile versions of responsive websites, since mobile phone screens are narrow and don’t have space for multiple columns of content. In addition, a single column layout allows for easy scrolling on mobile phones.

Single column layouts can be used on laytop and desktop-sized websites, too. This layout is especially good for emphasizing one main element on a page, like a logo, a video, or an entire block of text. Keep in mind that with a single column layout, elements tend to be organized logically. Websites that use this layout usually feature navigation at the top of the page, followed by content, and then a footer at the bottom of the page.

If you are familiar with Medium website, a place to write, read and connect. You might have noticed its single column style in each artile. The article usually accompanies with one feature image and follow by the its contents. The layout encourages users to focus only on the text.

Multicolumn layout

The multicolumn layout has two or more columns for content. Many desktop websites use multiple columns to make the most of the space on the screen. When you’re designing a responsive website, the mobile phone sized version of your website might use a single column layout, while the desktop sized version might use a multicolumn layout since there’s more space to add elements.

For each column, there will be hierarchy, color and variety to make the site interesting. On many multicolumn websites, one column of content on the far left or right is used for ad space.

In the example below of the Financial Times. The site is split into vertical columns of content to showcase different types of articles. Websites that use a multicolumn layout usually have a clear focal point, which is a specific and distinct area of the website that captures user’s attention. In this example, the focal point is the article at the top of the page that’s emphasized with a colored rectangle and large hero image.

Box layout

The box layout consists of boxes or squares of various sizes and proportions. This layout is typically found on homepages of websites and is a great way to organize multiple elements. When boxes are the same size and they’re evenly spaced, users will give boxes equal importance. Alternatively, some boxes can be larger or spaced apart from the rest to draw the user’s attention to that box, which might show a specific image or item.

Box layouts are very common on e-commerce site like Amazon’s homepage as shown below. Each box focuses on a specific theme or product. Some boxes have smaller boxes inside of them that all relate to the same theme or product.

Featured image layout

The feature image layout places the user’s focus on a single imge or video that often takes up the entirety of the page. Because of this, the feature image layout is often referred to as a single image layout.

The featured image layout is popularly used on websites that want to create a strong first impression, because humans are naturally drawn to images. When using this layout, make sure the featured image or video is tied to the product’s message and its hight quality. The featured image layout is often accompanied by a fixed or “sticky” top navigation bar that stays in place as users scroll down the page.

Checkout the Norway’s official travel guide website uses a featured image layout. As soon as users enter the website, a video starts to play, which showcases the beautiful landscapes and entices visitors to the country. As you navigate the site, you’ll also notice the fixed top navigation bar.

Asymmetrical layouts

Asymmetrical layouts are purposefully imbalanced between different sides of a page to draw emphasis. This website layout can be useful to highlight certain design elements, like images or text headlines, or to divide content by order of importance.

The success of asymmetrical layouts relies on natural eye-tracking patterns. An eye-tracking pattern describes the way in which users with typical vision follow content down the page of a website. Two common asymmetrical eye-tracking patterns are F-shape and Z-shape.

F-shape eye-tracking pattern

An F-shape eye-tracking pattern means that users will likely browse content on the page following the shape of the letter F. Laying out the page of a website following the F-shape eye-tracking pattern is useful when presenting lots of material, like text, since users scan information based on hierarchy.

This layout is commonly used on search results pages or on text-heavy pages, like Wikipedia. On pages like this one, most users will not read to the bottom of the page, so it’s important to put the most important information at the top of the page. That’s why Wikipedia has a summary on the top of the page on any topics or subjects. Then follow by subheadings down the page to navigate to information that’s most relevant to their needs.

Z-shape eye-tracking pattern

A Z-shape eye-tracking pattern means that users will likely browse content on the page following the shape of the letter Z, for users who read from left to right. A website layout following this natural pattern draws the user’s eyes to all of the information on the site, based on the order of importance.

Here is an example of the Z-shape eye-tracking pattern in action on Dropbox’s website. The user flow moves from left to right, then back to the left again. Images guide users between pieces of information, giving their eyes time to rest and allowing them to easily scan for important information.

For users who utilize assistive technology to navigate website pages, the AT can follow the same F-shape or Z-shape pattern.

Grid of cards layout

A grid of cards layout features a series of cards that provide previews of more detailed content. A card is a rectangular shape that includes short, related information. Think of it like a playing card’s shape and size, but in a digital design!

At glance, the grid of cards layout might seem similar to the box layout, but the two are actually quite different! In the box layout, each box is its own independent item. In the grid of cards layout, cards are correlated together within the same interrelated list. Think of the box layout as separate posters for TV shows in different genres, while the grid of cards layout is a collection of comedy movies.

A grid of cards layout usually previews detailed content. This layout is often found on cooking blogs, streaming services, and other content-heavy sites, like YouTube and Pinterest. In a grid of cards layout, the cards are usually similar in size. The size of the cards can adapt to the screen size you’re designing for, which makes cards great when designing responsive websites.

TED homepage features the grid layout. Each card is a preview for a video, including a thumbnail image and text. The cards are the same size and are part of a related list, like most popular.

Tiered layer cake layout

A tiered layer cake layout has individual rows, or layers, that are stacked on top of one another. Within each row, there can be different numbers of columns, and they don’t have to be consistent.

The tiered layer cake layout is often used in responsive website design, because it adapts to the user’s screen size. The layers shift based on the device being used. For example, check out Safeway website below. The desktop version of the website uses a tiered layer cake layout.

Think like a UX designer

Now that you’re familiar with some of layouts that are used to design websites, try to identify them on the websites you regularly visit! Use the new design skills to compare and contrast various layouts online. As a user yourself, you’ll likely start to notice benefits and drawbacks of each layout.

As a UX’s designer, you’ll use the website layout that best works for your project and the user’s goals. And just like you need to iterate your designs to meet the changing needs of users, the website layout you use will change over time, too.

Want to learn even more about website layouts? Check out this article that explains popular website layouts from the Adobe XD blog.

Good luck!