Perfect Homepage Design Explained (in 15 minutes)

Поділитися
Вставка
  • Опубліковано 27 гру 2024

КОМЕНТАРІ • 160

  • @LordJHouse
    @LordJHouse Рік тому +50

    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.

    • @PaytonClarkSmith
      @PaytonClarkSmith  Рік тому +5

      Glad you found it helpful

    • @ezyderaaf
      @ezyderaaf Рік тому +38

      Just a tip, she might find it more impressive if you do this level of analysis on her website instead

    • @chrisdaniel3991
      @chrisdaniel3991 Рік тому +3

      @@PaytonClarkSmith Which do you target more often? businesses without websites or businesses that need a website revamp and why?

    • @issacsweb
      @issacsweb Рік тому

      @@chrisdaniel3991 There was a fairly recent video of Payton explaining the new direction of his business towards the content creation space here in UA-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.

    • @BigRobAustria
      @BigRobAustria Рік тому +8

      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.

  • @vasatvnow
    @vasatvnow 10 місяців тому +5

    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.

  • @grugbrain
    @grugbrain Рік тому +12

    Yes no music needed. We focus on what you say in the video.

  • @mista_odie
    @mista_odie Рік тому +9

    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 👍👍👍

  • @PokeFangOfficial
    @PokeFangOfficial Рік тому +90

    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.

    • @bradleywhais7779
      @bradleywhais7779 Рік тому +4

      Probably because development only happens on desktop. XD I understand what you're saying though.

    • @nolderoos7997
      @nolderoos7997 Рік тому +19

      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.

    • @hiryuimajin
      @hiryuimajin Рік тому +6

      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.

    • @serhiih.4724
      @serhiih.4724 Рік тому

      Same question ! Please make mobile overview

    • @Nayan20
      @Nayan20 Рік тому

      @pokefangOfficial Suggest chamal name 🎉

  • @christianukpong4101
    @christianukpong4101 Рік тому +11

    🎯 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

  • @RolandSRacz
    @RolandSRacz Рік тому

    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.

  • @erik.swartz
    @erik.swartz Рік тому +6

    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!

    • @abdul-UIUX
      @abdul-UIUX 4 місяці тому

      Me too, after 16 years of designing.

  • @darndarn99
    @darndarn99 Рік тому +2

    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 👍

    • @timandmonica
      @timandmonica Рік тому +1

      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?

    • @darndarn99
      @darndarn99 Рік тому

      @@timandmonica if I can help yes of course 👍 I love helping people

    • @timandmonica
      @timandmonica Рік тому +1

      @@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.

    • @darndarn99
      @darndarn99 Рік тому

      @@timandmonica hi Timothy, I just emailed you, hope i got it correct ?

  • @henrythomas7112
    @henrythomas7112 Рік тому

    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!

  • @florianwurm4220
    @florianwurm4220 Рік тому +1

    so much value in such a short video! Thank you SO Much!

  • @TheJournalOutlet
    @TheJournalOutlet Рік тому +5

    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”.

    • @liszcgsedt
      @liszcgsedt Рік тому

      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.

  • @teorodriguez9800
    @teorodriguez9800 Рік тому

    Such a great work!!! Awesome designer. I’m having so much learn from your videos

  • @JenniferAguilera
    @JenniferAguilera Рік тому

    you are amazing at explaining! so much value packed into 15 minutes is insane

  • @tomimdawodu6808
    @tomimdawodu6808 Рік тому +7

    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

  • @EverythingIsBoffo
    @EverythingIsBoffo 8 місяців тому

    Amazing tips! Thanks Payton!

  • @huvisoft
    @huvisoft 2 місяці тому

    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?

  • @btpjunk
    @btpjunk 11 місяців тому

    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.

  • @DimitrySarasin-Dhaene
    @DimitrySarasin-Dhaene 3 місяці тому

    where did you get the illustrations i really like them and would like to use them if possible

  • @thekimgraph
    @thekimgraph Рік тому +5

    Amazing content as always, Payton! Thanks a lot for the value you put out 😊

  • @rahatuddin6331
    @rahatuddin6331 Рік тому

    Your each and every video is so much informative.

  • @josebaezc.7709
    @josebaezc.7709 Рік тому

    Great Teacher and Professional. Pull UP and Suscribed.

  • @heybeckyv
    @heybeckyv 5 місяців тому

    Exactly what I've been looking for.

  • @ryannichols1798
    @ryannichols1798 8 місяців тому

    Would love to see mobile/responsive version of this! Great content btw!

  • @babybook84
    @babybook84 Рік тому

    Perfect video on explaining homepage design. Your recent videos on hero layout and section layout are also extremely helpful. Thanks!

  • @gislo
    @gislo 11 місяців тому

    Great video! Everyone should see this.

  • @armanmaulana8404
    @armanmaulana8404 Рік тому

    Thank you, Payton! I learned something today!

  • @ziskablyat8451
    @ziskablyat8451 9 місяців тому

    how do you replace the bullets in the bullet points with an icon instead?

  • @shahrzadakbarii
    @shahrzadakbarii 4 місяці тому

    Loved this video! really useful. thanks a lot!

  • @pablo-9296
    @pablo-9296 Рік тому

    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

  • @OddErikHaraldsen
    @OddErikHaraldsen Рік тому

    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?

  • @oluwagbengakosoko9014
    @oluwagbengakosoko9014 Рік тому

    I always enjoy your content. Great job

  • @cjn2109
    @cjn2109 Рік тому

    Really appreciate the work you are doing on this channel ! Thanks !

  • @jullisti
    @jullisti Рік тому

    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 🫱

  • @jaimevtv
    @jaimevtv Рік тому

    Thank you for this video sir, it helps me a lot with my web design projects.

  • @GUYX10
    @GUYX10 Рік тому

    Hi thanks! this was helpful
    what software do you use for the diagram in your tutorials? could you teach about it?

  • @carinascherer1706
    @carinascherer1706 5 місяців тому

    thank you so much. that was super helpful!

  • @GrifanoRide
    @GrifanoRide Рік тому

    5:59 Where or how we can use a custom graphic?

  • @jeandearme32
    @jeandearme32 Рік тому +2

    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)

  • @liszcgsedt
    @liszcgsedt Рік тому

    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.

  • @Oscar-lx5tk
    @Oscar-lx5tk Рік тому +1

    Thanks a lot! Do you have a suitable Wordpress theme for a website like this to recommend?

  • @RonyRoy365
    @RonyRoy365 9 місяців тому

    From where I can get this type of image for my website

  • @TheAmirCyber
    @TheAmirCyber Рік тому

    Shouldn't the CTA button be like the green color ? the gray color makes it look's like a disabled button.

  • @MrInsider33
    @MrInsider33 Рік тому +1

    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

    • @MrInsider33
      @MrInsider33 Рік тому +2

      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

    • @PaytonClarkSmith
      @PaytonClarkSmith  Рік тому +1

      @@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

    • @MrInsider33
      @MrInsider33 Рік тому

      @@PaytonClarkSmith Hey Payton, fair points! Will look into this for my next projects :) Appreciate the small discussion

  • @JR-kc3rc
    @JR-kc3rc Рік тому

    what happens when you follow the mobile layouts to the computer version? do you need to tweek it?

  • @FBPreston
    @FBPreston Рік тому

    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!!!

  • @joebashour
    @joebashour 11 місяців тому

    You should have way more subscribers to the channel!
    I have a lot to learn from you. Thanks a lot!

  • @aasthakothari6735
    @aasthakothari6735 Рік тому

    what should the size of the first section be?

  • @Local-Seo-Nerd
    @Local-Seo-Nerd Рік тому

    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.

  • @melekpolitik76
    @melekpolitik76 8 місяців тому

    Can u provide us the JSON template for that layout? Thanks!

  • @ajinkyapantode5100
    @ajinkyapantode5100 Рік тому +1

    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

  • @csubex
    @csubex Рік тому

    Your content is gold!

  • @GoingMerry1876
    @GoingMerry1876 6 місяців тому

    Is this applicable for Landing pages?

  • @aresahmed5709
    @aresahmed5709 Рік тому

    Thank yo so much , please make a video on making body sections & body sections layout

  • @JR-kc3rc
    @JR-kc3rc Рік тому

    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

  • @keithhill3034
    @keithhill3034 Рік тому +3

    Valuable information, clearly stated, well done. ♥Thanks so much ♥ 👍👍👍👍👍
    Unfortunate distracting, annoying, no value added background "music" 👎

  • @cameron9695rhysd
    @cameron9695rhysd Рік тому

    Could you do this for more pages, like a single service page for example to show what sections are needed and best practices

  • @palakondarayuduuppu6420
    @palakondarayuduuppu6420 Рік тому +1

    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.

  • @CatsInHatz
    @CatsInHatz Рік тому

    Great video's Payton, amazing content! Any chance you could do something like this for Ecommerce? Or have you done this in the past?

  • @GrifanoRide
    @GrifanoRide Рік тому

    Is it legal to use the company's logo? 12:24

  • @Masterhunter325
    @Masterhunter325 Рік тому

    Do you have a link to this template? Figma or just screenshot?

  • @wealthyman5420
    @wealthyman5420 Рік тому

    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?

  • @ZenifyInvestments
    @ZenifyInvestments Рік тому

    Do you have a WIX template of this you can share?

  • @OptionSpreadProfits
    @OptionSpreadProfits Рік тому

    What software did you use to create this?

  • @davidkobi93
    @davidkobi93 Рік тому

    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.

  • @lucasgonzalez6361
    @lucasgonzalez6361 Рік тому

    Does anyone know what content to put in the about page design?

  • @simonblanco6716
    @simonblanco6716 Рік тому

    Thanks, pretty solid .

  • @monikamoon14
    @monikamoon14 10 місяців тому

    This helped a lot.

  • @olwalmoses
    @olwalmoses 6 місяців тому

    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

  • @whitneynicole2012
    @whitneynicole2012 Рік тому

    Very valuable, thank you! Can you do this style video for an e-commerce site homepage?

  • @lovisakaffe
    @lovisakaffe Рік тому

    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

  • @mercurious6699
    @mercurious6699 Рік тому

    Great video, thank you so much

  • @ZeeshanIqbal24
    @ZeeshanIqbal24 Рік тому

    what about an e commerce website home page?

  • @chrisdavis1681
    @chrisdavis1681 9 місяців тому

    great info would sir

  • @navya-s3v
    @navya-s3v 3 місяці тому

    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.

  • @3KlNG
    @3KlNG Рік тому +1

    Great video, but the background music is a bit too loud

  • @yeahiamlockedin
    @yeahiamlockedin Рік тому

    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.

  • @mwfand
    @mwfand Рік тому

    I would love to see what you would do with sites that are content heavy...

  • @liszcgsedt
    @liszcgsedt Рік тому

    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?

  • @christianelisha
    @christianelisha Рік тому +1

    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.

  • @lansingdoesbusiness9356
    @lansingdoesbusiness9356 Рік тому +1

    Nice information but why is music playing in background?
    For those who have to wear headphones to view it’s extremely distracting.

  • @mdqmatias
    @mdqmatias Рік тому

    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 ...

    • @lprzytula
      @lprzytula Рік тому +1

      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.

    • @mdqmatias
      @mdqmatias Рік тому

      @@lprzytula thanks, it did!

  • @pauls.2574
    @pauls.2574 Рік тому +1

    great!

  • @radiantcarpets
    @radiantcarpets Рік тому

    Good stuff.

  • @PizzaLord
    @PizzaLord Рік тому

    Why is there not even a link to the final URL ?

  • @GaneshKumar-mk3mr
    @GaneshKumar-mk3mr Рік тому

    Nice

  • @AmodeusR
    @AmodeusR Рік тому

    Can you share the figma file?

  • @sailingfromswitzerland
    @sailingfromswitzerland 11 місяців тому

    The majority of my traffic comes from mobile. Do you have a similar "perfect homepage design" for mobile?

  • @TheProductivityDoctor
    @TheProductivityDoctor Рік тому +1

    Amazing! Can you please share the Figma file?

    • @PaytonClarkSmith
      @PaytonClarkSmith  Рік тому +1

      I'm afraid to share my messy Figma file 😂 Ill see what i can do

    • @TheProductivityDoctor
      @TheProductivityDoctor Рік тому +1

      @@PaytonClarkSmith Thanks! Don't worry about the mess, you should see my house 😆

    • @darndarn99
      @darndarn99 Рік тому

      @@TheProductivityDoctor 😂😂😂😂😂

  • @nicksmith-chandler458
    @nicksmith-chandler458 Рік тому

    Yeah, but it’s still a very slow march towards websites putting the offer front and center. You’re half-way there!

  • @derekshort
    @derekshort 3 місяці тому +2

    The background music is very annoying, distracting, and not needed. Do I hear a train whistle once in a while? 🤦🏻

  • @cas-cas6113
    @cas-cas6113 Рік тому

    👍👍👍👍

  • @ArifAldoseri
    @ArifAldoseri Рік тому

    Then you end up stacking things on top of each other for mobile users

  • @youstubers5722
    @youstubers5722 Рік тому +3

    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 UA-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.

    • @PaytonClarkSmith
      @PaytonClarkSmith  Рік тому +2

      I think I’ll be fine without you in my courses ☺️ This much hate in a UA-cam content shows you’re not the type of person we are looking for anyways. Best of luck!

    • @MrChristopherRoos
      @MrChristopherRoos Рік тому +3

      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.

    • @broctonnunns280
      @broctonnunns280 Рік тому

      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

    • @sagardattatrey3241
      @sagardattatrey3241 Рік тому

      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 👎

  • @smartlead
    @smartlead Рік тому

    People now use mobile phones, please consider that for tutorial. No one care about how it looks on desktop view

  • @BusyBusinessHostingNPromotion
    @BusyBusinessHostingNPromotion 24 дні тому

    I really hate that three column layout. I'd rather people follow what I want them to read in a single column

  • @sh1n00b1
    @sh1n00b1 9 місяців тому +1

    Did anyone else try to scroll the video sideways? 🤦🤦🤦

    • @amaranth6174
      @amaranth6174 2 місяці тому

      😮 I thought I was the only one

  • @codobyte
    @codobyte Рік тому

    Please kill the background music!

  • @lawrencejob
    @lawrencejob Рік тому

    But but mobile

  • @michaelkrailo5725
    @michaelkrailo5725 4 місяці тому

    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.