Copy these 21 Hero Section Designs

The hero section is the most important part to get right because it’s the first thing people see on your website, before they start to scroll. With these examples from real websites, Matt shows us why these layouts are successful and gives us some new ideas to try out.

🤩 FREE Resources

📱 Find us on SOCIAL MEDIA
Matt's YouTube channel 👉 @MattBruntonUK

[vld]

It would be great if the links to the sites were in the description so we could check them out.

[romanperez]

Thank you for showing the mobile versions as well!

[KristianTheDesigner]

Thanks for including the mobile version alongside the desktop version :) Crucial!

[ESTDashwini]

Can you make a separate video on describing all the designs that come under UI design like what is Hero section, what is wireframe, brand guidelines, etc. And what beginners should learn first.

[yevs.studio]

More of these, please! Thank you for the videos!

[profesor_leon]

Thank you soooo much. Every video I see about hero sections don’t include mobile version, when mobile is way important everyone nowadays browse in mobile. Thanks for giving the two ideas

[jophillipsillustration]

This kind of analysis video has been brilliant. Thank you! 😃

[ameliagoodson]

I don't think I've ever commented on a YouTube video but I just wanted to say thank you for this content! I'm a web developer restructuring my portfolio website and I've been looking for inspiration for my hero section, so this is exactly what I needed. Thanks so much!

[thewebstylist]

Fantastic showcases! Glad you showed mobile view also
Just wish there were links to the sites in the description.

[samreciter]

I love your "entry to art&design" type videos. Really inspiring!

[paulhenricksen]

Wow I loved this one, I'll be coming back again and again for inspiration

[Sydinofficial]

I am a web designer. I learned lots of things form this video. Thank you 👍🏻

[benhawkins]

Appreciate the thoughtful analysis based on solid design principles. Recently discovered you and enjoying your surveys of the designed world. I would love to see even more examples of sites created for the marketplace (I expect branding firm websites to be well designed and with panache). Very informative when you highlight well designed sites that have been made for clients and likely in the context of multiple stakeholders.
Thanks so much!

[mateimaracine]

Great video! i will come back for sure to gen inspiration! <3

[aequitas]

Shu-Ha-Ri, a Japanese concept for learning, mastering and innovation: first learn to copy and meme something, then master it by bending, then innovate. There is as you say no problem in copying for practice reasons and as long as you do not break cipyrights.

[nier]

thank you for showing the mobile version. Most channels do not do this

[renanrubini]

I'm setting up an e-commerce and would like to explore different visuals and animations on each product page. In this case, is it necessary to follow a standard for the designs or can I make each page differently from the others?

[vd]

Mobile layout is so hard, I don't struggle that much creating an amazing desktop view but mobile I just go blank and just rely on the safest option, stacking everything properly. :(
I would love to see you explore just various mobile design ideas, the drastic and fairly creative but easier to follow or adhere to.
I also wonder how to deal with desktop hover effects on mobile, instead of just disabling are there any ideas how to incorporate them effectively?
Last and not the least, most of the designs you shared are full bleed that go edge-to-edge, at what point do we decide should center our design? 1440px is getting so common and so beyond that should be just keep expanding our design to fit the viewport width? That sounds a bit odd to me but some designs are great full width, but not really accessible or reasonable.
Thank you.

[Mooooty]

"Good Artists Borrow....Great Artists Steal" - Pablo Picasso

[DesignDen]

How do you source images to recreate the mentioned websites?