Loved seeing all of these. I have been doing a few websites recently and the hero sections are all just feeling too similar. Ready to shake things up for my next project. Thanks!
@@almacencompras5833 Yes, because every designer is perfect from the get-go. Kindness goes a long way my man! You should be supportive of people wanting to improve themselves:)
@@almacencompras5833 Yes, because every designer is perfect from the get-go. Kindness goes a long way my man! You should be supportive of people wanting to improve themselves:)
@@jcpluto4555 i get your point, but speaking for him, nearly all the links are dribbble links and not links to the actual websites showing the hero section for mobile
For my very first project, I was looking for different hero layout, after 2 days, I finally found this video which is a life savior, thank you so much, got so much inspiration. Such a great video with wireframes and example, it helped a lot.
1:30 actually quite the contrary, this can increase CVR on product pages due to a blocking effect of the left-hand image (and that is precisely because we read left-to-right, but in that case it's a positive effect).
The old school hero, imo, is most commonly found in retail. Its still quite effective, but I think its hard to pull off due to 1) finding the proper asset to place behind the text (not to light), 2) positioning of text can be tricky, and 3) I found myself having to add a gray overlay to get text to look appealing. Centered Hero is probably my most used. It gets the job done and its just clean looking.
I'm not too familiar with Hero sections on a website. I'm a beginner, self-learning aspiring entrepreneur finding my way in watching videos that I can understand. Thank you!
Been watcNice tutorialng your vids for a good few weeks now, learning new sNice tutorialt each day. my worksoftow has improved so much since watcNice tutorialng
Great vid!!!! You know what would be great also is if you took this same video and did a part II showing how each layout transforms to both tablet and then mobile devices. Great work.
Great video and super helpful! I did notice however, there were 15 examples, and the title says 18. Not a big deal, as I loved the content, but you might want to consider fixing the name of the video to reflect the true amount of layouts shown.
I think a lot of it is about taste. I'm a big fan of the oldschool layout. Never gets old in my opinion. Who doesn't like full Screen Media with text overlay?
Hey Payton, I keep coming back to these videos for inspiration, thank you! I'm curious about the "floating" layout at 4:20, would that be possible in Framer? Are the floating elements positioned with a grid, or with absolute positioning, or how? 🤔 Anyone with an answer, please feel free!
These ideas are really cool. Would you be able to show and talk through examples of how these types of design respond? Sometimes creative designs don't scale so well or have accessibility problems so it'd be great to hear you touch on responsiveness and how they can work accessibility wise.
Thanks for taking the time to make this video. I am def bored of the traditional hero layout and when I have screenshots of my portfolio side by side, they all have that traditional layout and similar elements which looks cookie-cutter. Gonna give a few of these a try.
woh woh woh...🤯 You are making some really awesome videos. These types of videos are really helpful. Make sure to continue making these types of videos. I really want some more videos on layout designs. Really good work. Keep it up.👍
I love these examples. I'm curious what they all look like on phones. Most responsive websites seem the same, and I'd love to see some examples of creative, responsive websites.
Great job with this - SUPER HELPFUL so thank you very much Payton. It would have been helpful if you had numbered them so we could easily take note of the ones we like. :)
Am new to design and i love this as we get to see real world examples. Wish u included mobile view for the examples cause some of the examples seem hard to make them mobile friendly
oh my Gosh. What useful content! :) I love to create Hero sections. One of the most important parts of a website. I run to remake these hero sections in Figma to practice stunning Hero Sections Layout. I fully appreciate this video! :) Thanks
The only thing I hate when showcasing designs like these is that alot of these websites aren't websites that perform well or even actual websites but more so concepts from dribbble, behance, etc
This video was really nice. I went to check the last website and unfortunately they changed it 😢. An idea for series if you ever need is to go by topics... What works for a travel website and what doesn't work. What works for beauty etc... I absolutely loved this video. Thank you for your time and wishing lots of more views, likes and success on your RUclips channel. Cheers 🥂
such an awesome video. I need this for every kind of section. 😆👌 However, I just had a glimpse at your playlists and I think I'm seeing some interesting stuff to watch.
Great video. Thank you so much. Side note, the volume on your mic is really really low even at max volume on my pc it doesn't do much. Please look into it
Thanks ! But I really prefer the old school hero layout. For mobile device it’s simply the best and if your main focus is a web application, that will be more use in smartphones, it’s definitely the best option. Thanks for the video, I’m currently working on an mvp development as fullstack engineer and CEO.
Nice and well made video! Also the examples are really fits in the place. One question; how can a developer find such a images to make side projects ? aiming a developer portfolio, not a designer portfolio.
How do I create the one you use for PaitPro? I've been stuck on it as I'm a beginner in webflow. I've already created my own site but want to practise more. I'm stuck on the images & trying to get them to look good on mobile landscape & mobile portrait. I'm not sure what I should use (columns, grid, etc) to get the writing in the middle & the images on the outside.
Personally I left-align text 99% of the time otherwise it forces the eyes to move in an unconventional pattern rather than a more natural “Z-shaped” pattern how English speakers read text. My strategy as a designer is to subtract from the design rather than adding to it for increased clarity and simplicity
I really like the videos and layouts...watched many of your videos in this regard -- thank you. However, these are great on wide screens, but, as we all know, these layouts won't work on mobile (usually getting stacked). I'd find it interesting to see design transitions from desktop to mobile using the same elements but changing it up for mobile - after all, mobile is making up a good percentage of views these days.
Very Informative & Useful However, could it be possible for you to attach a PDF in discretion of the mentioned layouts, for ease of users and for future reference.
Loved seeing all of these. I have been doing a few websites recently and the hero sections are all just feeling too similar. Ready to shake things up for my next project. Thanks!
Then you should not be a designer. Go and find another job.
@@almacencompras5833 Yes, because every designer is perfect from the get-go. Kindness goes a long way my man! You should be supportive of people wanting to improve themselves:)
@@almacencompras5833 Yes, because every designer is perfect from the get-go. Kindness goes a long way my man! You should be supportive of people wanting to improve themselves:)
@@frankdot.1864 Hey Bro you cant help people who don't want help!
@@Umarjazeer Never know until you try.
Love how you show wireframes and then a real example. Really helps understand the layout in a real-world use case.
Would be nice if they were real examples.. not only concepts on dribbble.. 🤔
@@laszlovitticepsThey're not only dribble concepts ...
yees when I saw some wireframes I was like no then I loved the real example lol
I don't know how coders gonna code these : |
@@shafee-e Bootstrap html css and Flexbox 🙂
I'd like a version of this video showing the design on mobile, considering nearly 8 out of 10 visitors to my / client sites are from mobile devices...
I mean all of the links are there. Just go and inspect the page and shorten the window size.
just open the pages .. jesus
@@jcpluto4555 i get your point, but speaking for him, nearly all the links are dribbble links and not links to the actual websites showing the hero section for mobile
@@catalinim4227 lol dribbble shots are not responsive
Watch the mobile version here:
ruclips.net/video/JByOVEOpXas/видео.html
For my very first project, I was looking for different hero layout, after 2 days, I finally found this video which is a life savior, thank you so much, got so much inspiration. Such a great video with wireframes and example, it helped a lot.
The comnt section is very positive and downright encouraging! Love it!
1:30 actually quite the contrary, this can increase CVR on product pages due to a blocking effect of the left-hand image (and that is precisely because we read left-to-right, but in that case it's a positive effect).
The old school hero, imo, is most commonly found in retail. Its still quite effective, but I think its hard to pull off due to 1) finding the proper asset to place behind the text (not to light), 2) positioning of text can be tricky, and 3) I found myself having to add a gray overlay to get text to look appealing.
Centered Hero is probably my most used. It gets the job done and its just clean looking.
Brilliant! I love the way your analysed and categorized the hero sections. The examples also killed it! Fantastic.
Thanks 🙏🏼
Great video as always Payton! Loved the layout at 10:50, also congrats on 20K :)
Thank you! I’ve been loving the content you are putting out as well 🔥
I'm not too familiar with Hero sections on a website. I'm a beginner, self-learning aspiring entrepreneur finding my way in watching videos that I can understand. Thank you!
Would've been cool to see these same designs on mobile as well. Great video!
I keep coming back to this video whenever I need inspiration. Great to have a bunch variations in one spot
Great video Payton! Can be useful at providing inspiration around hero section design on future projects. Thanks!
Happy to hear this!
Plsss do a video on this!!
I was thinking the same thing as I’ve been putting mobile on scroll style priority 1 for years
Been watcNice tutorialng your vids for a good few weeks now, learning new sNice tutorialt each day. my worksoftow has improved so much since watcNice tutorialng
Great vid!!!! You know what would be great also is if you took this same video and did a part II showing how each layout transforms to both tablet and then mobile devices. Great work.
Man your content is exactly what I was looking for
Great video and super helpful! I did notice however, there were 15 examples, and the title says 18. Not a big deal, as I loved the content, but you might want to consider fixing the name of the video to reflect the true amount of layouts shown.
I think a lot of it is about taste. I'm a big fan of the oldschool layout. Never gets old in my opinion. Who doesn't like full Screen Media with text overlay?
I'm really impressed by all the ideas and your explanation specifically.
Great video. My only comment is that most websites now are viewed in mobile - do you have a similar video for this?
Hey Payton, I keep coming back to these videos for inspiration, thank you! I'm curious about the "floating" layout at 4:20, would that be possible in Framer? Are the floating elements positioned with a grid, or with absolute positioning, or how? 🤔
Anyone with an answer, please feel free!
I love your channel man , hope you do challenges for the subscribers .. I think it will be something new and exciting
Me might in the future!
Love the puzzle one, beautiful.
These ideas are really cool. Would you be able to show and talk through examples of how these types of design respond? Sometimes creative designs don't scale so well or have accessibility problems so it'd be great to hear you touch on responsiveness and how they can work accessibility wise.
Thanks for taking the time to make this video. I am def bored of the traditional hero layout and when I have screenshots of my portfolio side by side, they all have that traditional layout and similar elements which looks cookie-cutter. Gonna give a few of these a try.
Thanks for the content, I am going to use several of these styles to help out some clients and potential clients get started with their businesses
Thx man, amazing presentation. What is that website puzzle link?
woh woh woh...🤯 You are making some really awesome videos. These types of videos are really helpful. Make sure to continue making these types of videos. I really want some more videos on layout designs. Really good work. Keep it up.👍
I love these examples. I'm curious what they all look like on phones. Most responsive websites seem the same, and I'd love to see some examples of creative, responsive websites.
LOVE this collection. I was inspired.
Really cool video man. Its better than ASMR to me.
Great job with this - SUPER HELPFUL so thank you very much Payton. It would have been helpful if you had numbered them so we could easily take note of the ones we like. :)
LUV the ‘Quirky’ ones! I’d luv even more if I could buy those layouts (especially if also have animations/dynamic style)!
Thank you Payton for systematizing the design of hero sections!
Am new to design and i love this as we get to see real world examples. Wish u included mobile view for the examples cause some of the examples seem hard to make them mobile friendly
How did I miss this?!?!?! Awesome job on this!
Great content! Love your energy and the examples you show to illustrate each layout. As a new UI Design student, this was very helpful! Thanks!
great video, thanks! quirky are the best, most creative and interesting, I think
oh my Gosh. What useful content! :) I love to create Hero sections. One of the most important parts of a website. I run to remake these hero sections in Figma to practice stunning Hero Sections Layout. I fully appreciate this video! :) Thanks
The only thing I hate when showcasing designs like these is that alot of these websites aren't websites that perform well or even actual websites but more so concepts from dribbble, behance, etc
This video was really nice. I went to check the last website and unfortunately they changed it 😢. An idea for series if you ever need is to go by topics... What works for a travel website and what doesn't work. What works for beauty etc... I absolutely loved this video. Thank you for your time and wishing lots of more views, likes and success on your RUclips channel. Cheers 🥂
Awesome content, Payton. Loved this. Thank you.
Excellent stuff sir. Keep it coming
Thank you for your great advice on Hero Sections.
Thanks so much for the practical examples! Great video.
That was 12 minutes of valuable time spending on YT!
Good collection, thank you. Having a review of the mobile iteration would be helpful.
Watch the mobile version here:
ruclips.net/video/JByOVEOpXas/видео.html
Awesome stuff! Would love to see these with their responsive design counterparts for mobile and tablet!
Thank you! Inspiring layouts and ideas. Would love to see how these translate to mobile too.
great video! really inspiring. can you please make one for other sections
That’s the plan! 👍🏻
Thanks for the ideas, bro. You're the man.
Thank you so much. You solved my all problems related to hero section
Loved that Payton. Great video.
Amazing. I am going to apply this to my workflow. Thank you Payton
Now there’s a lot lot of value in this
This video is amazing Payton. Thanks!
Great content man! Love it
I love this!! Thank you, Payton. This is so useful!
I'm so glad you shared this. It's going to save me a lot of time and effort."
such an awesome video. I need this for every kind of section. 😆👌 However, I just had a glimpse at your playlists and I think I'm seeing some interesting stuff to watch.
Just loved the examples versus what you teach! It's an awesome perspective and a really good visual culture 🔥Thank you for that!
incredible video and wonderfully explained
Thank you for these. I learned something new!
great video. I hope you'll make more videos like this for different component in web design.
Very well done. I just created some quick wireframe versions of all of those in figma.
Thank you for this, it helps to have sth to reference for layout ideas.
Very informative video, thank you Payton.
We need part 2 for this video!
Great video. Thank you so much. Side note, the volume on your mic is really really low even at max volume on my pc it doesn't do much. Please look into it
Sir u could have also showed how these websites will look on mobile ,to have some idea about the responsiveness
Great for Seth everman! he's even a designer!
Brilliant. Thanks a lot. I have subscribed.
Thanks !
But I really prefer the old school hero layout. For mobile device it’s simply the best and if your main focus is a web application, that will be more use in smartphones, it’s definitely the best option.
Thanks for the video, I’m currently working on an mvp development as fullstack engineer and CEO.
Nice and well made video! Also the examples are really fits in the place. One question; how can a developer find such a images to make side projects ? aiming a developer portfolio, not a designer portfolio.
How do I create the one you use for PaitPro? I've been stuck on it as I'm a beginner in webflow. I've already created my own site but want to practise more. I'm stuck on the images & trying to get them to look good on mobile landscape & mobile portrait. I'm not sure what I should use (columns, grid, etc) to get the writing in the middle & the images on the outside.
I feel this video very helpful. Thank you!
Personally I left-align text 99% of the time otherwise it forces the eyes to move in an unconventional pattern rather than a more natural “Z-shaped” pattern how English speakers read text. My strategy as a designer is to subtract from the design rather than adding to it for increased clarity and simplicity
Thanks a lot for such a nice content! I needed exactly this for inspiration
That Guy Thanks, I will look into it later.
😻i really love your Channel, so usefull
i love this, very helpful!
would like to see another video like this but including the mobile variation
thank you! i am taking notes! 🙇
Nice information
Please make more videos like this in future
Nice, I learned something new
I really like the videos and layouts...watched many of your videos in this regard -- thank you. However, these are great on wide screens, but, as we all know, these layouts won't work on mobile (usually getting stacked). I'd find it interesting to see design transitions from desktop to mobile using the same elements but changing it up for mobile - after all, mobile is making up a good percentage of views these days.
Highly informative. Thank you very much.
so cool! I want to try some of this out
Great video. It's interesting to see how many designs you can come up with using the same content, and also seeing why some aren't as good as others.
I haven’t created a single project on there. On my iPhone and iPad on the other hand, I’ve created multiple s and soft in just one
This is awesome! Thank you for sharing.
I love all your videos
Dope video man
thnks alot i'm planning for designing a few websites but hero sections always bother me you just solve my main issues
Nice video that's really interesting and helfull to create better content, i'm glad i find you i subscribe
Very Informative & Useful
However, could it be possible for you to attach a PDF in discretion of the mentioned layouts, for ease of users and for future reference.
Hey dude, just subbed! How would you go about making a photography here section and making it unique? Everyone seems stuck on full page iamges...
Will try all ❤😊
Some great designs to highlight indeed! Inspired to try a few myself indeed
Thank you for this content 😉☺🔥