The Basics of Page Layout Design (+25 Page Layout Design Ideas)

Build a Website for Free with HubSpot CMS

When I built my first web page, I felt overwhelmed (that's basically the official first step of the design process). Even though I was using a premade template, there were so many design options. I was dragging and dropping modules all over the page, but I didn't feel like I was really getting anywhere.

If you're feeling like I was - a little intimidated by website design - you don't have to go through the same struggles. There are fundamental rules of website layout that can guide you through creating an attractive web page.

In this post, I'll show you the basics of page layout design, a list of design ideas, and concepts that will inspire your own website (not to mention tool recommendations, like our free drag-and-drop website builder).

Table of Contents

• The Basics of Page Layout Design
• Page Layout Design Ideas
• How to Choose the Right Page Layout Design

The Basics of Page Layout Design

Use a grid system to balance your page.

If you're starting from scratch, the first element that I recommend adding is a grid. Grid systems create a baseline template for your layout. It sets the margins to a consistent length and creates a designated space to add each piece of content.

That way, you have an idea of what you're going to add to this page, and as you continue to add more elements, they're spaced out evenly by default.

Follow the "rule of thirds."

The rule of thirds is a common design principle used in photography. However, it also can apply to web design as well.

With the rule of thirds, your page is broken into three sections vertically as well as horizontally - giving you nine total sections. Here's an example:

Image Source

Following this rule, elements that are placed along the gridlines will look more appealing to your audience. Why? Because they're evenly spaced. The key elements of your page bring the visitor's attention to one gridline, while the rest of the page is balanced out with negative or empty space.

This setup feels right to the viewer and can help you create web pages that direct your visitors' attention to the most important element on the page.

Use the negative space on a web page.

Negative space, or white space, is the space between elements on your web page. Too much space may make your page look minimal, and viewers might not be able to find what they're looking for. Too little negative space will make your page feel cluttered and cramped, which can overwhelm the viewer and also make it difficult to find the information they're searching for.

Ideally, I recommend having a balanced amount of negative space on your page. Page elements should be spaced evenly, and it should be easy for visitors to locate the exact piece of content they're looking for.

Consider the "rule of odds."

Similar to the rule of thirds, the rule of odds is another design principle used primarily in photography. It argues that people prefer to see an odd number of page elements versus an even number.

Typically most designers go with three elements, as the outside two complement the focal point in the middle. But you can go with three, five, seven, or another number so long as the page still feels spaced evenly and is directing attention to the center element.

Set a hierarchy for your content.

There's a reason why different pages have different layouts. Your homepage should look different from your individual web pages, and those pages may look different from each other, too.

Why? You should try to build your layout around the most important piece of content on that page. This creates a hierarchy that you can follow for the rest of the elements, so they'll direct the viewer's attention back to that main piece of content.

For example, take a look at HubSpot's homepage:

Image Source

Making use of the rule of thirds, we created a hierarchy on the left side of the page. The header, "Grow better with HubSpot," is the focal point, and it leads you to the next most important piece of content which is the call-to-action (CTA), "get a demo."

If you're looking for more examples like this, I've curated a list of page layout design ideas below that you can use for your own website.

Page Layout Design Ideas

I'm not exaggerating when I say there are tons of layout designs that you can look at for inspiration. Below are some of the most popular ones, and I broke them down into specific categories so you can look at homepage designs, single-page website designs, landing page layouts, and more.

Homepage Layout Design

A good website layout starts with your homepage. It's the "front door" of your digital home, and with the right website layout, viewers will learn about your company, values, and offers without feeling overwhelmed. These examples will give you layout ideas to apply to your own website.

1. Full-Screen Photo

Image Source

A full-screen photo layout uses an image as your main background that spans the length of the page or above the fold. Text, navigation features, and CTAs typically are overlaid on the image. This captures your audience's attention immediately as they'll see a bright, vibrant image at the forefront of your homepage.

Pro: With the right product, a photo is the best sales tool for a stellar homepage.

Con: Choosing the wrong photo will make this page unreadable to some or all viewers.

When to Use This Page Layout

If you have high-quality and eye-popping images at your disposal, I think a full-screen background image is a great way to grab someone's attention. It's hard to ignore and can really make your products and services stand out.

2. Card-Based

Image Source

A card-based layout showcases multiple elements on your homepage using different cards or boxes. This creates even spacing between content and makes it easier for visitors to locate a specific webpage or blog post.

Pro: Content-heavy websites get to show off knowledge or product depth at a glance.

Con: If the photos are all the same size, there's a lack of content hierarchy.

When to Use This Page Layout

This is ideal if you're showcasing products or have a series of blog posts that you want to share with your audience. I like that it's easy to navigate and allows you to promote several pieces of content at once.

3. Hero Section

Image Source

A hero section layout is similar to a full-screen background image, with a few small changes. "Hero" refers to the banner image that's placed above the fold on your homepage. Navigation features typically are placed above the image, while text, icons, and CTAs can be positioned either below, or overlaid on the image.

Pro: Offering one focal point will improve conversion rates.

Con: This is a hyper-focused design approach that requires a very strong CTA.

When to Use This Page Layout

Hero layouts are great for pretty much any type of website or business. They grab the viewer's attention with a high-quality image, and they also allow you to add marketing copy either on the image itself, or directly below it. This makes it great for promoting individual products or services that your company offers.

4. Animation

Image Source

Who doesn't love animations? They're fun, engaging, and - like in the case above - sometimes mesmerizing, too. I like how animations set elements in motion on your page. They can draw attention to a specific element or just create an interactive and enjoyable experience for your users.

Pro: Visual elements like these are highly engaging and create active space on your webpage.

Con: Animations can make webpages less accessible to older users and may take longer to load.

When to Use This Page Layout

The example above gives us a good idea of how you can use animation on your homepage. You can use it to highlight a promotional price point, or showcase what your product can do in action.

5. Masonry

Image Source

Similar to the card-based layout, the masonry layout also uses boxes to showcase content. However, rather than having the boxes stacked neatly and evenly in a row, this layout keeps things interesting by generating boxes of different shapes and sizes that fit together seamlessly.

Pro: You can showcase many pieces of content at once without overwhelming viewers.

Con: The lack of hierarchy can reduce conversion rates.

When to Use This Page Layout

If you want to showcase an image gallery, the masonry layout is an excellent choice. Not only is it ideal for publishing an array of high-quality images, but it also makes each image stand out because the size and shape of the box vary from image to image.

6. Full-Screen Background Video

Image Source

A full-screen video background can inject some POP into your homepage. In this example from Pinkanova, users can view different bits of information about the production company by clicking on the tabs on the right, left, top, and bottom of the page.

Pro: A video background (paired with creative tabs, like the above example) creates a very unique and memorable website.

Con: Full-screen videos don't always translate well on smaller devices. I recommend testing before publishing this site layout.

When to Use This Page Layout

The best full-screen video backgrounds are the ones that seem to loop continuously without drawing attention to themselves. For example, the video in the example runs endlessly without having to manually reboot the video or watch an awkward filmmaking cut that sends you from the end back to the beginning.

7. Grid Breaking

Image Source

A broken grid layout defies the standard of a traditional grid layout. That doesn't mean it throws all of the rules and concept of grids out the window, but rather tweaks them and takes liberties when possible. The example above is from Zara, where the columns vary in size and sometimes overlap each other.

Pro: Asymmetrical layout templates create visual intrigue and are perfect for artistic or creative websites.

Con: If your visual elements aren't strong enough or you're using stock photography, this layout can come across as random to the viewer.

When to Use This Page Layout

When done correctly, broken grid layouts can add a modern look to your site. However, depending on the CMS platform you're using and your level of website development expertise, designing the perfect broken grid layout may take some time to complete.

8. Alternating

Image Source

An alternating layout balances text with images in alternating columns. This lets you compliment an image with text without repeating the same pattern throughout the entire page. I think this is ideal if you have a lot of content that you want to stack on your homepage but don't want your readers to lose interest by the time they reach the bottom of your page.

Pro: This popular template keeps readers engaged and adds white space to otherwise text-heavy web page content.

Con: Alternating website layout templates are extremely popular, so this design might be too standard for creative business websites.

When to Use This Page Layout

Alternating layouts are great for promoting blog posts. You can put the featured image of the post next to a short description of the article. This gives visitors a sneak peek at what the post is about and how it's written.

One-Page Layout Design

Sometimes, you don't need an expansive website for your business. Maybe you're a freelancer building a portfolio site or a production company promoting a film. Either way, for some companies, a simple, one-page layout design is all you need for an effective website.

Let's take a look at a few examples below.

A featured image layout places a large image on one side of the page. On the other side, there are headers and body text that provide information about your brand, products, and services.

Pro: This creates a strong funnel into your written content, which is perfect for brands who sell through their blog.

Con: Less ideal for websites that don't have strong copywriting and rely on imagery.

When to Use This Page Layout

In this example, we used the HubSpot blog to showcase a featured image layout. But, a blog isn't the only type of website that's ideal for this design. You can use a featured image layout to promote an offer or product, similar to a landing page.

10. Split-Screen

Image Source

A split-screen layout divides your site into two halves. This is an eye-catching layout that creates a two-tone background on your homepage. You can keep this division as the reader scrolls, or alternate it to keep visitors on their toes.

Pro: It's attention-grabbing and highly visual, perfect for displaying one product or one CTA.

Con: The split-screen layout isn't as strong on mobile devices.

When to Use This Page Layout

Split-screen designs are ideal for any type of website. They create a modern look and can easily match your brand's color palette.

11. Interactive

Image Source

This page layout lets visitors interact with the scene by shifting the perspective. It doesn't deliver vital information, but it's a creative way to let users engage with your site.

Pro: Interactive layouts are memorable, fun, and engaging for viewers.

Con: It needs to be closely tied to your message in order to help convert viewers and not distract them.

When to Use This Page Layout

Plain and simple, this layout is pure fun. If you're a developer or a freelancer, I think it's a great way to show off your web design skills and to keep visitors engaged on your site.

12. Portfolio

This is just one example of a portfolio layout. However, there are a few approaches you can take with these types of websites. In this example, the designer put a large feature image on the left half of the page, while the right side is reserved for body text and information about the artist.

Pro: Portfolio website layouts let you showcase depth of expertise beautifully and encourage site exploration.

Con: Your hook (either imagery or headings) needs to be strong for this to persuade viewers to click.

When to Use This Page Layout

If you're an artist, freelancer, or digital marketer, you might want a website to showcase your work. In which case, having a portfolio layout will allow you to not only show off your work but also provide contact information so viewers can get in touch with you.

13. Scrolling Full-Screen Image

Image Source

A scrolling full-screen image layout is similar to a full-screen image background layout, but there is one important difference. Rather than having the overlaid text fixed on one spot on the page, the text scrolls and changes as you navigate downward.

Pro: Scrolling full-screen images grab the viewer's attention and allow your product to sit center-stage.

Con: There needs to be enough text on the page as viewers scroll to avoid the page feeling empty.

When to Use This Page Layout

This page layout is ideal for any one-page website. So long as you have a high-quality image to set as your background, I think this design looks professional and can be modified to your exact liking.

14. Boxes

Image Source

Boxes are similar to a card-based layout but the boxes that house your page elements vary in shapes and sizes. That might sound like the masonry layout, but unlike masonry, boxes have fixed columns and their shapes and sizes don't vary as much as they would in a masonry layout. There's also the option to add caption text above or below a box to tell the viewer a little more about the image they're looking at.

Pro: Boxed layout templates are visually balanced and organized.

Con: This layout can be too predictable or stiff for creative businesses.

When to Use This Page Layout

Boxes are a great way to show off a catalog of items, like products, photos, and other promotional content.

For instance, you could add links to your boxes that direct visitors to your online store, or maybe your team went on a fun company outing and you want to share the photos from your trip on an easily accessible platform. Either way, boxes provide a clean and clear layout for showcasing your image gallery.

15. Hero Image With Two-Column Section

A two-column hero layout includes a banner image at the top of the page, along with two module columns located either directly underneath it (or overlaid on top). In the example above, the columns are overlaid on top of the banner and include CTAs as well as a login form.

Pro: The hero image with two column layout maintains page hierarchy while still displaying multiple types of content for viewers to choose from.

Con: Conversion rate may be lower with the split layout because viewers' attention is divided between columns.

When to Use This Page Layout

This page layout is fairly universal and can be effective for nearly any type of website or web page. It's a great choice if you're looking for a flexible design with plenty of customization options.

16. Simple Copy

Image Source

A simple copy or "text-only" layout uses only text on your web page. It's very minimalistic, and the pages look similar to a Google or Microsoft Word document.

Pro: Simple copy website layouts are quick to make and don't require any complicated design elements.

Con: Your copywriting needs to be strong enough to stand alone without imagery.

When to Use This Page Layout

If your website's content is very simple and straightforward, you might be interested in this page layout. Pages are remarkably easy to create as there are very few CSS and HTML elements that you need to customize. This is ideal for beginner web designers who are looking for a basic layout to test their development skills.

Landing Page Layout Design

Since landing pages are where you send visitors when they click on an ad, opt to subscribe, or take you up on another offer, it's important to create web pages that are laser-focused on the content the visitor is expecting. Check out effective layout ideas that do just that below.

17. One-Column

Image Source

A one-column landing page centers the text in the middle of the page layout. Below it is a CTA that directs users to your offer. It's simple and straightforward, improving your chances for conversion. Use our free landing page builder to build your own page today.

Pro: A one-column layout keeps viewers focused and concentrates on conversion.

Con: The timing of your text and images is important to keep readers on the page.

When to Use This Page Layout

This layout helps you get right to the point of your marketing message. You can add some enticing copy at the top of the page and follow it up with a clear CTA at the bottom.

18. Asymmetrical

An asymmetrical page layout divides your page into two sides, each containing an equal amount of content that creates an overall balanced look. In this example, the landing page has a featured image positioned on the right side of the page with copy, CTAs, and social sharing icons on the left.

Pro: Asymmetrical layouts are creative and engaging to look at.

Con: The impact is lost on mobile when the design elements are rearranged into a vertical format.

When to Use This Page Layout

This layout can be used for pretty much any landing page. At HubSpot, we use it for our product offering pages, where we place an image of the product on the right and a CTA on the left. You can see how we do this with Content Hub here.

19. Z-Pattern

Image Source

The z-pattern directs viewers' attention to alternating sides of the page. As you can see from the example above, visitors read the page header first, then move right to fill out the form, then continue down and to the left to view the video. You can continue this pattern as much as you'd like throughout the page to keep visitors interested in your content.

Pro: The z-pattern layout mimics the natural path of the human eye, making it feel very readable and easy to skim.

Con: This layout contains more text and images on the page, which can lower conversion rates.

When to Use This Page Layout

I find the z-pattern is perfect when you want to educate customers about your product, service, or offering. You can add quick, need-to-know information next to the sign-up form. You can then provide a more detailed explanation below it. The alternating pattern keeps visitors engaged and invested in the rest of your page as they scroll.

20. Collage

The collage layout places a great deal of focus on the images included on your web page. It joins them together to create a visually appealing layout that's easy to follow and clear to the reader.

Pro: The collage layout is the perfect marriage between strong imagery and text that creates a balanced website experience for viewers.

Con: Images need to be compressed correctly. Otherwise, large images can slow down website load times.

When to Use This Page Layout

This page layout is effective if you don't have a lot of copy to share with your audience. If your product or offering is self-explanatory, then you might just want an eye-catching image to be the focal point of your page. In which case, the collage layout would be a solid choice as it combines several images into one, organized, and consistent design.

21. Gradient

Image Source

Gradient layouts add a mix of colors to your landing page. In this example, the pastel purples on the left gradually transition to a tranquil blue on the right. In the middle, black text overlays the background image, and a product mockup is positioned below the copy.

Gradients can be used as the background photo or they can be overlayed on stock images. Stock photos are great, but they're rarely customized for your brand. I think adding a gradient with your company's colors over a stock image can add some much-needed personalization to your web page.

Pro: Gradients have been a rising graphic design trend for years. They add interest without distracting from your message.

Con: Not all brands have colors that lend themselves well to gradient backgrounds; you may need to reach outside your standard brand palette.

When to Use This Page Layout

Use a gradient background on busy pages where you want the product or features to shine. This removes distractions and focuses the page on your products.

Blog Post Layout Design

Site layout can take many unique forms, as we saw in the homepage examples. Website layouts for blog pages can be even more varied. Asymmetrical layout templates are embraced, and designers fight hard to keep users' attention as they read long-form articles. Here are common layouts that you should consider for your blog.

22. F-Shaped Layout

Image Source

The F-shaped layout is effective because it appeals to how most people read a web page. You start at the top of the page, reading left to right, and then you make your way down, repeating the process.

Pro: An F-shaped layout delivers a lot of information in a skimmable format.

Con: If your messaging is unclear, this format will feel unfocused to readers, and your conversion rate will drop.

When to Use This Page Layout

The F-shaped layout works well with pages that have a lot of text or images. Take, for example, the website above. After reading about the product, you can see which companies are using it in the section below. Although there are over 10 companies featured in this section, you can quickly scan through them as you work your way down the page.

23. Blog Listing Page

Image Source

Blogs typically have two-page templates: one for individual blog posts and the other for the blog listing page. The blog listing page is like a homepage for your blog posts, where readers can see the most recently published posts and browse through older posts as well.

Pro: Having a centralized blog listing page helps create a magazine effect with your long-form content and will encourage readers to click around.

Con: If your blog is an afterthought and doesn't help sell your products, this will distract from the overall message of your website.

When to Use This Page Layout

Unless you have an RSS feed on your website's homepage, you may want a blog listing page to act as a central hub for your blog content. This will give readers a formal place where they can access recently published posts and subscribe to your blog.

24. Categorical

Image Source

This blog listing page uses categories to organize its content. This makes it easier for users to find specific blog posts related to an individual topic or published during a certain time period. Categories are listed on the left and results are filtered as more criteria is selected from the sidebar.

Pro: A categorical page layout engages viewers by letting them select the most relevant and interesting content.

Con: If you haven't formatted your content correctly (such as adding tags, categories, etc.), the results will be too vague or will be missing important pages.

When to Use This Page Layout

This is an ideal layout if your blog hosts educational content. You can create lesson-type blog posts that are grouped together, creating courses for your readers to follow.

25. Magazine

Image Source

The magazine layout mirrors a traditional newspaper or hardcopy magazine. It's organized into columns and there are several options for searching for content on the page. Users can enter a keyword into the search bar, or browse individual topics using the main navigation features.

Pro: No format displays written content as well as the magazine layout. Paired with strong images, your website will become a bingeable outlet for readers.

Con: If you display content that's thin, old, or outdated, readers will quickly lose interest in browsing.

When to Use This Page Layout

If you're managing a news website or writing about the latest trends and events, I think the magazine layout is an excellent choice for your blog. The multiple columns allow you to promote several pieces of content at once, and the search features make it easy to find content that you previously published.

How to Choose the Right Page Layout Design

Which layout idea is right for you? That depends on your business. These are the factors I would consider before designing from scratch for choosing a template:

1. Your viewer. Consider your readers' age, intention, and buying objections as you design your site layout.
2. Their primary screen size. Focus your design on your readers' preferred screen sizes (while still formatting and testing on other devices).
3. How they'll use the site. Websites with lots of written content will want to include search bars, white space, easy navigation links, and more in the user experience.
4. What you hope they'll do. A blogger hopes the viewer will click around and stay on their web page as long as possible. Business websites hope people will place an order. Educational sites hope that viewers will sign up for a trial lesson. This will help you determine your content hierarchy.

With these questions answered, I would then:

• Choose your best layout. Looking at the above website layouts, choose your website's structure.
• Test with real readers. You'd be shocked how many companies don't test their websites with their audience (even when the need seems obvious). For example, many companies that cater to retired individuals don't meet older web users' tech needs, and by not testing, they continue to lose viewers.

Here's how I would apply this insight to the website layout for a marketing blog:

• The viewer is a marketer.
• The screen size is desktop, but the design is responsive for mobile devices and tablets.
• They'll use the site to browse around between resources.
• I hope they'll read multiple articles.
• A good layout for this site is a categorical layout (layout #24).
• The blog post pages themselves will be a single-column layout for readability.

Finding the Perfect Page Layout

It's not good enough to randomly select one of the most common layouts for your website and hope that viewers convert. Finding the perfect page layout is a more involved process, but it's well worth the investment.

Once you achieve the right look and feel for your website, you have a better chance of growing your audience and converting more leads into customers. Use the ideas above to kickstart your search, and keep testing until you find one that works for you and your visitors.

Editor's note: This post was originally published in April 2024 and has been updated for comprehensiveness.

Topics:Website Design

Don't forget to share this post!