12 NEW HERO LAYOUTS YOU CAN STEAL

Поделиться
HTML-код
  • Опубликовано: 4 фев 2025

Комментарии • 89

  • @PaytonClarkSmith
    @PaytonClarkSmith  11 месяцев назад

    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 Год назад +31

    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?

  • @b_teo
    @b_teo Год назад +147

    It would be interesting to see them in mobile mode too

    • @mehdesigner4572
      @mehdesigner4572 Год назад +8

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

    • @Eriickvanbuuren
      @Eriickvanbuuren Год назад +5

      thinking exactly the same here

    • @vapor4
      @vapor4 Год назад +9

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

    • @yonatankarya
      @yonatankarya Год назад +5

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

    • @40ozTea
      @40ozTea Год назад +1

      same!

  • @donpapanl
    @donpapanl Год назад +12

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

  • @infinitedesigns_io
    @infinitedesigns_io Год назад +5

    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 Год назад

      That’s exactly what I did

  • @danielosamatie-ku9fu
    @danielosamatie-ku9fu Год назад +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 😊

  • @carmilu
    @carmilu 8 месяцев назад

    Hi man love your videos. I have a small issue with your format user experience. Every time I watch your videos, I realize mid way I already saw it. I love to see new ones with the familiar format, it’s cool and the explanation is met. I’m not sure you can solve in the intro, to find a way to differentiate between them. Anyway keep it up

  • @kevynlevine
    @kevynlevine Год назад +17

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

    • @PaytonClarkSmith
      @PaytonClarkSmith  Год назад

      🙏🏼

    • @RuffusJY
      @RuffusJY Год назад

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

    • @kevynlevine
      @kevynlevine Год назад

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

  • @elensar3612
    @elensar3612 4 месяца назад +1

    UI: Lets use new interesting designs for layout.
    PM: I think we should use holy grail template again
    FE: Oh thank god..

  • @Expertoverflow
    @Expertoverflow Год назад +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 Год назад

      Adobe Illustrator.

  • @franktielemans6624
    @franktielemans6624 Год назад +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 Год назад

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

  • @marooonsky
    @marooonsky 9 месяцев назад

    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.

  • @JustCcRachel
    @JustCcRachel Год назад +3

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

  • @AmanpreetSinghCHD
    @AmanpreetSinghCHD Год назад +1

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

  • @tomashudolin7197
    @tomashudolin7197 Год назад

    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?

  • @svitlanagordiievska3695
    @svitlanagordiievska3695 11 месяцев назад

    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?

  • @LaureanaDelPopolo-oy2dg
    @LaureanaDelPopolo-oy2dg Год назад

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

  • @pete531
    @pete531 Год назад

    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.

  • @hidayam
    @hidayam Год назад +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 Год назад +1

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

  • @ivan.prosic
    @ivan.prosic Год назад

    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

  • @danisimo1826
    @danisimo1826 Год назад

    What you use for presentation?

  • @ShimaMohammadianRad
    @ShimaMohammadianRad 7 месяцев назад

    Thanks for sharing your knowladge. I'm happy to see this

  • @anteadc9868
    @anteadc9868 Год назад

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

  • @liberty3170
    @liberty3170 8 месяцев назад

    Cool selection! Is it possible to download these examples in a figma file?

  • @exgeeinteractive
    @exgeeinteractive Год назад +1

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

  • @Coding-Yogi
    @Coding-Yogi Год назад

    Hey create a video on intresting layouts for SaaS products

  • @shravanmurali1302
    @shravanmurali1302 Год назад

    Do a video about Fonts 👍🏻

  • @matthewguzman6806
    @matthewguzman6806 Год назад +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!

  • @TACDetective
    @TACDetective Год назад

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

  • @EyeseesPictures
    @EyeseesPictures Год назад

    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 Год назад

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

  • @MichaelSarduy-g8s
    @MichaelSarduy-g8s Год назад

    love these vids but please start showing mobile as well

  • @syeadtalal114
    @syeadtalal114 Год назад

    What is the font of hero layout no 9?

  • @uxrkhan
    @uxrkhan 9 месяцев назад

    💻 Time to steal some design inspiration! 😎

  • @해피뉴이어-j8i
    @해피뉴이어-j8i Год назад

    Great video! Thanks for sharing😊

  • @hihi9674
    @hihi9674 Год назад +1

    Good stuff! Subscribed.

  • @codelucky
    @codelucky Год назад

    Thanks man!

  • @pedrienkinkani6855
    @pedrienkinkani6855 Год назад

    I love that video
    Thanks Clark 😊

  • @CharityOchuko-e9i
    @CharityOchuko-e9i 10 месяцев назад +1

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

  • @danielosenipelumi6033
    @danielosenipelumi6033 Год назад +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

  • @ajithr1255
    @ajithr1255 Год назад +1

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

  • @thewebstylist
    @thewebstylist Год назад

    Great showcases hero sections!

  • @LiLa-jp2kr
    @LiLa-jp2kr Год назад

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

  • @designer_N1
    @designer_N1 Год назад

    Very good👍

  • @ib4112
    @ib4112 Год назад

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

  • @ajithr1255
    @ajithr1255 Год назад +1

    2:16 not very challenging to develop IMO!

  • @dizendatb
    @dizendatb Год назад

    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?

  • @khanayan-v7z
    @khanayan-v7z Год назад +1

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

  • @DarsoMAN
    @DarsoMAN Год назад

    Fantastic

  • @SillyWeb
    @SillyWeb Год назад

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

  • @ВитькаМетальников

    very intresting

  • @skelias3409
    @skelias3409 8 месяцев назад +1

    Anyone is here from Bangladesh 😊

  • @nero71845
    @nero71845 Год назад +2

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

  • @Atractiondj
    @Atractiondj Год назад +10

    UX leave the chat

    • @PaytonClarkSmith
      @PaytonClarkSmith  Год назад +6

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

    • @Atractiondj
      @Atractiondj Год назад

      @@PaytonClarkSmith yep )))

    • @fiqihalfarizy4843
      @fiqihalfarizy4843 Год назад

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

    • @deps..
      @deps.. Год назад +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 Год назад +3

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

  • @fourantalha9066
    @fourantalha9066 Год назад +2

    First comment :)

  • @conglo3650
    @conglo3650 Год назад

    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 Год назад

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

  • @HariPrasad-mn5vu
    @HariPrasad-mn5vu Год назад +2

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

    • @Thefirstplayer-Tm
      @Thefirstplayer-Tm Год назад +1

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

    • @HariPrasad-mn5vu
      @HariPrasad-mn5vu Год назад

      @@Thefirstplayer-Tm 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 Год назад +1

    UX design has left the chat..