Perfect Homepage Design Explained (in 15 minutes)
ฝัง
- เผยแพร่เมื่อ 15 พ.ค. 2024
- Join my private training platform for web designers:
www.paitpro.com
🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳
Perfect Your Web Designs With These Videos:
🎥 HERO Section Variations
• 18 Hero Section Design...
🎥 11 Section Layouts
• 11 Section layouts to ...
🎥 Full Web Page Design Step-By-Step
• The ULTIMATE Guide To ...
🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳
CHAPTERS
0:00 Intro to the perfect homepage design
0:16 The HERO Section
8:10 Section Layout Variations
9:20 Social Proof Section
11:30 Call To Action Section
13:47 FAQ Section
14:58 Footer
🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳
Perfect Homepage Design Explained (in 15 minutes)
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 TH-cam 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.
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 🎉
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!
you are amazing at explaining! so much value packed into 15 minutes is insane
Perfect video on explaining homepage design. Your recent videos on hero layout and section layout are also extremely helpful. Thanks!
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.
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 👍👍👍
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!
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.
Really appreciate the work you are doing on this channel ! Thanks !
so much value in such a short video! Thank you SO Much!
Amazing content as always, Payton! Thanks a lot for the value you put out 😊
Thanks Kim🙏🏻
Such a great work!!! Awesome designer. I’m having so much learn from your videos
Thank you, Payton! I learned something today!
Your each and every video is so much informative.
I always enjoy your content. Great job
Thank you for this video sir, it helps me a lot with my web design projects.
Your content is gold!
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.
Would love to see mobile/responsive version of this! Great content btw!
Great video! Everyone should see this.
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 thanks! this was helpful
what software do you use for the diagram in your tutorials? could you teach about it?
Great Teacher and Professional. Pull UP and Suscribed.
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?
This helped a lot.
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 ?
Thank yo so much , please make a video on making body sections & body sections layout
Great 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
Thanks, pretty solid .
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
Very valuable, thank you! Can you do this style video for an e-commerce site homepage?
great info would sir
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.
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.
Amazing tips! Thanks Payton!
Could you do this for more pages, like a single service page for example to show what sections are needed and best practices
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.
Yes no music needed. We focus on what you say in the video.
You should have way more subscribers to the channel!
I have a lot to learn from you. Thanks a lot!
great!
Good stuff.
🎯 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
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!!!
What software did you use to create this?
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.
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.
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.
Nice
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?
what happens when you follow the mobile layouts to the computer version? do you need to tweek it?
I would love to see what you would do with sites that are content heavy...
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.
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
Do you have a link to this template? Figma or just screenshot?
Thanks a lot! Do you have a suitable Wordpress theme for a website like this to recommend?
Yes!
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
Great video, but the background music is a bit too loud
how do you replace the bullets in the bullet points with an icon instead?
From where I can get this type of image for my website
Valuable information, clearly stated, well done. ♥Thanks so much ♥ 👍👍👍👍👍
Unfortunate distracting, annoying, no value added background "music" 👎
Thanks Keith!
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 🫱
5:59 Where or how we can use a custom graphic?
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
Is it legal to use the company's logo? 12:24
Can u provide us the JSON template for that layout? Thanks!
what should the size of the first section be?
Do you have a WIX template of this you can share?
Shouldn't the CTA button be like the green color ? the gray color makes it look's like a disabled button.
Does anyone know what content to put in the about page design?
what about an e commerce website home page?
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!
👍👍👍👍
Can you share the figma file?
Yeah, but it’s still a very slow march towards websites putting the offer front and center. You’re half-way there!
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)
Nice information but why is music playing in background?
For those who have to wear headphones to view it’s extremely distracting.
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
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 😂😂😂😂😂
Why is there not even a link to the final URL ?
Then you end up stacking things on top of each other for mobile users
The majority of my traffic comes from mobile. Do you have a similar "perfect homepage design" for mobile?
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? 🤦🤦🤦
People now use mobile phones, please consider that for tutorial. No one care about how it looks on desktop view
But but mobile
Get upto 500+ landing page for free
Please kill the background music!
follow everyone else does not mean it's a perfect homepage.
Bro, continuing to spew stupid comments such as "people don't know there's more content down below" ( 6:18 ) completely undercuts your credibility and makes you look like a moron. If you are still promoting this theory, which was proven false in 1997, then anything you say or teach is highly suspect. Studies since 1997 involving multiple audiences clearly show that people prefer scrolling the page for content over pagination. How would this happen if no one knew there was content below? I mean, how could I find the comment section on TH-cam, since "people don't know there's more content down below?"
It is safe to say quite literally that EVERYONE who has ever used ANY website for more than 2 minutes knows there is more content down below. Your mouse has a scroll wheel for this reason, your mobile device has touch gestures for this reason. You literally cannot find a single website that doesn't have content accessible by scrolling unless you include landing pages that try to force a click-the-CTA or leave-the-site choice.
I was going to purchase your SEO course but decided against it because this is the second video in recent days where you show you know nothing about site design. You have no credibility for any other theory you try to teach, as you are clearly proving you know nothing about site design.
I think I’ll be fine without you in my courses ☺️ This much hate in a TH-cam content shows you’re not the type of person we are looking for anyways. Best of luck!
I would recommend the Book "Hooked: How to Build Habit-Forming Products". It's not that "People don't know there's more content below", It's that people when prompted to scroll, or notice incomplete information, are more likely to scroll. If you're prompted to do something, you're more likely to do that. I also recommend "Tiny Habits" By B.J. Fogg.
Woah, that was a mountain of insults lol Going through stuff, bro? Also, you clearly don't get it, what he's teaching is web design convention (heck, Google's certification courses teach the same thing.) It's that confirmation of "hey, there's more content down below" that draws people to scroll. That's why it's called a hook, it's enticing. Hope you calm down over free content lol
When there's cutt off content on screen it promotes user to scroll further. It is as simple as that. (Though i would personally prefer a site which shows full height hero section on load.)
Believe me dude this pseudo genius behaviour won't take you anywhere. So much hate for a thing as simple as that 👎
It is completely naive to (a) suggest there is such thing as a PERFECT layout and (b) in particular that content leads design and so unless you know the content (and you don't) then your 'perfect layout' might not even be good.
I’ma consumer and I hate animations. I know web designers l e them. It’s just bloat to me. All networks aren’t good we don’t rhrse silly things we aren’t children
What was that gawdawful noise in the background??!! That was so annoying I couldn't finish your video! It seems like you had such a good message and content but ruined it with horrible background noise.
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)
Could use not having the background subliminal demonic music! LOL!
Who are you kidding, dude? It's all the same. Nowadays, all landing pages look alike because you believe you can turn anything into a 'system.' 😃
Great idea. I wish I watched this video earlier. 🥲