12 NEW HERO LAYOUTS YOU CAN STEAL

Поділитися
Вставка
  • Опубліковано 12 тра 2024
  • 💸Wealthy Designer Newsletter (Free):
    www.bit.ly/WealthyDesigner
    Learn How to Build a Booming Design Business:
    www.paitpro.com
    🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
    OTHER USEFUL VIDS:
    🎥 18 HERO Sections Part 1:
    • 18 Hero Section Design...
    🎥 13 Mobile HERO Sections:
    • Designing a Mobile HER...
    🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
    DESIGNER CREDITS
    dribbble.com/qclay
    dribbble.com/studioraneu
    dribbble.com/sabrinameilya
    dribbble.com/awesomic
    dribbble.com/qclay
    dribbble.com/baguspam
    dribbble.com/farrelputra
    dribbble.com/kretyastudio
    dribbble.com/cuberto
    dribbble.com/ronasit
    dribbble.com/IvanovicMarko
    dribbble.com/morvalabs
    🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
    CHAPTERS
    0:00 Intro
    0:19 HERO Section 1
    0:50 HERO Section 2
    1:31 HERO Section 3
    2:31 HERO Section 4
    3:10 HERO Section 5
    4:19 HERO Section 6
    5:28 HERO Section 7
    6:55 HERO Section 8
    8:09 HERO Section 9
    9:35 HERO Section 10
    10:53 HERO Section 11
    12:10 HERO Section 12
    🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
    The HERO section of your website Is the most important part of your entire website. It Is your first impression and sometimes your only chance to impress each website visitor.
    This video shares 12 new and unique HERO section layouts that you can save and use as inspiration.
    🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
    12 NEW HERO LAYOUTS YOU CAN STEAL

КОМЕНТАРІ • 84

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

    Come join my private group!
    We just added some *new trainings* and a brand new resource to help with pricing your design work
    www.paitpro.com

  • @ritankarbhattacharjee7661
    @ritankarbhattacharjee7661 7 місяців тому +24

    The video was great, but could you also add a sample of how the design would look like in mobile or smaller screens next time?

  • @donpapanl
    @donpapanl 7 місяців тому +12

    Great video! All nice for desktops. Love to see a video for mobile "hero" sections and footers!

  • @b_teo
    @b_teo 7 місяців тому +135

    It would be interesting to see them in mobile mode too

    • @mehdesigner4572
      @mehdesigner4572 7 місяців тому +7

      I think it would be a good practice if you can design how they would look

    • @Eriickvanbuuren
      @Eriickvanbuuren 6 місяців тому +3

      thinking exactly the same here

    • @vapor4
      @vapor4 6 місяців тому +8

      Exactly..... No one uses a desktop anymore unless they're reviewing it for a UA-cam video

    • @yonatankarya
      @yonatankarya 6 місяців тому +4

      @@vapor4 "no one"? You're exaggerate it too much.

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

      same!

  • @RachelReimagines
    @RachelReimagines 7 місяців тому +3

    Great for inspiration! On Hero 9, what would be the best practice to maintain the H1 (for SEO purposes) when developing this layout?

  • @hidayam
    @hidayam 6 місяців тому +1

    Now this is something new , Great video with good inspirations. The best part is template to content transition with detailed explanations with pros and cons, Await to see more. Thanks.

  • @alexirabor
    @alexirabor 7 місяців тому +1

    Great content. Please, what software did you use in combining the shapes to form the mask in hero section 3?

  • @danielosamatie-ku9fu
    @danielosamatie-ku9fu 4 місяці тому +3

    Nice layouts. Please I need an answer to this.
    For the third layout, what software was used to design the frame?
    Please respond or reply me, thanks ahead 😊

  • @hihi9674
    @hihi9674 7 місяців тому +1

    Good stuff! Subscribed.

  • @marooonsky
    @marooonsky Місяць тому

    Thank you for making this type of video! It's always inspiring.
    I would like to see layouts for other section as well. It would be awesome!
    Thanks for your work.

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

    @Payton Clark Smith what software are you using to illustarte the rounding corners in section 3 please?

  • @kevynlevine
    @kevynlevine 7 місяців тому +17

    I love these types or videos - so inspirational! Thats for gathering all of these samples.

    • @PaytonClarkSmith
      @PaytonClarkSmith  7 місяців тому

      🙏🏼

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

      he didn't gather anything.. he literally says over every slide "I don't know how this website functions..."

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

      @@RuffusJY I think you’re not aware of what the word gathers means.

  • @ivan.prosic
    @ivan.prosic 7 місяців тому

    Great video Payton! Can you say perhaps which designer did HERO Section 5? I went over all the profiles and I cannot find the dribbbble design

  • @Expertoverflow
    @Expertoverflow 6 місяців тому +2

    Please teach us how you made masked images in a custom shape that quick! I could find that very useful right now. Just found your channel and I love it.

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

      Adobe Illustrator.

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

    Thanks for your great videos!
    But I can't open a file. Unable to open the file at present. Can you help me how can i download it?

  • @danielosenipelumi6033
    @danielosenipelumi6033 7 місяців тому +1

    Hi there Payton, I've been following your content for a while now, I appreciate your content and I absolutely love the priceless value you put out there.
    However I wanted ask a few questions, apart from design and development what are the other services that go into ensuring the success of a website, especially in the marketing space. I'm aware of SEO and email marketing but what are other services that clients are usually I need of in the marketing space.
    Finally, is automation a viable service to offer right now

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

    In the first case I have problem with button before the claim text. So you have to click on that button and read the text then?

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

    What you use for presentation?

  • @khanabdulrehman26
    @khanabdulrehman26 7 місяців тому +1

    I already loved the previous part! Thanks Clark, this is so helpful!

  • @user-gn2le8xm8u
    @user-gn2le8xm8u 4 місяці тому

    Great video! Thanks for sharing😊

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

    Great showcases hero sections!

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

    The header 5 is there link to this site or designer who did this layout

  • @franktielemans6624
    @franktielemans6624 7 місяців тому +2

    1:55
    A mask wont work here, because you have that text in that top right corner that has to be responsive.
    You have to create a parent div with the image in the background and a child div for the text with the same background color as tha page so it looks like that is a notch. To round the corners on the inside you need the "inversed-border-radius" hack, done with psuedo elements.

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

      Was looking for this comment! Do you have any tutorial or video link for this?

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

    I love that video
    Thanks Clark 😊

  • @syeadtalal114
    @syeadtalal114 7 місяців тому

    What is the font of hero layout no 9?

  • @SillyWeb
    @SillyWeb 7 місяців тому

    awesome video i have used 6 one so many times at 4:29 btw i have also made a video on before after redesign.

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

    Thanks man!

  • @infinitedesigns_io
    @infinitedesigns_io 7 місяців тому +4

    1:15 Text hierarchy will take care of that. They will read the larger text first then go back and read the smaller text. You can't deny human nature. Great video as always!

    • @ashbtx07
      @ashbtx07 7 місяців тому

      That’s exactly what I did

  • @pete531
    @pete531 7 місяців тому

    3:40 it would be better if the hand is coming from north east and pointing south leading users to scroll down next. i read somewhere about this, its a legit ui/ux rule so its not jsut something i came up with.

  • @Coding-Yogi
    @Coding-Yogi 4 місяці тому

    Hey create a video on intresting layouts for SaaS products

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

    Can you do some like this for only mobile based websites/Landing Pages for product marketing eg : Ebooks and services please Brõ..
    Thanks in advance and you got my follow just from this one video and I am looking forward to watch others too.
    ❤🙏

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

      And also, can you create tutorial on one or three of these using Canva websites please?

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

    Number 10: how do you make image stick out only on top side of div but be hidden on bottom?

  • @LaureanaDelPopolo-oy2dg
    @LaureanaDelPopolo-oy2dg 5 місяців тому

    Is there any chance you can teach us how to do some of them?

  • @shravanmurali1302
    @shravanmurali1302 3 місяці тому

    Do a video about Fonts 👍🏻

  • @UXRKhan
    @UXRKhan 8 днів тому

    💻 Time to steal some design inspiration! 😎

  • @user-tu1gu7kq5n
    @user-tu1gu7kq5n 5 місяців тому

    love these vids but please start showing mobile as well

  • @matthewguzman6806
    @matthewguzman6806 5 місяців тому +1

    Are you related to Chandler? Y’all look alike lol and this video background looks similar to his. I love his content and now I love yours! Great video mate!

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

      Yeah he’s my brother! Thanks for the comment

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

    Fantastic

  • @LiLa-jp2kr
    @LiLa-jp2kr 6 місяців тому

    مثل همیشه عالی

  • @designer_N1
    @designer_N1 3 місяці тому

    Very good👍

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

    Your video has really helped me concerning my web designing. Is it advisable to use any of these hero section layout in any other section in your web design?

  • @user-zl1vc9lt8t
    @user-zl1vc9lt8t 6 місяців тому

    very intresting

  • @ajithr1255
    @ajithr1255 7 місяців тому +1

    2:16 not very challenging to develop IMO!

  • @ajithr1255
    @ajithr1255 7 місяців тому +1

    8:00 I don't think this is the actual Figma conf website..

  • @ib4112
    @ib4112 3 місяці тому

    Shapes are not masks its based only it can be done using css so it works seamlessly on different screens

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

    Absolute nightmare for UX. Some of these doesn't even make any sense at all.

  • @user-bh4sq8qz7p
    @user-bh4sq8qz7p 2 місяці тому

    The mobile view wouldn't be as nice as the desktop view, looking at the complexity of some of the website layout.

  • @nero71845
    @nero71845 7 місяців тому +1

    #9 is messy and confusing and doesn't look professional ..

  • @fourantalha9066
    @fourantalha9066 7 місяців тому +2

    First comment :)

  • @Atractiondj
    @Atractiondj 7 місяців тому +10

    UX leave the chat

    • @PaytonClarkSmith
      @PaytonClarkSmith  7 місяців тому +5

      😂 I should add “use at your own risk” for some of these

    • @Atractiondj
      @Atractiondj 7 місяців тому

      @@PaytonClarkSmith yep )))

    • @fiqihalfarizy4843
      @fiqihalfarizy4843 7 місяців тому

      @@Atractiondj fixed to use 2 column layout forever. What a boring.

    • @deps..
      @deps.. 7 місяців тому +1

      Ah, the concept of UX, often misunderstood. This type of layout is clearly aimed at non-repeat visitors and should be designed for effortless scrolling, envisioning a world where information appears with a simple thumb flick. 🎉

    • @Atractiondj
      @Atractiondj 7 місяців тому +2

      @@deps.. First, read Hicks' law and understand the fact that a clutter of elements does not simplify, but complicates the user's scanning of the site.
      And lastly, remember! All these methods of posting content are useless when today more than 70% of traffic comes from smartphones where everything is limited to 1-2 columns!

  • @conglo3650
    @conglo3650 7 місяців тому

    Most of the designs are cr4p, because In a few years that kind of designs will look ugly and useful. We need to create unique designs that are good and timeless

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

    Most, if not all of these are bullshit Dribbble concepts.

  • @HariPrasad-mn5vu
    @HariPrasad-mn5vu 6 місяців тому +2

    Almost almost all of this design's are terrible. 😂

    • @thefirstplayer7964
      @thefirstplayer7964 6 місяців тому +1

      Why you laughing at yourself after saying something unintelligent, you must be really sad

    • @HariPrasad-mn5vu
      @HariPrasad-mn5vu 6 місяців тому

      @@thefirstplayer7964 Bro there's a diffrence between fact and opinon. If you love those an di don't there's a diffrence of opinion. And I just find those designs terrible as a hi/us devoloper. What's unintelligentabout this brother?

  • @baboetoe
    @baboetoe 5 місяців тому +1

    UX design has left the chat..