Types of Common Website Layout
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 laptop 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.
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 for 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.
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 websites, like Amazon’s homepage
Featured image layout
The featured image layout places the user’s focus on a single image or video that often takes up the entirety of the page. Because of this, the featured 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 is high in 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.
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 Google
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.
The user flow moves from left to right, then back to 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 a 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 card layouts 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.
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.
Learn More about Website layouts: 9 Best Website Layout Examples and When to Use Them
