Designing a Mobile HERO Section + 13 Layout Variations
Вставка
- Опубліковано 13 тра 2024
- ⚡Join my exclusive newsletter for web designers:
www.paytonclarksmith.com/news...
You will get weekly tips, resources, challenged and more! 🔥
Apply to join our tribe of web designers at:
www.paitpro.com
🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
Watch these vids:
🎥 18 HERO Section Layouts You Can Steal🎥
• 18 Hero Section Design...
🎥 ULTIMATE guide to becoming a web designer🎥
• The ULTIMATE Guide To ...
🎥How to build a web design agency🎥
• How to start a web des...
Timestamps:
0:00 Intro
0:32 Example #1
1:08 Example #2
1:53 Example #3
2:37 Example #4
3:30 Example #5
4:01 Example #6
4:39 Example #7
5:50 Example #8
6:59 Example #9
7:45 Example #10
8:43 Example #11
9:52 Example #12
11:44 Example #13
🟦🟦🟦🟦🟦🟦🟦🟦🟦🟦
Featured work:
1. dribbble.com/shots/18049934-M...
2. dribbble.com/shots/15517919-A...
3. dribbble.com/shots/7500955-Re...
4. dribbble.com/shots/19185497-A...
5. dribbble.com/shots/5977833-Ar...
6. dribbble.com/shots/17723358-A...
7. Unknown
8. dribbble.com/shots/18285139-G...
9. dribbble.com/shots/16830362-F...
10. dribbble.com/shots/17262767-C...
11. dribbble.com/shots/18213912-N...
12. dribbble.com/shots/17534837-S...
13. www.behance.net/gallery/75031...
Designing a Mobile HERO Section + 13 Layout Variations
Thanks for the inspiration. I might try the interesting layouts on my next project.
💪🏼
finally someone speaks on the most interesting topic "mobile version" of web design
yeah cause on mobile things are way more restricted
@@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
I feel this is especially important for e-commerce.
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!
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!
Love this kind of video with multiple exemple. Straight to the point
Loved these examples. I also love seeing how the navigations are organized on mobile
This is some really well organised and informative design content. Loved watching both the web and mobile videos. Great going!
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.
🔥 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! 👌
Great content! Thanks for sharing so many good ideas.
Love this type of content, Payton!
I love you Payton!! You're the best!
Thank you very much I really liked and enjoyed this video!!!!
Congratulations pro 100k🎉🎉🎉
200k Is coming insha Allah❤❤
I am learning a lot from you, Payton. Thanks a lot. Please continue creating helpful videos like this.
Happy to hear this 👍🏻 thanks!
Your videos are great! Thanks!
This is great! Wondering what the best HxW is for mobile design, if you had to pick one?
really a fresh air to my mind today😊
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
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.
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
A very timely video because to be honest, its mobile first..... Great video
What are your thoughts on putting a lead form below the fold to allow for a stronger hero section?
Is example 4 possible on Wix? Been looking for a how to guide on this forever
Funny how I searched this keyword this morning and didn’t see anything. And then boom you uploaded a good one🍾🚀
awesome video
Would example #8 work best for video loop background imagery?
Successful knowing where to put a button, on mobile, means a perfect implementation of Fitt's Law
Up to what resolution would you use the stack? I don't mean tech stack.
Hey, does anyone have any idea on how to create this kind of spacing on the background like in example #9 inside of elementor?
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.
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?
It's not a bad idea. I like to create sticky bottom navigation bars at the bottom.
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
I got a newbie question. whats the builder you use on wordpress to get those looks ? 🤔
Same question :)
🙏🏾
Can one create a hero section for desktop and tablet view and create another for mobile. Can it work that way??
With tools like Webflow, absolutely!
@@PaytonClarkSmith So one can just hide the desktop hero design and design another for Mobile with webflow
@@justicealelumhe8461 as a front end dev that would be like having two websites in one
I think we can use Instagram stories layout mindset for this..
6:16
I like them till I see it on mobile lol. Wish I could reverse design it❤
I emailed you two weeks ago and I still haven’t gotten a response
and who tf are you to be demanding his time?
@@webdesigntutz who tf are you lmfao
@@komplex7564 a reality check buddy
Example #10 was really bad, and they're supposed to be an agency? No thanks.