The Building Blocks of a Unique Website – Step-By-Step

We're diving right into the basic Building blocks of any great website now I've made other videos in the past about Different designs and layouts and how to Spice up your websites and while all of These videos are really really useful This video right here is going to strip This down to its most simple form and so Whether you are a brand new web designer Or an experienced web designer this is Going to help you piece together all of These building blocks to create the Perfect website this is going to work on Any web page any page of your website is Going to be improved and look much much Better by following these building Blocks so what you're going to see here Is I have my basic wireframe laid out And what we are not going to be covering In this video is the hero section now I've got another video right here which Is titled 18 hero designs and layouts That you can steal so if you're looking For ways to improve your hero sections I Would recommend clicking this video I'll Link it right here at the top and also Down in the video description so what We're going to be doing is skipping over The hero section and the nav and Focusing mostly on this big Yellow Block Which is the content of our website now I've simplified this down to just a Single block but what you know and what I know is that there is a ton that goes

Into this this content block is made up Of several different sections and Components and layouts and designs and So much has to be considered when Creating the content portion of your web Page this is the meat and potatoes of Your website this is where you're going To explain what your service does the Benefits of your service all of the Features everything that you want people To understand about what you're selling On your website needs to be conveyed in This content section now if you're Looking for additional style and layout Ideas four sections I've also got this Video which is 11 section layouts that You can steal this is going to give you Different ideas on how to just shake Things up and make your layouts not look So basic or templatized so if you're Interested in this video I would Recommend waiting till the end of our Current video right now and then Clicking this I'll add this at the end Of the video and also in the video Description but what I've been seeing a Lot with web designs is that this whole Content section is normally just made up Of these very basic layouts it's a left Right right left layout and it goes back And forth back and forth and then we get Down to our footer and there's nothing Really special or unique about the Building blocks of this website and

That's not to say that a website like This can't work in fact looking at a lot Of my personal websites I fall into this Trap of having everything be left right Right left left right and then it's over Right and there's nothing unique about This website and so scrolling over here What I want you to be able to visualize Is that every different section inside Of this body portion of your of your web Page can be different it has a different Purpose it has different types of Content and therefore the way that you Approach each section is going to be Completely different so a few examples Of these are you could have a section That has logos in it you could have a Standard content section you could have A social proof section a call to action Section an articles section where this Is going to show different articles from Your blog for example you could have an FAQ section and the list goes on and on And so we need to ask ourselves how are We going to approach every individual Section within the content of our web Page to make sure that it's engaging That it looks nice that it has some sort Of cohesive design but also that it's Not following the exact same layout Every single time and so what I'm going To do here is slide this over and I'm Going to show you a couple different Options or variations of layouts that

You could use for these different Sections so what you'll often see is the Logo section will just have a horizontal Line of logos your content section is Going to be that left right layout with Two columns social proof you might find A three column layout sometimes this Will be a grid where you have two Different rows this is a great way to Display reviews you'll have your call The action section which typically will Look something like this it will have a Header a sub header and then a button Oftentimes this works really well when You have this inside of some sort of Container or div that has a different Colored background to make this stand Out inside your articles you might have Some sort of card designs typically this Is going to be in a three column maybe a Four or a two column at times but this Is the most standard that you're going To see and then finally you've got your FAQ section which is typically best laid Out in some sort of drop downs so you Don't take up too much space now if I Slide this over even further you'll see That there are different ways to shake Up these basic content sections so the Logos you might have some sort of header Right here and then move the logos over To the side or you could possibly even Put them in multiple rows you could Reverse your basic content sections to

More of a right left layout you can move Social proof from being a lot of Different reviews and multiple columns On rows to just a single large Testimonial this is a great way way to Give a little bit of variation to these Types of blocks your call to action Section could become more of a narrow Wider longer call to action your Articles you could switch this up into a Grid layout where you have one article That is that has particular Focus right This is the most important one so it's The largest and then we have a second And a third that are secondary articles Off to the side and then your drop down Section could look something like this It could be in two columns as well so You can see how by doing this you can Add a little bit of variation to what People are used to seeing without Getting too crazy without having to use Any wild animations or movement or even Imagery just shaking up the layouts can Make these building blocks a lot more Effective now the main word that I want To focus on in this video is variation Because what I have found is the more Variation you have within a website and Within the sections of your web page the More engaging it's going to be so if you Have every single section A two column Left Right layout over and over and over Again people are going to get bored of

It they're going to lose track of where They are it's going to feel like they're Reading the same thing over and over and Over again so there are multiple Different ways that we can add variation To our sections the first is just by the Type of content and that's what we just Talked about right you've got basic Content blogs but you've also got social Proof from call to action all these Different things but the other way that You can add variation is adjusting the Sizes of your sections so rather than Every section just being the height of The viewport some might be shorter some Might be taller so a good example of This is over here your logo section of Course is going to be much narrower you Don't want to take up the entire Viewport just showing client logos right And so adding that variation between Some large some smaller is going to make A big difference and it's going to shake Things up now the other way that you can Shake things up and add a little Variation is by change the number of Columns that you have so some sections Might be a single column some might be Two three four columns sometimes you Might want to shake up the amount of Rows and use grids and different things You also can use maybe two columns but Have them be completely different sizes This type of variation adds a level of

Expertise that oftentimes gets missed And people are going to notice these Things they may may not be able to Pinpoint exactly what it is but they're Going to say man this website just feels A little bit more polished a little bit More professional now the other way that You can add variation is by your Alignment don't be afraid to get a Little bit more creative with alignment Don't have everything be left aligned or Center Line sometimes you want things to Be aligned to the right or maybe left Aligned but pushed to the center using This type of variation is again going to Just keep people's eyes flowing down the Page yes we want to keep it simple we Don't want to make them work too hard But also we don't want to put them to Sleep by having everything feel the same The other way we can shake things up is By element type and so not every section Needs to have a header a sub header and An image right you can use different Text blocks div blocks buttons images Videos sliders drop downs forms Animations light boxes tabs Maps there Are so many different things that you Can use inside your website to make Every individual section feel exciting And new and then the final thing that You can do is shake things up and add Variation by changing the background Color so yes I do typically gear more

Towards a white space website with white Backgrounds I know that currently dark Mode or or dark background websites are Really trendy but this doesn't mean that It has to be all one or all the other You can shake this up and maybe have Your hero section be dark mode and then It goes to a white space background and Then you have a couple sections that Have a lighter background color and then Some that have your darker brand color Don't be afraid to add variation in this Way as well so let's go down here to an Example and show you what this is going To look like so again right here on the Left is our basic example this is what We see most of the time left right right Left over and over and over again no Variation but if I go over here you can See all the different ways that I'm Adding variation so again reminding you That the types of variation are the type Of content the size of the sections the Number of columns the alignment element Types and background color so I've got My logo section here with a dark Background and then I'm jumping right to A three column layout yes this is a Pretty standard layout but then I Immediately am hopping down to a two Column layout and rather than having This be a basic content and image layout This is a tab section where you click on One Tab and it's going to change the

Image on the right so we're adding a Little bit of variation something that They can click and engage them and then We're coming down to a one column Center Aligned layout so we've got a header and Then we've got something like a video or An interactive image something to that Effect and then we're going down to our Testimonial section this is left aligned But it's one large testimonial it's got A dark background and then we've got a Background color change here we're going To a lighter brand color and then we've Got more of our standard content Sections I'm not saying that you can't Use these left right right left layouts Just don't overuse them right and then We're coming down here to our call to Action section again we're going Center Aligned we're changing the color of the Background to more of a dark mode feel And then we're coming down here to our FAQ section which again this is a lot Longer we've got a lot of questions that We're answering we're using a standard Drop down and then we've got more Testimonials in a three by two grid Again this is changing sizes elements The look of things and then we come down Here to our three cards which are Illustrating our blog articles that People can click through to so if I zoom Out you can see all the difference of Colors and sizing and columns and

Alignments and as you switch things up It's just going to keep people more Interacted and more engaged in what it Is that you're laying out in terms of Content and this makes a huge huge Difference when piecing together the Perfect web page now again if you're Looking for more information and more Education on how to design these Sections how to make them look nice I've Got a ton of videos linked down in the Video description and if you learned Anything or feel inspired by this video Hit that subscribe button because I've Got new videos like this one coming out Every single day now the last thing that I want to leave you with is this quote By William Cowper that says variety is The very spice of life that gives it all Its flavor remember that as you add more Variety to your designs your layouts Your sections it's going to spice up Your website it's going to take you to That next level and help you stand out From other designers and other templates So again if you enjoyed this video hit That like button thanks for watching all The way till the end and we will catch You in the next video

Ace The Funnel Builder
Curated by

Namaste~ My name is Ace and I found these contents SUPA~ Valuable! I apologize for the quality of the transcript... (In case you are curious I used YT EVO plugin to automatically pull these amazing contents) Enjoy!

Get Lifetime Access To Our Entire Library Of Funnel And Design Templates

For A Low One-Time Price – All Your Marketing Sorted, Forever!