Тёмный

Designing a Mobile HERO Section + 13 Layout Variations 

Payton Clark Smith
Подписаться 114 тыс.
Просмотров 77 тыс.
50% 1

Опубликовано:

 

27 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 60   
@hubbtech
@hubbtech 2 года назад
Thanks for the inspiration. I might try the interesting layouts on my next project.
@PaytonClarkSmith
@PaytonClarkSmith 2 года назад
💪🏼
@ismailalaia
@ismailalaia 2 года назад
finally someone speaks on the most interesting topic "mobile version" of web design
@Kebbab.213
@Kebbab.213 2 года назад
yeah cause on mobile things are way more restricted
@ismailalaia
@ismailalaia 2 года назад
@@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
@JordanMeyerCA
@JordanMeyerCA 11 месяцев назад
I feel this is especially important for e-commerce.
@stinkleaf
@stinkleaf Месяц назад
Spot on analysis of these examples. I nod my head up and down YES to everything you say your videos!
@TamarBenashviliDesign
@TamarBenashviliDesign 3 месяца назад
Super! always love watching your design inspo videos, thank you!
@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!
@Lanco_M
@Lanco_M 2 года назад
Love this kind of video with multiple exemple. Straight to the point
@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 Год назад
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 8 месяцев назад
It's not a bad idea. I like to create sticky bottom navigation bars at the bottom.
@speechgenius6253
@speechgenius6253 6 месяцев назад
Successful knowing where to put a button, on mobile, means a perfect implementation of Fitt's Law
@mikekusmann5825
@mikekusmann5825 5 месяцев назад
What are your thoughts on putting a lead form below the fold to allow for a stronger hero section?
@MOhaCadeKaCade-w4d
@MOhaCadeKaCade-w4d 6 месяцев назад
Congratulations pro 100k🎉🎉🎉 200k Is coming insha Allah❤❤
@jacksonchan9774
@jacksonchan9774 Год назад
really a fresh air to my mind today😊
@LorettaBangBang
@LorettaBangBang Год назад
I love you Payton!! You're the best!
@Kumar-rq9ro
@Kumar-rq9ro 8 дней назад
Thanks.
@jeyzur
@jeyzur 4 месяца назад
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.
@PepperGuru
@PepperGuru 7 месяцев назад
Would example #8 work best for video loop background imagery?
@Svetlana-hk3mm
@Svetlana-hk3mm 10 месяцев назад
Your videos are great! Thanks!
@vcodev108
@vcodev108 2 года назад
Thank you very much I really liked and enjoyed this video!!!!
@TheLuther7
@TheLuther7 7 месяцев назад
Hey, does anyone have any idea on how to create this kind of spacing on the background like in example #9 inside of elementor?
@MdNaimurRahmanHera
@MdNaimurRahmanHera Год назад
awesome video
@tomf7551
@tomf7551 Год назад
I got a newbie question. whats the builder you use on wordpress to get those looks ? 🤔
@raafat.gilani
@raafat.gilani 4 месяца назад
Same question :)
@videoeventjakarta
@videoeventjakarta Год назад
I think we can use Instagram stories layout mindset for this..
@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 Год назад
@@justicealelumhe8461 as a front end dev that would be like having two websites in one
@komplex7564
@komplex7564 2 года назад
I emailed you two weeks ago and I still haven’t gotten a response
@webdesigntutz
@webdesigntutz Год назад
and who tf are you to be demanding his time?
@komplex7564
@komplex7564 Год назад
@@webdesigntutz who tf are you lmfao
@webdesigntutz
@webdesigntutz Год назад
@@komplex7564 a reality check buddy
@motionmuse5684
@motionmuse5684 Год назад
I like them till I see it on mobile lol. Wish I could reverse design it❤
@eusoumateusrocha
@eusoumateusrocha Год назад
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!
@ionutsabo
@ionutsabo Год назад
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
@MarioSabljakovic
@MarioSabljakovic 8 месяцев назад
Example #10 was really bad, and they're supposed to be an agency? No thanks.
@bobbysilver272
@bobbysilver272 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
@vernielariosa8996
@vernielariosa8996 2 года назад
I am learning a lot from you, Payton. Thanks a lot. Please continue creating helpful videos like this.
@PaytonClarkSmith
@PaytonClarkSmith 2 года назад
Happy to hear this 👍🏻 thanks!
@shirleyansley3084
@shirleyansley3084 2 года назад
Loved these examples. I also love seeing how the navigations are organized on mobile
@sadiquetemitayo6801
@sadiquetemitayo6801 2 года назад
Funny how I searched this keyword this morning and didn’t see anything. And then boom you uploaded a good one🍾🚀
@rafaeltavares4406
@rafaeltavares4406 2 дня назад
Great video! Thanks
@lifealliancegroup
@lifealliancegroup Год назад
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.
@NotoriousN1K
@NotoriousN1K 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! 👌
@charbel4863
@charbel4863 2 месяца назад
@d.o.nmuzic3802
@d.o.nmuzic3802 6 месяцев назад
🙏🏾
@bensonbenson4149
@bensonbenson4149 8 месяцев назад
A very timely video because to be honest, its mobile first..... Great video
@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.
@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
@maxkennan618
@maxkennan618 Год назад
Is example 4 possible on Wix? Been looking for a how to guide on this forever
@mikedouglassstream
@mikedouglassstream 2 года назад
This is great! Wondering what the best HxW is for mobile design, if you had to pick one?
@fabiowebdesigner
@fabiowebdesigner 2 года назад
Love this type of content, Payton!
@nyanya4566
@nyanya4566 11 месяцев назад
6:16
Далее
6 Mobile Section Layouts and Examples You Must See
13:01
11 Section layouts to make your website ultra UNIQUE
13:42
titan tvman's plan (skibidi toilet 77)
01:00
Просмотров 3,6 млн
9 advanced tips of layout & composition in Web Design
16:11
18 Hero Section Designs You Can Steal
11:45
Просмотров 688 тыс.
60-30-10 Color Rule
6:18
Просмотров 1,9 млн
5 UX/UI Portfolios You SHOULD Copy
15:02
Просмотров 69 тыс.
21 Brand New Hero Sections You Must Copy
15:05
Просмотров 23 тыс.
Steal these Hero Sections!
13:45
Просмотров 12 тыс.
Complete Course On Layout Design (MASTER LAYOUT)
21:04
Просмотров 701 тыс.
The Easy Way to Design Top Tier Websites
11:54
Просмотров 435 тыс.
Perfect Homepage Design Explained (in 15 minutes)
16:02