Thank you! I'm going to share this video with a prospective client because her current homepage is incredibly busy, lacks direction, and is just overall overwhelming.
@@chrisdaniel3991 There was a fairly recent video of Payton explaining the new direction of his business towards the content creation space here in RUclips as well as his community and focusing on his semflow plugin. With that, he mentioned that he won't be actively trying to acquire new customers and would be more selective of them and make sure that they use Webflow for building and maintaining their websites. So, in short neither anymore.
Please as a professional don’t refer to other professionals for professional reference as a guideline. This is meant to help because this Formular works as do others.And it also undermines your insecurities as a professional. Proudly use the informations given without referring to someone else. Just my opinion. Hope no one gets offended.
Less than 7% of site visitors are on desktop, yet somehow 99% of web design content is based on desktop design... Not discounting your video, this content strategy is still applicable to mobile. I just wish more people were offering more practical examples for mobile CRO strategies.
The initial statement is not true, this heavily depends on type of customer and sector. I see sectors where its mainly desktop visitors. Also when looking at CVR, there is often a higher % of sales coming from desktop / tablet.
Took a look at our recent company visits and most are using desktops. It really depends with your target audience. We run ads for a certain niche and the reports show majority are still on a desktop/laptop. You may be making an assumption because folks are often on their phones but mostly they are on social media.
This video has helped me immensely. I am a programmer and web developer but I have always just worked after someone else’s design and structure, and made changes here and there. This time I built the entire site myself, including design and structure. Much appreciated.
How have you only got 42k Subscribers? Your content is punchy, direct and loaded with all the relevant information. No fluff, no filler, just killer. Keep creating great videors, Payton 👍👍👍
🎯 Key Takeaways for quick navigation: 00:00 🏠 Homepage layout breakdown: Learn the key elements and their importance for an effective homepage design. 01:09 📌 Simplified navigation: Keep navigation simple with logo, links, and call to action; avoid overwhelming with too many links. 02:04 🌟 Hero section: Make it engaging and impactful, conveying what you do, why, and a strong call to action. 03:27 💡 Value proposition: Craft a concise and compelling main header and supporting subtext for your hero section. 03:54 📢 Standout call to action: Use a contrasting color for the call to action button; add social proof for credibility. 04:21 🔑 Keyword optimization: Incorporate essential keywords effectively in your header text for SEO. 05:02 🖼️ Engaging images or videos: Use custom graphics, images of your product/service, or animations for a trustworthy feel. 06:12 📏 Above-the-fold optimization: Utilize the visible screen space effectively to encourage scrolling. 07:07 ➡️ Scroll encouragement: Employ design elements like arrows, animations, or flowing layouts to entice users to scroll down. 08:19 🌐 Section layouts: Experiment with different layouts beyond the basic left-right alignment for more engaging content sections. 09:29 📋 Break up content: Use paragraph breaks,bullets, colors, and emojis to make content easily scannable and engaging. 11:34 🌟 Social proof: Display reviews and testimonials with noteworthy logos and concise, impactful content. 13:53 📞 Main call to action: Reinforce the call to action, as users should be primed to take action by this point. 14:48 🔍 FAQ section: Provide concise answers to common questions, easing any remaining doubts or concerns. 15:30 📢 Footer organization: Organize navigation links and essential information in a clear, categorized footer design. Made with HARPA AI
This was such a phenomenal video!! So simple but so so important and helpful. Sometimes I get stuck on a page and just don’t know how to organize it. I can make it as “cute” as possible, but I’d rather it convert than just be “cute”.
I was surprised to laarn how pretty ugly sites can perform quite well, actually. The reason being, presumably, that common visitor does not really appreciate the finesse and genius ideas behind the concept as soon as he finds what he is seeking for. People have about as much understanding as any SMB client, who probably would not oppose 1990s blinking gifs to highligg ... just everything.
Simply WOW!! I’m an SEO guy not a designer and this video is perfect for me👍👍 for some strange reason I have always struggled to come up with a simple but great homepage for my own site. Ranking for keywords is my bread and butter but the design part ain’t so you have just helped me fix that part 👍
As someone who knows nothing about SEO but is going to build a simple website soon for my life coaching business, could you help me avoid wasting my time and point me in a great direction to start?
Glad I came across your channel. You have a great grasp of these concepts, and after 15 years of designing, I'm learning a ton from you already. Much appreciated!
I would love a follow up to the hero section layouts video , where you show or breakdown layouts for below the fold that work with 18 different hero layouts from the previous video
Just my two cents to add: for a longer blocks I tend to use a "show more" button. That is, if I have a gallery of 32 images or x-many partner logos, I may not want to be showing them all as they would greatly extend the entire page (especially on mobile) and ;et`s admit, too much scrolling sucks. So I only display like 1 or 2 rows of them or the most prominent partners, what have you, along with a "Show more" button, which slidetoggles the rest (or just another two rows), just as some eshops have it in product search results. Essentially, you may use this with any nonessential content or to add more detail, similarly to the FAQ accordion.
Mobile-first design is critical in today's digital scene, as mobile traffic continues to increase. Designing with mobile consumers in mind means that your site is optimized for performance across all devices.
Thank you dear sir for giving detail(s) as to how a home page can be made. However, if a home page is made exactly this way, would it be seen and function well for a cell phone? Thanks in advance. ... GOD Bless!!!
About h1 in hero section - keep in mind that google is working on treatment THE BIGGEST TEXT on the website as h1, even if h1 is some other smaller text.
Payton, 6:20, you mention something about the customer not knowing that there is more content if the hero section is set to 100vh? This is not only WRONG but this is the current STANDARD for 2023 web design trends.
Thanks for that! 10/10. Btw, I wanted to know this: so I was editting service contract and faced with this section and I wanted to know your opinion about it: Intellectual Property Rights: Design Agency retains all right, title, and interest in and to any work product created by Design Agency in connection with this Agreement, including all intellectual property rights. Client shall have a limited, non-exclusive, non-transferable license to use such work product solely for its internal business purposes.
hi Payton, this video is awesome, is it possible for you to make a video for new site, or new launch and pre launch as there is no- social proof for this kind of pages, what can we do if social proof not available? any other wonderful options, please let us know, your help is appreciated.
The second call to action section on the bottom is not necessary. Just have the actual action there. Have the product with a purchase button or a contact form. No point having the user take another step by clicking the CTA button. Or do you have a good reason for the customer having to click another button?
Is learning web design learning for freelancing still worth it despite the existence of ai tools which can create websites with just a sing promt text Will ai replace web designers? I'm really confused
What is the style of illustration graphics called that is used in the hero section and elsewhere? The ones with the figures pointing at screens. I like those.
Tried to watch the whole video, but the background music is absolutely annoying - every minute or so there is this sound that is bothering (like at 4:47)
Thanks for this Clerk! New Subscriber, definately staying. Question please : What's the pixel height you recommend for the main hero section so the content below can also bleed into the viewport?
Is a video in the hero really such a great idea? More loading time on initial page load and it might show up later than the content which could lead to distraction and disturb the users eye-pattern
Also I am not sure if people need content to show below the hero to be scrolling. Scrolling got so normal now, you don't think about "oh should I scroll now or no?" you just scroll if the hero catches your attention and interest
@@MrInsider33 videos in the hero have converted super well for me. Yes, they can negatively effect load times but it hasn’t been detrimental at all. And as for the content below the hero, it’s not as much getting them to know they need to scroll as it is getting them to want to scroll. Giving them a reason ya know? I maybe didn’t do the best job of wording this. Anyways, I appreciate your comment/ideas! Thanks for watching
Thank you for this! I have just learnt figma and webflow and I'm about to start freelancing, this is just what I need. Please can you share the figma file.
You sound trustworthy and you have a good approach - unfortunately there is always the undertone of you guys telling us just enough to be drawn to hire you for money most of us can't afford so it is evident that a lot of information is missing therefore rendering the intent of this video useless. :( Sad! (lol)
Great content. I have only one question, my native language is not English and I see that you use "real estate" to refer to some parts and I do not understand the reason, I understand real estate as something related to house markets ...
It is also used as a figure of speech in American English. So in this case, he used "real estate" to mean "space". So, if he were to say "You have a lot of real estate in the hero section," he means, you have a lot of space in the hero section. Hope this helps.
I don't think i want to be a web designer but i want to design well my web site. Or pay someone else. Do you have themes or templates that i can use since you show many layouts..where do i get them? ty
why use hero section if vast majority don't scroll? couldn't the actual action be there already instead of CTA, which is a link to somewhere further anyways
Also, I would be curious to know what content block max-width you tend to use. (An equivalent of) 1200px? 1366? 1600? Obviously, a text paragraph 1600px wide is a fail, but conversely with 1200px width it is more challenging to use 3 or 4 boxes (with main icons and features) in a row. What say you? Where is your sweetspot?
Whatever that background noise you have there, that is the most annoying sound I've ever heard in my life. The call to action was to hit my mute button.
Thank you! I'm going to share this video with a prospective client because her current homepage is incredibly busy, lacks direction, and is just overall overwhelming.
Glad you found it helpful
Just a tip, she might find it more impressive if you do this level of analysis on her website instead
@@PaytonClarkSmith Which do you target more often? businesses without websites or businesses that need a website revamp and why?
@@chrisdaniel3991 There was a fairly recent video of Payton explaining the new direction of his business towards the content creation space here in RUclips as well as his community and focusing on his semflow plugin. With that, he mentioned that he won't be actively trying to acquire new customers and would be more selective of them and make sure that they use Webflow for building and maintaining their websites. So, in short neither anymore.
Please as a professional don’t refer to other professionals for professional reference as a guideline. This is meant to help because this Formular works as do others.And it also undermines your insecurities as a professional. Proudly use the informations given without referring to someone else. Just my opinion. Hope no one gets offended.
Yes no music needed. We focus on what you say in the video.
Less than 7% of site visitors are on desktop, yet somehow 99% of web design content is based on desktop design... Not discounting your video, this content strategy is still applicable to mobile. I just wish more people were offering more practical examples for mobile CRO strategies.
Probably because development only happens on desktop. XD I understand what you're saying though.
The initial statement is not true, this heavily depends on type of customer and sector. I see sectors where its mainly desktop visitors. Also when looking at CVR, there is often a higher % of sales coming from desktop / tablet.
Took a look at our recent company visits and most are using desktops. It really depends with your target audience. We run ads for a certain niche and the reports show majority are still on a desktop/laptop. You may be making an assumption because folks are often on their phones but mostly they are on social media.
Same question ! Please make mobile overview
@pokefangOfficial Suggest chamal name 🎉
This video has helped me immensely. I am a programmer and web developer but I have always just worked after someone else’s design and structure, and made changes here and there. This time I built the entire site myself, including design and structure. Much appreciated.
Link?
How have you only got 42k Subscribers?
Your content is punchy, direct and loaded with all the relevant information. No fluff, no filler, just killer.
Keep creating great videors, Payton 👍👍👍
Incredibly effective video and layout. I've just swapped a pic for our own video in our hero section and received two conversions. In five hours.
🎯 Key Takeaways for quick navigation:
00:00 🏠 Homepage layout breakdown: Learn the key elements and their importance for an effective homepage design.
01:09 📌 Simplified navigation: Keep navigation simple with logo, links, and call to action; avoid overwhelming with too many links.
02:04 🌟 Hero section: Make it engaging and impactful, conveying what you do, why, and a strong call to action.
03:27 💡 Value proposition: Craft a concise and compelling main header and supporting subtext for your hero section.
03:54 📢 Standout call to action: Use a contrasting color for the call to action button; add social proof for credibility.
04:21 🔑 Keyword optimization: Incorporate essential keywords effectively in your header text for SEO.
05:02 🖼️ Engaging images or videos: Use custom graphics, images of your product/service, or animations for a trustworthy feel.
06:12 📏 Above-the-fold optimization: Utilize the visible screen space effectively to encourage scrolling.
07:07 ➡️ Scroll encouragement: Employ design elements like arrows, animations, or flowing layouts to entice users to scroll down.
08:19 🌐 Section layouts: Experiment with different layouts beyond the basic left-right alignment for more engaging content sections.
09:29 📋 Break up content: Use paragraph breaks,bullets, colors, and emojis to make content easily scannable and engaging.
11:34 🌟 Social proof: Display reviews and testimonials with noteworthy logos and concise, impactful content.
13:53 📞 Main call to action: Reinforce the call to action, as users should be primed to take action by this point.
14:48 🔍 FAQ section: Provide concise answers to common questions, easing any remaining doubts or concerns.
15:30 📢 Footer organization: Organize navigation links and essential information in a clear, categorized footer design.
Made with HARPA AI
This was such a phenomenal video!! So simple but so so important and helpful. Sometimes I get stuck on a page and just don’t know how to organize it. I can make it as “cute” as possible, but I’d rather it convert than just be “cute”.
I was surprised to laarn how pretty ugly sites can perform quite well, actually. The reason being, presumably, that common visitor does not really appreciate the finesse and genius ideas behind the concept as soon as he finds what he is seeking for. People have about as much understanding as any SMB client, who probably would not oppose 1990s blinking gifs to highligg ... just everything.
Simply WOW!! I’m an SEO guy not a designer and this video is perfect for me👍👍 for some strange reason I have always struggled to come up with a simple but great homepage for my own site. Ranking for keywords is my bread and butter but the design part ain’t so you have just helped me fix that part 👍
As someone who knows nothing about SEO but is going to build a simple website soon for my life coaching business, could you help me avoid wasting my time and point me in a great direction to start?
@@timandmonica if I can help yes of course 👍 I love helping people
@@darndarn99 Great! Thank you. How can we connect? My email is the first 3 letters of my first name and the first 3 of my last. I use gmail.
@@timandmonica hi Timothy, I just emailed you, hope i got it correct ?
Glad I came across your channel. You have a great grasp of these concepts, and after 15 years of designing, I'm learning a ton from you already. Much appreciated!
Me too, after 16 years of designing.
so much value in such a short video! Thank you SO Much!
I would love a follow up to the hero section layouts video , where you show or breakdown layouts for below the fold that work with 18 different hero layouts from the previous video
Good idea, ill see what I can do
Your each and every video is so much informative.
Exactly what I've been looking for.
Would love to see mobile/responsive version of this! Great content btw!
Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!
Thank you, Payton! I learned something today!
you are amazing at explaining! so much value packed into 15 minutes is insane
Such a great work!!! Awesome designer. I’m having so much learn from your videos
Great video! Everyone should see this.
Perfect video on explaining homepage design. Your recent videos on hero layout and section layout are also extremely helpful. Thanks!
Amazing content as always, Payton! Thanks a lot for the value you put out 😊
Thanks Kim🙏🏻
Thank you for this video sir, it helps me a lot with my web design projects.
Great Teacher and Professional. Pull UP and Suscribed.
Really appreciate the work you are doing on this channel ! Thanks !
Thank you very much from making this video, this really helps me with designing my own pages. And your other videos allso are very helpful 🫱
Loved this video! really useful. thanks a lot!
I always enjoy your content. Great job
thank you so much. that was super helpful!
You should have way more subscribers to the channel!
I have a lot to learn from you. Thanks a lot!
Valuable information, clearly stated, well done. ♥Thanks so much ♥ 👍👍👍👍👍
Unfortunate distracting, annoying, no value added background "music" 👎
Thanks Keith!
Thank yo so much , please make a video on making body sections & body sections layout
Just my two cents to add: for a longer blocks I tend to use a "show more" button. That is, if I have a gallery of 32 images or x-many partner logos, I may not want to be showing them all as they would greatly extend the entire page (especially on mobile) and ;et`s admit, too much scrolling sucks. So I only display like 1 or 2 rows of them or the most prominent partners, what have you, along with a "Show more" button, which slidetoggles the rest (or just another two rows), just as some eshops have it in product search results. Essentially, you may use this with any nonessential content or to add more detail, similarly to the FAQ accordion.
Your content is gold!
Mobile-first design is critical in today's digital scene, as mobile traffic continues to increase. Designing with mobile consumers in mind means that your site is optimized for performance across all devices.
Great video, but the background music is a bit too loud
Thank you dear sir for giving detail(s) as to how a home page can be made. However, if a home page is made exactly this way, would it be seen and function well for a cell phone? Thanks in advance. ... GOD Bless!!!
About h1 in hero section - keep in mind that google is working on treatment THE BIGGEST TEXT on the website as h1, even if h1 is some other smaller text.
Payton, 6:20, you mention something about the customer not knowing that there is more content if the hero section is set to 100vh? This is not only WRONG but this is the current STANDARD for 2023 web design trends.
This helped a lot.
Thanks, pretty solid .
Thanks for that! 10/10. Btw, I wanted to know this: so I was editting service contract and faced with this section and I wanted to know your opinion about it:
Intellectual Property Rights:
Design Agency retains all right, title, and interest in and to any work product created by Design Agency in connection with this Agreement, including all intellectual property rights. Client shall have a limited, non-exclusive, non-transferable license to use such work product solely for its internal business purposes.
much appreciate that amazing vid!❤
wanted to ask u what would you say is the best way to build landing pages for an offer that im running ads for
Nice information but why is music playing in background?
For those who have to wear headphones to view it’s extremely distracting.
Amazing tips! Thanks Payton!
great info would sir
Great video, thank you so much
Could you do this for more pages, like a single service page for example to show what sections are needed and best practices
Great video's Payton, amazing content! Any chance you could do something like this for Ecommerce? Or have you done this in the past?
hi Payton, this video is awesome, is it possible for you to make a video for new site, or new launch and pre launch as there is no- social proof for this kind of pages, what can we do if social proof not available? any other wonderful options, please let us know, your help is appreciated.
great!
Hi thanks! this was helpful
what software do you use for the diagram in your tutorials? could you teach about it?
where did you get the illustrations i really like them and would like to use them if possible
The second call to action section on the bottom is not necessary. Just have the actual action there. Have the product with a purchase button or a contact form. No point having the user take another step by clicking the CTA button. Or do you have a good reason for the customer having to click another button?
hi, how about the pricing table, should I include it in landing page, or user should click a link to continue reading that pricing table?
Very valuable, thank you! Can you do this style video for an e-commerce site homepage?
Is learning web design learning for freelancing still worth it despite the existence of ai tools which can create websites with just a sing promt text
Will ai replace web designers? I'm really confused
Nice
how do you replace the bullets in the bullet points with an icon instead?
Thanks a lot! Do you have a suitable Wordpress theme for a website like this to recommend?
Yes!
From where I can get this type of image for my website
What is the style of illustration graphics called that is used in the hero section and elsewhere? The ones with the figures pointing at screens. I like those.
Good stuff.
Tried to watch the whole video, but the background music is absolutely annoying - every minute or so there is this sound that is bothering (like at 4:47)
Thanks for this Clerk! New Subscriber, definately staying.
Question please : What's the pixel height you recommend for the main hero section so the content below can also bleed into the viewport?
I would love to see what you would do with sites that are content heavy...
Is a video in the hero really such a great idea? More loading time on initial page load and it might show up later than the content which could lead to distraction and disturb the users eye-pattern
Also I am not sure if people need content to show below the hero to be scrolling. Scrolling got so normal now, you don't think about "oh should I scroll now or no?" you just scroll if the hero catches your attention and interest
@@MrInsider33 videos in the hero have converted super well for me. Yes, they can negatively effect load times but it hasn’t been detrimental at all.
And as for the content below the hero, it’s not as much getting them to know they need to scroll as it is getting them to want to scroll. Giving them a reason ya know? I maybe didn’t do the best job of wording this.
Anyways, I appreciate your comment/ideas! Thanks for watching
@@PaytonClarkSmith Hey Payton, fair points! Will look into this for my next projects :) Appreciate the small discussion
Hi, is it even important today to have video on homepage, and if so what are the best practices for placing a video on the homepage
Is this applicable for Landing pages?
what should the size of the first section be?
Thank you for this! I have just learnt figma and webflow and I'm about to start freelancing, this is just what I need. Please can you share the figma file.
Can u provide us the JSON template for that layout? Thanks!
Yeah, but it’s still a very slow march towards websites putting the offer front and center. You’re half-way there!
Shouldn't the CTA button be like the green color ? the gray color makes it look's like a disabled button.
what happens when you follow the mobile layouts to the computer version? do you need to tweek it?
5:59 Where or how we can use a custom graphic?
You sound trustworthy and you have a good approach - unfortunately there is always the undertone of you guys telling us just enough to be drawn to hire you for money most of us can't afford so it is evident that a lot of information is missing therefore rendering the intent of this video useless. :( Sad! (lol)
What software did you use to create this?
what about an e commerce website home page?
Do you have a WIX template of this you can share?
Do you have a link to this template? Figma or just screenshot?
Great content. I have only one question, my native language is not English and I see that you use "real estate" to refer to some parts and I do not understand the reason, I understand real estate as something related to house markets ...
It is also used as a figure of speech in American English. So in this case, he used "real estate" to mean "space". So, if he were to say "You have a lot of real estate in the hero section," he means, you have a lot of space in the hero section. Hope this helps.
@@lprzytula thanks, it did!
I don't think i want to be a web designer but i want to design well my web site. Or pay someone else. Do you have themes or templates that i can use since you show many layouts..where do i get them? ty
Does anyone know what content to put in the about page design?
Is it legal to use the company's logo? 12:24
The background music is very annoying, distracting, and not needed. Do I hear a train whistle once in a while? 🤦🏻
Absolutely
👍👍👍👍
why use hero section if vast majority don't scroll? couldn't the actual action be there already instead of CTA, which is a link to somewhere further anyways
Why is there not even a link to the final URL ?
Amazing! Can you please share the Figma file?
I'm afraid to share my messy Figma file 😂 Ill see what i can do
@@PaytonClarkSmith Thanks! Don't worry about the mess, you should see my house 😆
@@TheProductivityDoctor 😂😂😂😂😂
Can you share the figma file?
The majority of my traffic comes from mobile. Do you have a similar "perfect homepage design" for mobile?
Then you end up stacking things on top of each other for mobile users
Also, I would be curious to know what content block max-width you tend to use. (An equivalent of) 1200px? 1366? 1600? Obviously, a text paragraph 1600px wide is a fail, but conversely with 1200px width it is more challenging to use 3 or 4 boxes (with main icons and features) in a row.
What say you? Where is your sweetspot?
Did anyone else try to scroll the video sideways? 🤦🤦🤦
😮 I thought I was the only one
People now use mobile phones, please consider that for tutorial. No one care about how it looks on desktop view
But but mobile
Please kill the background music!
Get upto 500+ landing page for free
Whatever that background noise you have there, that is the most annoying sound I've ever heard in my life. The call to action was to hit my mute button.