18 Hero Section Designs You Can Steal

[@NotoriousN1K]

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]

Then you should not be a designer. Go and find another job.

[@frankdot.1864]

@@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]

@@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:)

[@thegentlemandude]

@@frankdot.1864 Hey Bro you cant help people who don't want help!

[@frankdot.1864]

@@thegentlemandude Never know until you try.

[@hab256]

Love how you show wireframes and then a real example. Really helps understand the layout in a real-world use case.

[@laszlovitticeps]

Would be nice if they were real examples.. not only concepts on dribbble.. 🤔

[@zerkorj]

​@@laszlovitticepsThey're not only dribble concepts ...

[@eduardassp]

yees when I saw some wireframes I was like no then I loved the real example lol

[@shafee-e]

I don't know how coders gonna code these : |

[@Mobynet]

@@shafee-e Bootstrap html css and Flexbox 🙂

[@__shi_]

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.

[@Mrprashu99]

The comnt section is very positive and downright encouraging! Love it!

[@krzemian]

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).

[@bloggerdynamics9190]

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...

[@jcpluto4555]

I mean all of the links are there. Just go and inspect the page and shorten the window size.

[@catalinim4227]

just open the pages .. jesus

[@atwarwithlife]

@@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

[@davidjohnmorse]

@@catalinim4227 lol dribbble shots are not responsive

[@PaytonClarkSmith]

Watch the mobile version here: kzbin.info/www/bejne/gHPcgIl7hNWLl9U

[@khoaminh5232]

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

[@Julijacreates]

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?

[@tristenvukelich5280]

Man your content is exactly what I was looking for

[@eccentricity9697]

I keep coming back to this video whenever I need inspiration. Great to have a bunch variations in one spot

[@barbierocker]

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!

[@cryMoreLoL]

Love the puzzle one, beautiful.

[@kijazmalik6578]

I'm really impressed by all the ideas and your explanation specifically.

[@mernstackdeveloperabdullah2656]

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.👍

[@LorettaBangBang]

LOVE this collection. I was inspired.

[@sirius8ly]

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.

[@clevermissfox]

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.

[@kvncnls]

Would've been cool to see these same designs on mobile as well. Great video!

[@Sacc2252]

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

[@thewebstylist]

LUV the ‘Quirky’ ones! I’d luv even more if I could buy those layouts (especially if also have animations/dynamic style)!

[@ArnauRos]

Great video as always Payton! Loved the layout at 10:50, also congrats on 20K :)

[@PaytonClarkSmith]

Thank you! I’ve been loving the content you are putting out as well 🔥

[@seanm_smith]

Great video Payton! Can be useful at providing inspiration around hero section design on future projects. Thanks!

[@PaytonClarkSmith]

Happy to hear this!

[@dlsimpson6818]

Plsss do a video on this!!

[@bySterling]

I was thinking the same thing as I’ve been putting mobile on scroll style priority 1 for years

[@Oluwagbemiga_]

Brilliant! I love the way your analysed and categorized the hero sections. The examples also killed it! Fantastic.

[@PaytonClarkSmith]

Thanks 🙏🏼

[@marcoaureliocoelho15]

Really cool video man. Its better than ASMR to me.

[@clairepaton726]

Great video. My only comment is that most websites now are viewed in mobile - do you have a similar video for this?

[@mohamudhussin7188]

I love your channel man , hope you do challenges for the subscribers .. I think it will be something new and exciting

[@PaytonClarkSmith]

Me might in the future!

[@danofcalifornia1043]

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.

[@smartupdates4905]

That Guy Thanks, I will look into it later.

[@luisabalan63]

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.

[@raymondjenkins1161]

How did I miss this?!?!?! Awesome job on this!

[@zoltanzsamboki9841]

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

[@EntertainmentWatch]

Thank you for your great advice on Hero Sections.

[@uifry]

I'm so glad you shared this. It's going to save me a lot of time and effort."

[@Kebbab.213]

Now there’s a lot lot of value in this

[@boheeatelier6681]

great video, thanks! quirky are the best, most creative and interesting, I think

[@conafam]

Loved that Payton. Great video.

[@Mousoukyou]

Thanks so much for the practical examples! Great video.

[@leadercrew]

Great content man! Love it

[@thomasgurchiek3301]

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.

[@Princess_kitty14]

Great for Seth everman! he's even a designer!

[@aminansar5294]

Excellent stuff sir. Keep it coming

[@13LesTadO13]

Thanks for the ideas, bro. You're the man.

[@ZeptejSeFilipa]

Thx man, amazing presentation. What is that website puzzle link?

[@1208Souvenirs]

Will try all ❤😊

[@only_fashion11]

Thank you so much. You solved my all problems related to hero section

[@ДмитрийАпельганц-я5м]

Thank you Payton for systematizing the design of hero sections!

[@shyecharis7582]

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

[@matthewwilson269]

incredible video and wonderfully explained

[@MuttaqiAliMuhammad]

This video is amazing Payton. Thanks!

[@werchsley]

Thank you for these. I learned something new!

[@Adrian_Marmy]

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.

[@christianelisha]

Thank you for this, it helps to have sth to reference for layout ideas.

[@Magedfaiz]

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

[@superpauleesworld8170]

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. :)

[@RocknRollCEO]

Awesome content, Payton. Loved this. Thank you.

[@nevinsronald8728]

😻i really love your Channel, so usefull

[@jaywalker.]

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!

[@soskom]

I love all your videos

[@fishcakesticks]

thank you! i am taking notes! 🙇

[@imadabab]

Brilliant. Thanks a lot. I have subscribed.

[@slavak592]

We need part 2 for this video!

[@TheScienceHutch]

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!

[@michaelryan5910]

Thank you! Inspiring layouts and ideas. Would love to see how these translate to mobile too.

[@chukaobijiaku3037]

Amazing. I am going to apply this to my workflow. Thank you Payton

[@agnidiptahomroy8656]

Very informative video, thank you Payton.

[@techwolfcave]

Nice, I learned something new

[@KgopotsoNtuli]

Dope video man

[@elixirdesign3834]

I love this!! Thank you, Payton. This is so useful!

[@ahmedghallab5342]

شكرا thanks it was amazing and very useful ❤❤

[@Sanjay-Rawal1]

I feel this video very helpful. Thank you!

[@kientran6545]

i love this, very helpful!

[@jela-x6y]

great video! really inspiring. can you please make one for other sections

[@PaytonClarkSmith]

That’s the plan! 👍🏻

[@jaimevtv]

Thank you for this content 😉☺🔥

[@michaelsarduy1461]

would like to see another video like this but including the mobile variation

[@WESimmonsII]

So helpful!!

[@Norell88]

Thank you Payton!

[@AshleyLudlow]

This is awesome! Thank you for sharing.

[@Boltzter]

I learned a lot thank you!

[@carlosgil697]

so cool! I want to try some of this out

[@navya-s3v]

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.

[@JaySnow]

That was 12 minutes of valuable time spending on YT!

[@aledianin]

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 KZbin channel. Cheers 🥂

[@theMadZakuPilot]

great video. I hope you'll make more videos like this for different component in web design.

[@Omhetehmo]

Thanks a lot for such a nice content! I needed exactly this for inspiration

[@maddicares61]

Great video, thank you!

[@esinkovits]

Very well done. I just created some quick wireframe versions of all of those in figma.

[@CorrindaCampbell]

Good collection, thank you. Having a review of the mobile iteration would be helpful.

[@PaytonClarkSmith]

Watch the mobile version here: kzbin.info/www/bejne/gHPcgIl7hNWLl9U

[@akibkhan7308]

Sir u could have also showed how these websites will look on mobile ,to have some idea about the responsiveness

[@henryreinders3031]

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.

[@roebienarnaiz]

Great Video!

[@CarlaSilva-rp1nb]

Just loved the examples versus what you teach! It's an awesome perspective and a really good visual culture 🔥Thank you for that!

[@PHPRunnerTipsAndTricks]

Highly informative. Thank you very much.

[@sam-harrison]

This is such a great video 👍

[@viallymboma9874]

Very useful video 💯🔥🔥

[@nicmhz]

thank you for this content

[@amjmedia7442]

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

[@senseicodes]

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

[@kyler.6645]

This is a great video.

[@nick-kassebaum]

Crazy useful! Thanks!

[@jaylynstatham2520]

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.