This is video one of three in a series I'm calling a practical guide to website page layouts. This video is targeted at web designers or anyone editing a website who wants to turn text content into a basic but attractive and effective layout on a website. In this video we'll cover sections which overall is a way of breaking down a website page into smaller parts to help you better understand how to layout website pages easier and how to make a more effective website. Navigations and footers are their own part of the site, which you can learn about in the respective videos, which I'll link in the description.
But in this series, we'll focus on everything in between those, the page layouts. If you want to be or are a general web designer, then these are the kinds of sites that you'd be making, and that this video is for. In the first video, this one, we'll talk about the idea of sections and breaking up a page into smaller parts. In the second video, we'll take a closer look at the order of those sections and why it's important. And the third and final video, we will actually be laying out content into those sections with some tips along the way.
With that being said, let's jump in and start first with a more holistic view of a website. A well-designed website page is made up of sections. You can also call these rows if you'd like, but no matter what you call them, they are usually visually distinct from each other and are usually vertically stacked. We'll talk about horizontally stacked later.
Each section is one idea or content subject. Take a look at this website, woldae.com. On its homepage, they have their sections laid out as hero section to introduce the website, a little about section about the company, expertise, a meet their team section a project section a blog and a call to action all these sections are visually distinct from each other where you can easily tell where they begin and end with each row containing one main idea the reason why you should only have one content subject or idea for each row is because it provides the optimal user experience by making the content easily consumable and organized and that's why this website's designed is so good and they've achieved it this through the use of making their sections visually distinct from each other, containing one idea each.
I'm sure you can agree that it would be strange to have a layout like this, where in the left column there are blog posts, and the right column there are services. This is an awkward layout to consume as a user because intuitively it doesn't flow right, because there's no hierarchy going on. That's what happens when you have two ideas in one.
section. It causes confusion. Designing and organizing content into sections is very easy to visualize on a homepage where you briefly talk about and link to other areas of your website like what I recommend you do as per my homepage layout video. which I'll link in the description.
But this also applies to sub pages too. Check out this about page from greenbridge.co.uk. They also use visually distinct sections. And I'm talking about distinct when they're actually above or below the section, but they've split it up into sections and their content on their page is very organized because of it.
They have a title section, how it started, commitment to quality, industry leading repair times, privacy and security, and environmental impact, who we work with, and a call to action. All of their sections are visually distinct from each other above and below it. What you'll find is that breaking pages into sections works for any page needing a layout, whether it's a homepage, about page, service page, contact page, and more. This can be the foundation to make websites look organized and professional. Of course, you can have pages with this kind of layout too, which is mostly one section with a dump of content, which is what we're going to do today.
which is totally fine of course. In this case you are working with pretty much one section, and all the content on the page should definitely be one idea unless you're using elements to break it up. One general rule that I have that I recommend everyone follow is that every row should also have a heading. This heading should make it abundantly clear what the section is about.
This helps the user experience significantly. You should not expect users to look at your section and have to read through all the content just to get an idea of whether or not it's important to them. If you have a heading, you allow users to easily scan or skim the content, making it easy for them to know what they are interested in looking at on your site. This leads to the user, overall, having to think less, which should always be a goal of any user experience decision. Take a look at this website, thetorontoplumber.ca.
It's a pretty outdated site, but 12 years later it still works. And I think this because of the way they organized it into sections. They got a hero section, services, reasons to choose them, credibility markers, articles, and social media. With their headings, they're not trying to be catchy or marketable.
They're just informative and useful. But look at what happens when you remove these helpful headings. It's a mess.
Your eyes end up sporadically looking around everywhere, not knowing where to start. You might even end up scrolling to look for something quickly to consume and never find anything because the website is pressuring you to read every word start to finish. in order.
Headings are required if you want a good user experience. Here's another tip. If you want the best user experience possible for your headings, you'll want to avoid using a heading like this from this plastic surgery website.
This section. We are the leading plastic surgery center in the world. I would say that this heading isn't good because they tried to be marketable instead of describing what the section is about.
This leads to a poor user experience because the user can't scan the heading to know what the content is about without having to read it all first. In this case, the heading should be something like our surgical procedures. Now, this is a Webflow template, so this content isn't real, but headings like this do exist out there.
And so you should be using headings that are descriptive and to the point. Just from the heading, the user should have an idea of what the section is about. This makes it easy as possible for the user to find what they're looking for.
So how do you make these sections visually distinct from other ones above and below it? The simple answer is to either use a background color, background images, spacing, or if you want to be special you can use some kind of divider. Background colors are my favorite way to make sections distinct. Look at my website. Mostly this background is dark gray and then light gray, white, light gray, white, light gray.
white, and then dark gray again. Here's an example of some background images to break up sections instead. And lastly, spacing.
Here's this website where their blog section has no color change, they just used an adequate amount of spacing to make that distinction. One other thing worth mentioning is that you can horizontally stack sections, not just vertically. And you've definitely seen them before.
Look at this blog article layout. There's two sections here, the main content and the sidebar. There's two different ideas.
One is the content for the main blog article, and one contains usually salesy, markety things or some helpful links. When it comes to horizontal sections, usually two is the limit. Three can get confusing almost right away. And it only works on the blog layout because the first section of the blog article is the primary section, when the sidebar is a secondary section.
This creates an obvious hierarchy for the user, making it easy to scan. Here's an example of two horizontal sections with equal hierarchy. This is a hiring agency whose users would likely either be looking for a job or be interested in hiring someone.
On paper this layout makes sense from a user experience point of view, where you have two sections split up side by side to get the user where they want to be right away. But in practice it's confusing to look at. I don't know where to look.
Do I start reading the first one or the second one? Because there's no hierarchy and not one of them stands out as more important, I'm confused as a user to what to look at to scan first. So if you're going to have two or more sections displayed horizontally somehow, you're going to want to create some sort of hierarchy.
This, for lack of a better word, creates a better flow for the user. One caveat that's worth mentioning is culture can have an impact on this. But culture differences is a bit beyond my skill set, so I won't say anything else on it. To summarize this video, Page layouts are made up of sections. Each section should be visually distinct from the one above and below it.
Each section should have a clear heading. And sections can be horizontally aligned, but no more than two, and only if there's a sense of hierarchy or visual weight going on. This is the end of part one. Check the description for the other parts. I'm putting all this content out there for free, so now for me to pay the bills.
If you want to support me on Patreon, link in the description. If you want to get your website critiqued by me, link in the description. If you want to be a better web designer or developer, subscribe for more videos.