Website layouts play a huge role in the user experience. Pick the wrong one and you will end up with a disorganized and confusing website that your visitors will hate big time. The wrong website layout will hide important content and call-to-action and will fail to provide focus to the elements that matter.
So before building your website, plan and make sure you have the layout right. Have your essential elements, images, and copy ready so that you’ll be able to determine what kind of layout best suits your website.
There are several layouts you can choose from and keep in mind that just because you’ve picked one doesn’t mean you have to stick to it for every page of your website. You can pick several others depending on the content of the page or combine them.
So read below to find out what are website layouts you can choose from.
Single Column Layout
This is easily the most simple and uncomplicated layout of all. However, don’t underestimate its popularity. Since the exponential growth of the mobile web, more and more developers are using the single-column layout because they can use the same design across different devices.
The single-column layout also provides a great reading experience. If your website places great importance on its blogs or it requires visitors to read essential copies, a single column layout is a great pick since it eliminates distraction at either side, prompting your visitors to focus on the content.
Aside from written content, the single-column layout is also an excellent layout if you wish to emphasize and catch the attention of your visitors using a high-quality image.
The Downside
Because of its simplicity, you need to consider the flow and structure of your information. Which information do your visitors need to see first? Which comes next?
Also, since you will be fitting all your content in one column, scrolling time will be longer. Aside from headlines, there will be no clear indication of where in this long page a specific content a visitor is looking for could be. Consider inserting a table of content or sticky navigation.
Content Focused Layout
Content-focused layouts are often used for news sites or blogs. It has a primary column for the main content and one or more side columns for navigation or additional information.
This layout gives you the ability to control and vary the width of the size columns, also helping you manipulate the line length of the prime central content. This is an important element to consider because the length of the text plays a huge role in comprehension and information retention.
If the line length is too long or too short, your visitors will have a hard time digesting the information. According to Baymard Institute, the right amount of characters per line is the key to the readability of your text. The recommended line length of your body text is 50 to 60 characters per line. Others would suggest that up to 75 characters are acceptable.
When done right, this content-focused layout is ideal for copy-centered websites since it gives the designers control on how to break their content into small and digestible pieces.
The Downside
Users expect secondary information in the side columns so this could be information that visitors might deem unimportant, resulting in them ignoring these side columns. So if you were to put call-to-actions on the sides, you have to make sure they are attention-catching enough for users to notice.
Magazine Layout
Similar to a physical magazine, this particular website layout is used to showcase a number of different stories. It allows various headlines and images to introduce stories and links. If you have a part of your website that regularly changes, a featured story, for example, the magazine layout is an excellent pick.
The Downside
The magazine layout has two downsides to it.
One, its responsiveness is a challenge and needs design adjustments and changes to cater to smaller devices.
Two, with the number of words you are showcasing on one page, it can be quite overwhelming and crowded. The solution to this is to create a visual ranking by making certain stories larger than the others. By doing this, you are telling your users where to look first.
Full Screen Layout
The full-screen layout transforms your website into one big presentation. It fits everything on one screen with no need for the user to scroll. This website layout is best used in showcasing high-quality images, illustrations, and videos.
Though we mentioned that it no longer needs the scroll, some website designers would still incorporate it by displaying the full-screen layout on top and a scroll downwards would show additional content.
The Downside
Since full-screen layouts are commonly known to display everything at one glance, some users would no longer think about scrolling down, and in the end, miss valuable content. Aside from that, full-screen layouts might also respond differently on a smaller screen.
Alternating Layout
The alternating layout is one of the most common website layouts. It is a two-column layout made up of content blocks. Typically, one block would contain an image and the other block beside it would text.
If the first column has the image on the right and the text on the left, the next set would reverse the layout, hence the name, alternating layout. It is an excellent pick if you are looking to explain the features or benefits of products.
The Downside
One reason why the alternating layout is commonly used by web designers is that its simplicity rarely births drawbacks.
Card-Based Layout
If you’ve been online shopping, you must have seen this common layout all over eCommerce websites. The card-based layout gives users multiple options and displays it just enough to include essential information, as well.
If you see in eCommerce websites that use the card-based layout, there is the product image, description, and the price all in one glance. Aside from eCommerce website, this layout is also highly utilized in displaying a row of articles and blogs, including the title and description of the story.
The Downside
The card-based layout also has fewer drawbacks but it works best when you pair it with images. If you don’t have images and are planning to use the card-based layout, it might be better to find a different layout.