Learn more about common website layouts
When designing websites, it’s key to organize elements in a way that welcomes users and guides them as they navigate each page. In the video, you learned about common ways to lay out the home page of a website. 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 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.
Check out this example of a single column layout in action on the UX Planet website. As you’ll notice, a single column layout is ideal for reading. After users scroll past the headline and featured image, 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 in this course, 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.
When you design a website with multiple columns, keep top-of-mind the visual design elements and principles that you learned earlier in the certificate program. For example, you’ll want to lay out elements within each column based on hierarchy, color, and variety.
One pro tip: On many multicolumn websites, one column of content on the far left or right is used for ad space.
Here is an example of a website that uses a multicolumn layout: the Financial Times. The Financial Times’s website 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 users’ 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 websites, like Amazon’s homepage, which is shown below. In this example, 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.
You might also use a box layout on your portfolio website to showcase images of your designs from different projects!
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.
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 Scandinavian nation’s beautiful landscapes and entices visitors to the country. As you navigate the site, you’ll also notice the fixed top navigation bar. Check it out!
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 this web page from Wikipedia about the poet Stesichorus. 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. In this example, the most important information includes a summary about Stesichorus. Then, users can review the 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 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 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.
Here’s an example of the grid of cards layout on the TED homepage. 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 the grocery store website QFC in the images below. On the left, the desktop version of the website uses a tiered layer cake layout. But on the right, the mobile version of the website has only one column to better fit the screen size.
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 your 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 designer, you’ll use the website layout that best works for your project and the users’ 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. With all this knowledge, you’ll be a layout expert in no time!
Sources: Google UX Design Professional Certificate
Coursera | Responsive Web Design in Adobe XD
