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

When I built my first webpage, you could say I was a little overwhelmed.

Even though I was using a premade template, there were so many design options and I was dragging and dropping modules all over the page but didn’t feel like I was really getting anywhere.

Truth is, I didn’t understand page layout design or how to put together a webpage that conveyed my intended message and was visually appealing to my audience. I spent a lot of time testing new designs and tinkering with my webpage until I found the exact look and feel I was going for.

If you’re feeling like I was — a little intimidated by website design — you don’t have to go through the same struggles that I did.

In this post, we’ll cover some of the basics of page layout design then provide a list of design ideas and concepts that can serve as inspiration for your own website.

The Basics of Page Layout Design

If you’re like me and lack artistic talent, it can be daunting to create a new page layout from scratch. There are so many elements and modules you can add, it’s hard to tell where to start, and even harder to achieve a balanced and visually appealing layout. Fortunately, there are some fundamental rules we can follow below that will guide us through creating an attractive web page.

Use a grid system to balance your page.

If you’re starting from scratch, the first element that you should add is a grid. Grid systems create a baseline template for your layout. It sets the margins and gutters 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.

Utilize 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, you should have 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 home page should look different from your individual web pages and those pages may look different from each other, too.

The reason being is that 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 home page.

Making use of the rule of thirds, we created a hierarchy on the left side of the page. The header, “There’s a better way to grow,” is the focal point, and it leads you to the next most important piece of content which is the call-to-action, “Get HubSpot Free.”

If you’re looking for more examples like this, read on for a list of page layout design ideas 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 we 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

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 call-to-actions 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.

When to use this page layout:

If you have high-quality and eye-popping images at your disposal, 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.

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. 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 call-to-actions can be positioned either below, or overlaid on the image.

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 with the case above — sometimes mesmerizing, too.

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.

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.

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 also provide some pop to your homepage. In this example, 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.

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 stop-motion video in the example above seems to run 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 sizing and sometimes overlap each other.

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. 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.

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.

9. Featured Image

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.

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.

When to use this page layout:

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

11. Interactive

Image Source

This page layout lets visitors interact and play with different elements on your website. You can click, drag, and drop elements in the background as you explore the site.

When to use this page layout:

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

12. Portfolio

Image Source

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.

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 with 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.

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, 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.

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

Image Source

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 of it. In the example above, the columns are overlaid on top of the banner and include call-to-actions as well as a login form.

When to use this page layout:

This page layout is fairly universal and can be effective for nearly any type of website or webpage. 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 webpage. It’s very minimalistic, and the pages look similar to a Google or Microsoft Word document.

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

17. One-Column

Image Source

A one-column landing page centers the text in the middle of the page layout. Below it, is a call-to-action that directs users to your offer. It’s simple and straightforward, improving your chances for conversion.

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 call-to-action at the bottom.

18. Asymmetrical

Image Source

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, calls-to-action, and social sharing icons on the left.

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 call-to-action on the left. You can see how we do this with Content Hub here.

19. Z-Pattern

Image Source

The z-pattern directs your 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.

When to use this page layout:

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, 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

Image Source

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

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 color to your landing page. In this example, the orange on the left gradually transitions to magenta on the right. In the middle, white text overlays the background image and a call-to-action is positioned below the copy.

When to use this page layout:

Stock photos are great, but they’re rarely customized for your brand. Adding a gradient with your company’s colors over a stock image can add some much-needed personalization to your webpage. After all, you want your landing page to match the overall look and feel of your website.

Blog Post Layout Design

22. F-Shaped Layout

Image Source

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

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

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 can browse through older posts as well.

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.

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.

When to use this page layout:

If you’re managing a news website or writing about the latest trends and events, 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.

Finding the Perfect Page Layout

Finding the perfect page layout takes some time, but it’s well worth the wait. 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.