If only picking a website layout was as easy as just picking one and rolling with it. You have to be intentional with your decision. Choose the right layout and you can provide a good user experience. Choose the wrong one and, well…
Oh, Arngren.net. Baby, what is you doing?
Choosing a user-friendly layout helps ensure that your user will want to stick around and see what you have to offer.
That’s why we want to walk you through 10 common website layouts that you can use for your next design. We’ll explain each one and give examples of the way to match website needs and appropriate layouts.
Read on for more about:
- What is a website layout?
- 10 website layouts for your next design
- 3 types of websites and the layouts they use
Let’s jump in.
What is a website layout?
First, it’s important to understand what a website layout is.
A website’s layout is the framework for how it’s constructed and designed. Think of it as the construction blueprints to your website’s building. Like how a blueprint determines the way a building will look—where rooms will be, where the walls are, etc—the website layout tells you where all your assets will be, from photos, to text, to logos.
In all, a good website layout will usually adhere to the important tenet: Keep it simple, stupid (or, KISS).
According to a study conducted by Hubspot, 76% of consumers say that simplicity and easy navigation are the #1 most important factor in website design. That means choosing a layout that will be able to take all the assets you need and communicate them in a simple way for the user.
What does that look like? I’m glad you asked.
10 website layouts for your next design
Below are 10 website layouts you can use for your next design, each of which represents a different style of design and user experience.
You’ll be able to find these layouts in use across countless different websites. Keep reading until the end, where we’ll go into how to pair website style with design layout!
1. F-shape
The F-shaped website layout is incredibly common, built based on research done by the Nielsen Norman Group, a UX research consulting firm, who conducted an eye-tracking study and found that people typically read blocks of text and assets in an F pattern.
A heatmap from the Nielsen eye study revealing some common findings
The image above is a compilation of thousands of heatmap recordings. It’s clear that readers tended to scan in two horizontal lines before checking the side for information, creating an F or E pattern.
Many websites use the F-shape pattern when they want to provide a lot of different options for users to click on. Think about how Google search results are laid out, or how most news website will present their assets.
Protip: Prioritize your content before you design the page. That means deciding on what the most important elements you want to introduce to your user first. This will determine how you arrange information.
2. Z-shape (or zigzag)
Like the F-shape, the Z-shape layout also aims to track the viewing habits of users. Users scan from top left to top right, then down diagonally to the bottom left to bottom right—much in the same way you’d read a book.
The difference between this and the F-shape is that the Z-shape website layout is best for pages with a goal, like a landing page for signing up for a newsletter or service.
Here’s an example of a Z-shape website with that in mind.
The eye line follows a natural Z-shape throughout this webpage, from the Facebook logo to the log-in area, then down to the landing page copy and sign-up area.
Protip: The Z-shape website is best for pages with minimal copy and content, and with a images showcase as the eye moves down the page. Couple it with a slider with multiple images and you’ll be able to keep your readers’ attention centered on the page.
3. Magazine-style
The magazine-style layout is most often used with media publications. The layout is based on grids, which present loads of content to the user without overwhelming them.
This layout also allows website managers to assign an easy-to-grasp hierarchy for their articles, helping users easily understand what articles are more important or recent when reading, as well as to scan through the page and soak in other content as well.
If your website is heavy on content—think blog or news publication—consider going with a magazine-style layout.
Protip: Don’t 👏 sleep 👏 on 👏 images 👏👏👏 The magazine-style layout relies heavily on a varied amount of good images as well as the headline to draw readers’ eyes. Be sure to pick the best for each of your article’s thumbnails.
4. Full photo (or featured image)
The full-photo website layout gives users a large featured image with smaller bits of content on top of it. It’s great if you have a specific product that you want to showcase, such as food for a restaurant.
Beautiful photography and images are a must for this one. In order to properly showcase your product, your images need to be captivating and dynamic—only then can you capture the users’ attention and keep them on the site.
Protip: Remember your image needs to be compatible with mobile users too. What looks good on desktop might look atrocious on a phone.
5. Split-screen
This layout refers to screens that are split either horizontally or vertically—or both, like above!
This layout is frequently used for websites splitting their offers for men and women, or adults and children, like eCommerce shops and modeling agencies.
Protip: Keep the content to a minimum with split screen. Since the users’ focus should just be on your split assets, you don’t want to crowd their field of vision with a bunch of content and extraneous images.
6. Cards
Working with cards, another kind of grid, is great for websites hosting a huge bank of non-hierarchical content.
This website layout is frequently used for news, blog, portfolio, and video websites—websites that need to showcase lots of content in an organized, customizable, simple way.
Protip: Make sure to provide enough whitespace. Not enough and your users will get overwhelmed—and miss all that content you’re trying to highlight.
[CAPTION: Oh god. Why?]
7. Asymmetrical
As Frank Sinatra once said, “Cock your hat—angles are attitude.” On top of being a blue-eyed crooner, seems that he was also an advocate for asymmetrical website layouts.
Asymmetry is great for adding tension and dynamics to a website layout, and can help designers draw their users’ eyes to one specific part of the website layout.
This layout often utilizes contrasting colors to highlight content. Another distinguishing feature is the level of depth it can provide to a page. It’s used most often for portfolio websites looking to stand out from others, as well as innovative and bold brands.
Protip: Make sure that an asymmetrical layout not only fits your brand but also your content assets. This layout works best for websites with less content.
8. Single column
Single column websites are as simple as they come.
All of your assets go in one single column on your website. That’s it. All it takes is a single column, and all users need to do is scroll down to see more content.
It’s a popular website layout for minimalist blog platforms such as Tumblr and Medium or social media platforms such as Instagram and Twitter, where posts are automatically sorted by one factor: date.
Protip: When using this layout for your own website, consider putting floating navigation buttons so your user can easily navigate the site, no matter where they are on the page.
9. Boxes (or thumbnails)
This box-based website layout is perfect for blogs and news websites that are highlighting different pieces of content.
It usually comes in the form of three different pieces of content assets arranged in boxes, with one large one on top of the other two. The bigger “featured” box sometimes comes with a slider to scroll between different images.
Protip: Use your boxes to promote product by weaving them together. In the image above, Microsoft uses each box to promote the Surface. Each box does work by either showcasing an accessory product or directing users to where they can learn more about the Surface.
10. Fixed sidebar (or fixed navigation)
The fixed sidebar website layout has exactly that: A fixed navigation bar to the left or right side that allows users to easily navigate the site no matter where they are on the web page. This is a great example of keeping your users’ needs in mind when designing a website.
However, it does come at a cost: A fixed sidebar will take up more of the page, which means less room for other assets. This issue can be alleviated somewhat though if you have the nav bar disappear until the user moves their cursor over it. Also, this was a big deal in the days of iframes in the early 2000s.
Protip: Remember that the sidebar can help navigate the assets on the current page as well as take readers to other places such as your social media feeds and about page.
3 types of websites and their layouts
Now that you know a few common website layouts you can use on your next project, we want to walk you through them in action.
Below are three example types of websites:
- SaaS
- Editorial
- Personal
With each, we’ve also included five examples of websites and the layouts they use. Hopefully, they’ll help inspire your project no matter what shape it’s in.
SaaS layouts
Websites for SaaS products typically follow one layout: Z-shape. This helps draw the user’s eye to the page’s CTA.
For the ones below, that’s usually to sign up for the services offered by the website.
Evernote (Z-shape)
Mailchimp (Z-shape)
Hubspot (Z-shape)
Slack (Z-shape)
Salesforce (Z-shape)
Editorial layouts
Publications tend to lean towards reader-friendly website layouts, like the magazine-style or the F-shape. These layouts allow the website owner to determine a content hierarchy while giving users the freedom to choose the piece of content they want to explore.
The Verge (Magazine style)
WIRED (Magazine style)
LA Times (Magazine style)
Personal website layouts
Especially when designing your own website, your website layout choice should reflect who you are—unique to you and your goals.
For example, if you have a blog, you might want to use single column or boxes layouts, since those in particular showcase content best. If you have a product you want to sell, you might want to use full photo or Z-shape since those are great for showing off products and calling your user to action.
Geraldine DeRuiter (Full photo/Featured image)
Gary Sheng (Full photo/Featured image)
Tony D’Orio (Full photo/Featured image)
Nick Jones (Grid)
Choose the right layout for you
Now we want to know: What’s your favorite website layout—and why? Let us know and give us an example. We might include it in a future post on website design.
Want to read more about website design?
by Tony Ho Tran
Tony is a content marketing consultant and freelance writer. His work has been seen in Business Insider, MSNBC, Hootsuite, and GrowthLab.
