33 UNIQUE Website Layouts with Real World Project Examples
If you've ever been building a website and felt stuck on what to do next, then this video is for you. I'm gonna give you some unique layout ideas that you can drop right into your next project, and then I'm gonna show you how to customize them so that they actually fit what you're building. No more guessing, no more copying, just a proven process that helps you build standout websites every single time. Are you ready? Let's go now.
This is the third and final video in a. Series all about website layouts. So if you miss the first two, then go back and watch those. They're gonna give you a foundation of what you need to know about how to build some really great website layouts for any project that you might be working on, and, and listen in those. I cover a lot of design theory and big picture ideas. And those are important, but you still gotta get out there and get inspired and put your ideas into practice.
That's really how you learn how to build the best website layouts. So in this video, I'm actually gonna give you a little BTS or behind the scenes of a couple of projects that I've worked on. Now, this project was for a nonprofit organization called the N 50 Project.
They asked me to come and redo. Their website and also work on some branding and some messaging. So this is how I start every single project. I have a Figma file where I'm just downloading as much of the inspiration that I find that fits with what I'm kind of feeling is gonna work with the project. And I'm putting it on a frame so you can see I've just got a ton of ideas here. And then from these ideas, I'll start to kind of play around with.
Them. So typically what I'll do is I'll have a style scape where I just look and see how are these colors feeling? How are different elements feeling? Are there images that are gonna fit better than other images? How is the typography looking like? Does all of this mesh the way that I'm wanting to? And this kind of gives me a proof of concept without having to go and build out a full website. But here's the key to all this. My search for inspiration didn't start when I started the project. Now I am always looking for website layout.
Inspiration every single day. I'm looking at websites. I'm taking screenshots. I'm putting in in my notes app, adding a link that goes back to the website if I ever want to look at it again. You have to become a student of good web design if your websites are going to stand. Out.
So start building up a library. And now I'm gonna show you an actual library of layouts that you can use on any project that you're working on. And the best news is, is that you can actually download this file and use the wire frames and use the inspiration that I have just kind of gathered for you. In the last few videos, we went over one and two column layouts. But in this video we're gonna go over the big guys, the three, four, and five.
Plus column layouts. And this is where you've got to get really, really streamlined on how you are laying things out. Because at this level of columns, things can start to get really, really messy.
And so let me show you a few scenarios that you can borrow from. Three column layouts are are great for showing three distinct ideas side by side. So you might use them for like comparing different features or even having testimonials or service options, or even a list of payment options or a list of subscription models, right? You've got your entry level model and then you've got your middle tier, and then you've got. Your higher paid tier, they're great for, for breaking up big sections. So if you ever have a section that has just a lot of content, this is gonna be perfect for that type of scenario.
But a a, a real quick warning, you, you want to give each column breathing room. So make sure that they're not so close together that it becomes intimidating for a user to actually engage with. Let's look at a few examples that you can start using on your own websites.
Alright, so here I am in the layout library and you can see our first example is a really cool and really unique one. I love what Square has done. Here you've got a header with a call to action and then some images that are kind of spaced out diagonally. And remember, we, we use these diagonal lines to kind of balance.
The section and then underneath the right and the very far left image, we've, we've got some text now. As you're looking at this, notice that the very first thing that your eye is naturally drawn to is this center image. You can see that in the wire frame, but you can see it even more in the actual website. So let me go here and just kind of show you what this looks like as we scroll. 'cause they've done just a really good job.
Especially with these elements that they have here that just kind of scroll with you and and move. So they've used animation to really help focus people's attention. Now each of the elements in the very middle is the main thing that they are wanting us to look at. And then to the left and to the right, we have those supporting characters. Right.
But our main character is definitely getting. All of the attention. So think about that. If you were to use this type of layout, and you can see how we adjusted it over here on mobile. Notice that I've also added some layouts on the mobile to kind of see how you would, you would space them out as as well. All right, so moving on.
We have another cool option, and this is using three sections that are more like cards. Now remember from our last video cards are. Elements on a webpage that kind of have a whole bunch of stuff together. Think of it like a baseball card or even like a Pokemon card, right? It's got an image, it's got some text or information, and it's got some, some other elements. And I like how they really, clearly, this is symmetrically laid out, just one by one by one, and then also you can see. They've used size and contrast to kind of bring your eyes to different sections.
So we've naturally looking at this first image, and then it comes down here to the first big letter R, which is supposed to represent this person's first name. And the same for, for all of these, and I'm assuming that. This is a, this is our team section, right? So kind of getting to know you a little bit better. Moving on, you've, you've got a really fun way to do the same kind of idea, right? They've got cards all laid out in a row, but we're adding a little bit of rotation to our cards to, to kind of peak some visual interest.
So this is a really cool website. That talks about different ways that you can use gsap, which is an animation library, um, which is one that I love using. You could see how when we start scrolling, they actually have some animation that's going on as well. Now, one of the fun things about the three, four, and five column layouts is on mobile. You can start to lay them out side by side where this becomes scrollable in the middle or swipeable where a user can just kind of swipe over if they want more information, which is a great option if you're trying to limit the amount of space a user has to scroll to. Go to the next section now.
They could roll this out to where it was one on top of the other, on top of the other. But you really have to balance like, how much do I want people to have to work to keep going down to hit that next section of information. And all of that depends on the type of content, the goal of the website and all of that stuff. So just be thinking through how you might use. That in your own projects. Then we have another section that is another Bento box and Bento box are all the rage right now.
We talked about them a little bit in our last video, but again, you've got to be careful that you're really highlighting the things that you want people to focus on in different sections because they can really quickly confuse. The visitor, right? When I look here, I can tell that the first thing that my eyes are drawn to is this brightly colored kind of green limish section. So my hope would be that whoever designed this, that would be their intent, right? They're wanting people to kind of focus on this really colorful box and then use these other elements in the layout as that supporting character. Now look at what is really cool.
I. About this section. They have three columns, but the top row and the bottom row are spaced out differently. And here's where layouts can get really powerful. You don't necessarily have to stick with one type of layout on each section. You can mix and you can match according to what the content needs. So this is where you get to be really creative.
Moving on, we've got some. Other types of card layouts that are similar to ones that we saw up here, but now we're just swapping where the image goes, right? Instead of the image being on top and the text on bottom. We've just swapped that around. And this kind of speaks to how versatile different columns and different layouts can be. You can have the same type of layout done slightly differently, and it looks incredibly different from the other layout that was maybe right above it that used the exact same.
Pattern really fun and really interesting. Then moving on, we've got a layout that uses a good deal of white space, and I really love how creative they've gotten here. There's a lot of asymmetrical feel here as well as a good use of white space. And let's take a peek at this website.
Where you can kind of see it in action. So here's the specific layout that was screenshotted and I, I just love how there's actually a lot of information here, but it doesn't feel intimidating because of all of this white space. Now, something I would be careful with is that this text is, is getting pretty small for the amount that it has. So if I were to come back here. And, and just kind of tweak this a little bit.
My, my only, uh, action would be to make this header bigger. Um, probably try to find a font that's a little more legible. 'cause this is pretty tough to read. And then I would make this. Paragraph texts bigger as well. And then I, as you might have known, I'm not a real big fan of ghost buttons.
And so if you're gonna use a button, make sure that it's not just an outline with text in the middle. Like I, I, I really want people to click on those things. And it's just been proven over and over again that ghost buttons get ignored. So make sure if you've got a button, you're, you're filling in the background of that button with a solid color.
Alright, moving on. We have another mix and match idea with a single column that's center aligned above a three column layout with some images and some some different cards. And you can see just how powerfully, uh, this is laid out and, and causes us to kind of pay attention.
And immediately my eyes go to this black card right here that says, no obligation. You can reserve a car for a short time and pause it. Whenever you like. Now, this is a template from Webflow, but still I think the layout really works no matter what you would be doing when you're trying to draw attention to the fact that, hey, you know, our plans or our services or whatever is adjustable, so this would be a great place for like your money back guarantee, right? You're trying to soothe anxieties and that's something that I would want.
People to focus on as they're kind of scrolling down and looking at things. Now here's a really good example of taking a lot of ideas and laying them out in such a way that it doesn't feel overwhelming to the visitor, right? So we have, uh, before and after from using their. Uh, product.
And you can see like before they were manual bottlenecks for essays and synthesis. I don't even know what all this stuff is. It's very chemistry oriented, which is not my forte versus automated rules-based decision making, right? So. Really quickly, they've done a good job of using icons to say, this is bad and this is good. And look how they even grade out the before and darkened the text for the after. So that's using some of that contrast and layout to help people understand what's happening, and it's just a really powerful way.
To communicate to a user what it is that they are consuming. So this is a great option when you've got a lot of information or you're, you're wanting to portray a lot of ideas because typically a section of a website. We will only have a handful of ideas per section, right? So if you've got a section that's just like, okay, you, you know, here are our features and here's our subscription, uh, base model, and, and here's some testimonies all in the same section, right? Like that becomes super overwhelming. And so you want to be careful that you're limiting the amount of ideas that you're trying to portray on each of the layouts that you are creating. But if there is a scenario where you're like, I just have a lot of ideas that I need to get across in this one section, this would be a fantastic option. And then finally, for our third column layout ideas, we've got the same website, but you can see how they book ended some text with some really nice images.
So my eyes just. Immediately go to this white space in the middle with this text and the images are, are just being used to kinda reinforce what this text is actually saying. You can see that in these images, the people are actually looking towards the text and this is really important.
Anytime. You have something in a layout that you're wanting users to actually pay attention to. You wanna make sure that if there are people in images around them, that all of the people are actually looking at the thing that you're wanting the users to look at.
Because I. People are naturally going to look at what other people are looking at. If you've ever, ever been in like a, a, a big sports game and a whole bunch of people just looked up to the left, you are immediately gonna go, oh, hey, what's up there? And so you can do that with images and you can actually cause people to miss things if you have folks looking away from the types of elements that you're wanting users to engage with. Next up, we've got four column layouts, and these build on the same idea as three columns, but now you've got even more space for the content that you need to put into your website.
So they're, they're perfect for things like blog post or portfolio items or, or even product cards. You'll see these types of layouts on a lot of e-commerce shops when, uh, a, a store has a lot of products that they're trying to sell, but you gotta be really, really careful because four columns can get. Real cluttered really quickly, especially on smaller screens in.
In fact, there aren't a lot of scenarios where using four columns or more on mobile make a lot of sense. So on desktop, just make sure that your spacing and typography are doing the heavy lifting to to make sure that things are laid out correctly. Our first example has done a really good job of taking a lot of different elements and making them spaced out in such a way that it's not super intimidating, but, but notice something here. There's actually not a lot of information, right? Like if you look, there's a header, there's these subheadings and there's a little bit of text, but really.
This could have been done on a smaller or less column layout, but they wanted to use this to add some white space to make it a little less intimidating for folks to engage with. And I feel like they've done a really good job. And, and this brings up the point that even if you have. Four columns.
You don't have to fill out those four columns with everything. Use white space to your advantage to allow users to kind of take a mental breather when it comes to your content. There'll be a, a lot less intimidated by what they're looking at if you can space things out. So, fantastic example. Something to definitely take a peek at because this website is, is honestly one of the best I've seen in a while.
They've done a really good job. Here's a good example of a three column layout as well. Our next example is actually using cards, and this is from a course that someone has created all about using animation on a website and from, uh, VW Lab, which definitely encourage you to go check this out because it's one that I'm actually gonna sign up for all about animations. But in it, he talks about the different sections in his course, and so you can see that like, I don't have to read all of this information to know exactly what he's talking about. Right.
You've got a, a, a number up here, which. People are naturally drawn to numbers on a website, so the more that you can use them, anytime you've got a step process, step one, step two, step three, step four, or if you're trying to outline everything that somebody's gonna get in a package, which is what he's trying to do, he's got 1, 2, 3, 4, advanced timelines, smooth transition, parallax animations, and mouse interactions. I don't have to read.
you can actually move cards along as you would want to interact with them. So let's go here. To the Gillian website, and this is one that we've seen in other examples too. So if I come over here, I can either pull this and see these different cards. So again, this is that great scenario for if you've got a lot of information.
And you don't necessarily want people to have to scroll all the way through it from top to bottom, right? You know that if somebody wants to dig in a little bit deeper, they can, and they'd be willing to kind of interact with it in order to do that. So, fantastic example here. Now, here's our first example of a blog. Layout or in this scenario, they have different events that people can sign up for or, or go to.
So this is a, a good option. Anytime you have a lot of information or a scenario where you've, you've got a lot of. Different types of elements that you want people to have to kind of sift through. So notice what they did here, right? There's some pretty big elements, and the first thing you see is this title here that's got that green limish background, right? So my eyes immediately go here, and then my eyes immediately go to this button down here.
So those are kind of the two most important things that they're wanting. To communicate to the user. So this is like meetups for tech professionals in Canada.
And so, you know, I would say they probably assume that the most important thing is what type of meetup is it? It's the together Toronto. It's the. Sales Toronto, travel Toronto. So these are the different types of events or the different types of, of tech people. And then the next question that people would have, well, what are the event details? And that's what that call to action is.
And you can see everything's just kind of laid out. You've got time, you've got address, you've got how much it is, uh, it, and it's got some breathing room in between. And despite the fact that this is a lot of information. Our next section draws on similar ideas that we've seen before, but you can see it just kinda laid out in a different way. Now this is talking about the features that are included with this, uh, car that they've got or they're promoting, but it could easily be like a blog post layout, or it could easily be like a, a e-commerce.
Items, right, that people are, uh, shopping or, or buying for. So my only encouragement here is to add a little bit more space underneath the text and the next row of images, because these are kind of bumping in together where I wouldn't quite know, is this text for this image or is this text for. This image, and I know that this is a template that people are gonna be using, and so there's a lot to consider here.
You also have to consider if a layout is being created for static content or dynamic content. And this brings up a good point. Static content is content that you have to go in and change manually, either with HTML or you know, within show it it be going into the show IT app and actually changing out the text or out the images.
Dynamic content would be more of like the blog post content stuff that's going to be updated, uh, pretty consistently and have new levels of content all the time. And so you don't necessarily know just how much text each of these section is going to have. And some scenarios it might be three lines of text.
In some scenarios it might just be one or two. And so sometimes when you're laying things out, you've got to think about. The lowest common denominator, like what's the most amount of text that this section is going to have? And then I've gotta lay this out in such a way that it looks good, even if it's completely full or if it's completely empty. And so that takes a little bit of messing around.
It takes some working, but it's definitely something to consider whenever you're working on dynamic content. And then our final example here. In the four column layout has a lot of text on the left hand side, and then some supporting images over here on the right hand side. And you can see this is the only scenario in mobile that we've gotten to where there's more than just two columns. So look, what we've done here is we've kind of split the difference between all of the different columns on, on the mobile.
Side of things. So again, you, you just wanna be careful. You wanna make sure that the purpose of the layout is matching the purpose or the intention of the content, or it gets, it gets pretty overwhelming now, in this scenario. It works because the images aren't really something that we're going to be engaging with.
A ton, right? They're just supporting the texts that we are hoping users will read, impress investors or kickstart your app in just seven days with five custom screens. Right? So that's a powerful statement. It's, it's kind of a lot. I would probably shorten it down a little bit if this were, we're me working on this project, but we really don't need to see anything specific. But the fact that we can see different types of apps and examples. That really supports this idea that APCO is trying to communicate.
And finally, five Com layouts that are all about structure and utility. Like you'll often see them in navigations or footers or sections with just a whole bunch of links and information, right? They help organize a ton of info without turning it in, in complete chaos, right? But, but here's the warning. If you don't group content.
Clearly five columns can turn into visual noise that people just glance over without paying attention to. So keep things grouped, lined and and really focused. Let's look at how these are done really well. So our first example has some headlines, some body texts, a call to action, and then. A whole bunch of images underneath and you can see the inspiration that it came from. And these are the different types of treatments that you can get at this spa.
Right. And they've done a good job of, even though they've got a lot of different ideas. There's not a lot of information, right? So the ideas that they're displaying are, you can get facials, you can get laser and light treatment, you can injectables, microneedling, or weight management, right? But they haven't muddied things up with a lot of text, and that would be the temptation is just to take as much information and just cram it into these sections. As you can, but they've done a good job of really calling what's important and, and throwing away the rest.
And the, the only thing that I would do differently here is make sure that these words are a bit more visible. On top of these images, I've got a lot of visual information going on with the images underneath these words, so I would bring down the opacity on these images. Another option that I've seen work really well is.
That you have like a color overlay on top of the images, and then turn the images black and white. And then once somebody scrolls over them, uh, you know, the, the color changes or it turns into a fully colored image. And then there's a little bit of. A background underneath the word so that it becomes legible. So that would be another great option. In a scenario like this, you can see how you could lay this out on mobile, where the text is saying left aligned, but then you've got two columns for the images.
Now, this next example is actually an accordion, and this is a good example of how you can take different information. And allow users to interact with it according to what they feel like is important to them, right? We don't have all of the information readily available, but if I am more interested in one type of information versus another. I can make that decision as a user. Now I'm going to assume that they, uh, left this first tab open because it's the most important. Now, the only difference that I would make is I would actually change the orientation of these words.
It's, it's really tough to even read what these says. Like I have to pause a little bit just to see what these things are, are saying. Now, I'm assuming that people who engage with this website would. Probably already be familiar with terms like biotech management, but folks who aren't like, that's gonna, that's gonna take a little extra effort. And so I know this is one of those stylistic things that might make a lot of sense, but at minimum I would, once these are clicked on, make the text rotate and, and be horizontally. Oriented.
So that's just a small change, but something that I would do. Now, our next section, it takes a little bit of explaining to understand why I would consider this five columns. 'cause when we're first looking at this, we would say, okay, you've got a column here.
You've got a column here, you've got a column here, you've got a column here that, that would be four columns. But as you dig deeper into these columns, you could see that yeah, there are four columns on the very highest. But as you dig down, each of these columns has another three columns within it. So there's a column for this, A column for this, a column for this, right? And so this is actually not just four, it's not even five. It would be four times three, it would be 12 different columns spaced out over.
This section and in this layout. So, and despite the fact that there are a lot of columns, it's still really easy to kind of read this. They've done a good job with scale and sizing.
They've done a good job with, uh, the color contrast. You've got darker headers down here and a lighter one up top. I am not a hundred percent sure that this text right here is actually necessary because it seems like they're kind of saying the same thing. Uh, so if I were to come through and work on this, I would actually get rid of this so there's even less information and, and, and have just this header as the main things that people are seeing. And I would probably make this arrow a little bit bigger because if I'm just scrolling through, either that's gonna be tough to click on or I'm going.
To miss it all together. So something to consider if you were to ever create a column like this. Okay. Our next section, uh, also plays on a little bit of asymmetry. Now let's open this up so you can just kind of see what it looks like.
Uh, Ariel's designer's done a fantastic job. Maybe she's done it herself, um, but you know. Look at just how stunning this layout is.
Like it just kind of flows. It's almost like artwork, right? My only critique is that this text is pretty small and I'm gonna have to be pretty motivated to like really read this stuff. So this would be a scenario where the layout looks beautiful. But it's probably a little bit too much information in just one section. So I would either make this section bigger, uh, or I would break this out.
So I would take these columns right here, bring it all the way up top, make it one column. And then I wanna bring these all the way over, scale up the text and make these images a little bit bigger and bring them more towards the center as well. So that way it's a little bit easier to digest and a little bit easier to kind of work through. But it's a very creative layout. They've done a really cool job with this iconography that's kind of, uh, uh, reassuring them and what it's talking about, like clarity over chaos. And then you see you've got these.
Three circles that are kind of connected together. So just a, a lot of cool brand work here. I think I would just work a little bit on making things a little bit more legible.
And you can see they've done that on the, on the header here, there's a lot of words to read and it's also in a font that might be a little bit tough to kind of scan and, and get, uh, a clear idea of, of what it is that they're saying. So. Moving on.
Um, we've got a layout that is for an editorial website. So this is the Huffington Post layout. And, and this is where you can see five plus columns really start to shine, right? So this is where you've got a lot of.
Different types of information that people can come and look through and pick on what interests them the most. Now, this is a scenario where when somebody comes to the Huffington Post, in their brain, they're already thinking, I'm gonna have to really pay attention to find the information that I am wanting to find. And even.
Huffington Post doesn't care if you click on one article or another. They just want you to find the thing that looks most enticing and and click on that. Most websites are not gonna have that goal, right? They're gonna have one specific goal in mind. That's to either sign up for a lead magnet or.
Buy a product or maybe sign up for a service. This is like, uh, like shooting, you know, birdshot where it's just like you're, you're spraying stuff on a wall and you're seeing what sticks, right? And so this is a great scenario for a layout like this where people are probably gonna be more motivated by the images, right? So we see lil Nas X, like if somebody's interested in him, then they're gonna read Lil Nas X hospitalized for mysterious reason, right? That's a. Great very click bait title. And so that's gonna cause me to be a little more interested. Home alone. Two director fears, what might happen if he removes Trump cameo, right? Like all of this stuff, uh, makes it to where even though it's very small information, people can still pick out different things.
And be motivated to, to click. Now, I'm not encouraging you to put clickbait on your websites. I'm just trying to give you scenarios where layouts like this might work.
So if you're ever working with a client who has a lot of articles, maybe it's a, a news-based client, like this is a great layout to work with. Our final example is actually of a footer, and you can see I drew inspiration from this e-commerce website. So you can see how they've done a good job of grouping the information and then they've used grids to kind of help users know exactly where to look. So this is a scenario where even not using grids or, or columns, ethereally, right, where you're just like, they're there. You just can't. See 'em? No.
We're putting the grids on there to help people and users know where to look and, and draw their attention to. So this is a great example of how to use five plus columns. I think they have 1, 2, 3, 4, 5, 6, 6 different columns that they're using to organize all of this information. Well, that, that is it my friends.
Those are most of the scenarios that you would use for any project that you would ever be working on. Hardly ever do you get above a six column layout. And so you have all the tools in your toolkit to go out and start building some really standout websites.
So here's my encouragement to you. Take this file, take this Figma file. Download it, grab it. It's 100% for free, and start using them on your own project. Start adding your own inspiration in this file so that when you do have a project, you're not having to really rush to try to find the right layout for the client that you're trying to work on. No, you've just got them all there and you don't have to start.
From scratch. Well, hey, I hope this video was helpful for you. If it was, make sure that you like and subscribe so you don't miss any other episodes that are coming out in the real near future. And we have a membership program here at the Self-Made Web Designer. You can go to our membership page and see how to get more involved with that.
It really helps the channel and you also get some kickbacks just for signing up.
2025-05-16 15:17
