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.
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!
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 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.
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?
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.
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.
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
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. :)
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
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.
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).
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
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 TH-cam channel. Cheers 🥂
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.
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
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.
I simply love this, but I hate that we live in a "mobile-first" society and not a single video about design is imerse in that concept. But great video!
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.👍
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 ! 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.
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
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.
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.
Strong branding through web design contributes to a cohesive identity for your company. Consistent use of colors, fonts, and artwork strengthens your brand and fosters confidence among your audience.
Making a typology of different "Heroes" is an interesting idea. But one can say that the possibilities are endless if you are a master in grids. Using grids in a professional way I can show you 100 more options of Heros. That depends on the grids management and has been said since more than 20 years ago.
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!
My problem isn't finding a layout, it's more finding a creative heading and especially an image. Where did these people get these images from? I'm checking sites like freepik for hours but can't find one that matches so perfectly
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.
This video is very useful but there's always something missing that I never find in web design videos. Most of users are mobile so we have to focus more on mobile versions of our website. I know, they are boring, you have less space and things look uglier than how you wanted them to be, but still they are the main visitors to your website. We need a video like this but for mobile websites
Thanks, but how do all those layouts look on mobile screens? Sometimes, you can have a great looking layout on desktops that doesn't look so good on mobiles.
just a constructive feedback, please check your sound levels for your next piece of content. Right now I am struggling to hear you out clearly, and I have to put on earbuds
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!
@@thegentlemandude 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:
th-cam.com/video/JByOVEOpXas/w-d-xo.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.
Thx man, amazing presentation. What is that website puzzle link?
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!
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 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 video. My only comment is that most websites now are viewed in mobile - do you have a similar video for this?
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?
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.
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.
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
Would've been cool to see these same designs on mobile as well. Great video!
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. :)
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
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.
I keep coming back to this video whenever I need inspiration. Great to have a bunch variations in one spot
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).
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
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 TH-cam channel. Cheers 🥂
thnks alot i'm planning for designing a few websites but hero sections always bother me you just solve my main issues
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
Brilliant! I love the way your analysed and categorized the hero sections. The examples also killed it! Fantastic.
Thanks 🙏🏼
Great for Seth everman! he's even a designer!
The comnt section is very positive and downright encouraging! Love it!
LUV the ‘Quirky’ ones! I’d luv even more if I could buy those layouts (especially if also have animations/dynamic style)!
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.
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
I'm really impressed by all the ideas and your explanation specifically.
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.
That was 12 minutes of valuable time spending on YT!
great video! really inspiring. can you please make one for other sections
That’s the plan! 👍🏻
I simply love this, but I hate that we live in a "mobile-first" society and not a single video about design is imerse in that concept. But great video!
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
Thank you! Inspiring layouts and ideas. Would love to see how these translate to mobile too.
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 your channel man , hope you do challenges for the subscribers .. I think it will be something new and exciting
Me might in the future!
Man your content is exactly what I was looking for
Good collection, thank you. Having a review of the mobile iteration would be helpful.
Watch the mobile version here:
th-cam.com/video/JByOVEOpXas/w-d-xo.html
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
Very well done. I just created some quick wireframe versions of all of those in figma.
LOVE this collection. I was inspired.
Now there’s a lot lot of value in this
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 !
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.
would like to see another video like this but including the mobile variation
That Guy Thanks, I will look into it later.
Thank you for your work! But there is one thing. Where are mobile layouts?
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
We need part 2 for this video!
also need a mobile version
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.
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.
Thank you Payton for systematizing the design of hero sections!
Nice video, but would be nice to see how these hero sections break down for mobile.
Thank you for your great advice on Hero Sections.
Strong branding through web design contributes to a cohesive identity for your company. Consistent use of colors, fonts, and artwork strengthens your brand and fosters confidence among your audience.
Making a typology of different "Heroes" is an interesting idea. But one can say that the possibilities are endless if you are a master in grids. Using grids in a professional way I can show you 100 more options of Heros. That depends on the grids management and has been said since more than 20 years ago.
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!
Thank you so much. You solved my all problems related to hero section
My problem isn't finding a layout, it's more finding a creative heading and especially an image. Where did these people get these images from? I'm checking sites like freepik for hours but can't find one that matches so perfectly
Awesome stuff! Would love to see these with their responsive design counterparts for mobile and tablet!
Really cool video man. Its better than ASMR to me.
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
How did I miss this?!?!?! Awesome job on this!
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 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 🔥
This video is very useful but there's always something missing that I never find in web design videos. Most of users are mobile so we have to focus more on mobile versions of our website. I know, they are boring, you have less space and things look uglier than how you wanted them to be, but still they are the main visitors to your website. We need a video like this but for mobile websites
Consumers are moving to mobile for shopping. This seems like it should be a "blast from the past" video.
Watch the mobile version here:
th-cam.com/video/JByOVEOpXas/w-d-xo.html
Thanks for the ideas, bro. You're the man.
great video. I hope you'll make more videos like this for different component in web design.
Will try all ❤😊
Amazing. I am going to apply this to my workflow. Thank you Payton
Love the content, but please raise the audio! 😊
Thanks so much for the practical examples! Great video.
Thanks, but how do all those layouts look on mobile screens? Sometimes, you can have a great looking layout on desktops that doesn't look so good on mobiles.
incredible video and wonderfully explained
just a constructive feedback, please check your sound levels for your next piece of content. Right now I am struggling to hear you out clearly, and I have to put on earbuds
Now please do this for all types of sections. Like Feature, Contact etc...
I'm so glad you shared this. It's going to save me a lot of time and effort."
Yes it can - don't despair!
Dang the one after puzzle could be a challenge to develop with responsive versions.
Thank you for this, it helps to have sth to reference for layout ideas.
Just loved the examples versus what you teach! It's an awesome perspective and a really good visual culture 🔥Thank you for that!
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...
How about showing the mobile version too?
Thank you for these. I learned something new!
Awesome content, Payton. Loved this. Thank you.
lmao ikr! I thought I was missing sotNice tutorialng and lost focus for the rest of the video smh
thank you! i am taking notes! 🙇
Excellent stuff sir. Keep it coming
Nice, I learned something new
so cool! I want to try some of this out
crystal clear is a nice drink
so what are we picking as the best Hero section
please make a video about how to create amazing imagery