Designing a Mobile HERO Section + 13 Layout Variations

Поділитися
Вставка
  • Опубліковано 23 січ 2025

КОМЕНТАРІ • 60

  • @hubbtech
    @hubbtech 2 роки тому +21

    Thanks for the inspiration. I might try the interesting layouts on my next project.

  • @ismailalaia
    @ismailalaia 2 роки тому +69

    finally someone speaks on the most interesting topic "mobile version" of web design

    • @Kebbab.213
      @Kebbab.213 2 роки тому +1

      yeah cause on mobile things are way more restricted

    • @ismailalaia
      @ismailalaia 2 роки тому +12

      @@Kebbab.213 yes the least topic talked about, every desktop design is gorgeous and working perfectly but when it comes to the mobile version lots of the aesthetics and the cool concepts simply don't translate as impactful.
      This topic needs more attention because who's using desktop version of any website these days? Just saying

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

      I feel this is especially important for e-commerce.

  • @eusoumateusrocha
    @eusoumateusrocha Рік тому +10

    I commented on the other video about the lack of mobile-first design videos, this was exactly what I meant, we need this type of videos! Thank you so much for posting this!

  • @shirleyansley3084
    @shirleyansley3084 2 роки тому +3

    Loved these examples. I also love seeing how the navigations are organized on mobile

  • @vernielariosa
    @vernielariosa 2 роки тому +4

    I am learning a lot from you, Payton. Thanks a lot. Please continue creating helpful videos like this.

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

    Spot on analysis of these examples. I nod my head up and down YES to everything you say your videos!

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

    A very timely video because to be honest, its mobile first..... Great video

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

    Awesome, just simply awesome, your presentation is uniform and tight and your delivery of the description of your subject material is spotless, first class, clear and very easily understood. Well done.

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

    Super! always love watching your design inspo videos, thank you!

  • @Lanco_M
    @Lanco_M 2 роки тому

    Love this kind of video with multiple exemple. Straight to the point

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

    I'm a student in the UC system and online education like this and webflow and flux academy's content and many others gives me hope for the future of learning

  • @NotoriousN1K
    @NotoriousN1K 2 роки тому +2

    🔥 Love the first half of these examples, the second half I just don't think work in most cases - but still great to see to inspire some new designs! Thanks! 👌

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

    I love you Payton!! You're the best!

  • @MayankSharma-mb6vk
    @MayankSharma-mb6vk 2 роки тому

    This is some really well organised and informative design content. Loved watching both the web and mobile videos. Great going!

  • @whoisdjsmith
    @whoisdjsmith 2 роки тому

    Love these kinds of videos! I’ve watched your other video on desktop templates a bunch of times for different clients that I have and it’s really been a nice asset to look back on! Keep these coming!

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

    I notice all the navbars are at the top of the screen. What doe you think about moving them to the bottom of the screen so they are accessible with your thumb?

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

      It's not a bad idea. I like to create sticky bottom navigation bars at the bottom.

  • @sadiquetemitayo6801
    @sadiquetemitayo6801 2 роки тому +1

    Funny how I searched this keyword this morning and didn’t see anything. And then boom you uploaded a good one🍾🚀

  • @MOhaCadeKaCade-w4d
    @MOhaCadeKaCade-w4d 10 місяців тому

    Congratulations pro 100k🎉🎉🎉
    200k Is coming insha Allah❤❤

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

    really a fresh air to my mind today😊

  • @ionutsabo
    @ionutsabo 2 роки тому +26

    You know what would be really interesting next? To showcase how these layouts would display on the desktop.
    I've seen some really nice layouts in this video and the one about the hero section on the desktop version of websites, but now I wonder how would all these layouts translate into the version on the opposite device.
    Some of the layouts might be more challenging than others.

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

      he has a video on desktop layouts. you might need to assign them to each other but as we don't always translate desktop to mobile 1:1, sometimes they can look completely different, having a different video is totally fine

  • @fabiowebdesigner
    @fabiowebdesigner 2 роки тому

    Love this type of content, Payton!

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

    What are your thoughts on putting a lead form below the fold to allow for a stronger hero section?

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

    Would example #8 work best for video loop background imagery?

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

    Great video! Thanks

  • @Svetlana-hk3mm
    @Svetlana-hk3mm Рік тому

    Your videos are great! Thanks!

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

    Up to what resolution would you use the stack? I don't mean tech stack.

  •  2 роки тому

    Great content! Thanks for sharing so many good ideas.

  • @vcodev108
    @vcodev108 2 роки тому

    Thank you very much I really liked and enjoyed this video!!!!

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

    Hey, does anyone have any idea on how to create this kind of spacing on the background like in example #9 inside of elementor?

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

    Is example 4 possible on Wix? Been looking for a how to guide on this forever

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

    Successful knowing where to put a button, on mobile, means a perfect implementation of Fitt's Law

  • @mikedouglassstream
    @mikedouglassstream 2 роки тому

    This is great! Wondering what the best HxW is for mobile design, if you had to pick one?

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

    The problem with example no. 4 is that on some mobile browsers like firefox, swiping left and right gestures trigger forward and backward navigation on.

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

    I got a newbie question. whats the builder you use on wordpress to get those looks ? 🤔

  • @Kumar-rq9ro
    @Kumar-rq9ro 4 місяці тому

    Thanks.

  • @justicealelumhe8461
    @justicealelumhe8461 2 роки тому

    Can one create a hero section for desktop and tablet view and create another for mobile. Can it work that way??

    • @PaytonClarkSmith
      @PaytonClarkSmith  2 роки тому

      With tools like Webflow, absolutely!

    • @justicealelumhe8461
      @justicealelumhe8461 2 роки тому

      @@PaytonClarkSmith So one can just hide the desktop hero design and design another for Mobile with webflow

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

      @@justicealelumhe8461 as a front end dev that would be like having two websites in one

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

    awesome video

  • @bobbysilver272
    @bobbysilver272 2 роки тому +2

    Dear Payton,
    I recently came across your youtube channel and it is VERY helpful.
    I've mainly been helping clients by using wordpress, drupal and also raw code if it's for small static sites where the client does not need to add content regularly.
    I have heard about Webflow and I think using it may speed up our production of websites and hence increase income.
    To be blunt, you give do much great free content away; that I was wondering what is your angle? (If any).
    I don't mind. I'm used to paying for stuff or for training or for software. Etc..
    I'm just scratching my head wondering why you give such useful data out to fellow web designers and freelancers (competitors).
    Many thanks,
    Bobby

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

    6:16

  • @d.o.nmuzic3802
    @d.o.nmuzic3802 10 місяців тому

    🙏🏾

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

    I think we can use Instagram stories layout mindset for this..

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

  • @komplex7564
    @komplex7564 2 роки тому

    I emailed you two weeks ago and I still haven’t gotten a response

    • @webdesigntutz
      @webdesigntutz 2 роки тому

      and who tf are you to be demanding his time?

    • @komplex7564
      @komplex7564 2 роки тому

      @@webdesigntutz who tf are you lmfao

    • @webdesigntutz
      @webdesigntutz 2 роки тому +2

      @@komplex7564 a reality check buddy

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

    Example #10 was really bad, and they're supposed to be an agency? No thanks.

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

    I like them till I see it on mobile lol. Wish I could reverse design it❤