18 Hero Section Designs You Can Steal
Vložit
- čas přidán 8. 06. 2024
- ⚡Join my exclusive newsletter for web designers:
www.paytonclarksmith.com/news...
You will get weekly tips, resources, challenged and more! 🔥
Apply to join our tribe of web designers at:
www.paitpro.com
🟪🟪🟪🟪🟪🟪🟪🟪🟪🟪
Watch these too:
🎥 13 Mobile HERO Section Layouts🎥
• Designing a Mobile HER...
🎥 ULTIMATE guide to becoming a web designer🎥
• The ULTIMATE Guide To ...
🎥How to build a web design agency🎥
• How to start a web des...
0:00 Intro
0:15 Common hero section layouts
1:52 Old school hero section layouts
2:40 Centered hero section layouts
4:38 Horizontal hero section variations
6:26 Quirky hero section layouts
🟪🟪🟪🟪🟪🟪🟪🟪🟪🟪
Featured work:
Stairs: dribbble.com/shots/17132804-T...
Fino: dribbble.com/shots/16965774--...
Noise: dribbble.com/shots/16539339-N...
Quillow: dribbble.com/shots/15012941-L...
Secret Developers: dribbble.com/shots/11560877-R...
Payking: dribbble.com/shots/18972760-W...
Elaster Bank: dribbble.com/shots/15624798-E...
Home Hero: dribbble.com/shots/9454508-Ho...
Spline: dribbble.com/shots/17520827-3...
Cryptopolis.io: dribbble.com/shots/17850128-C...
Shelter: dribbble.com/shots/15449339-W...
The Qi: dribbble.com/shots/16287171-F...
Ideate Food: dribbble.com/shots/14992435-F...
Trend: dribbble.com/shots/17744516-T...
Moco: dribbble.com/shots/16989871--...
Puzzle: dribbble.com/shots/18492976-P...
Onebank: dribbble.com/shots/18803069-o...
The Agensea: dribbble.com/shots/17489064-T...
18 Hero Section Designs You Can Steal
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.
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:
czcams.com/video/JByOVEOpXas/video.html
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 : |
@@PonnaiyaSwami Bootstrap html css and Flexbox 🙂
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!
I keep coming back to this video whenever I need inspiration. Great to have a bunch variations in one spot
Just loved the examples versus what you teach! It's an awesome perspective and a really good visual culture 🔥Thank you for that!
Brilliant! I love the way your analysed and categorized the hero sections. The examples also killed it! Fantastic.
Thanks 🙏🏼
Love the puzzle one, beautiful.
LOVE this collection. I was inspired.
Thank you Payton for systematizing the design of hero sections!
Awesome content, Payton. Loved this. Thank you.
Man your content is exactly what I was looking for
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
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.
Thanks so much for the practical examples! Great video.
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.
I love this!! Thank you, Payton. This is so useful!
Amazing. I am going to apply this to my workflow. Thank you Payton
Thank you for your great advice on Hero Sections.
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 🔥
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
also need a mobile version
Thank you so much. You solved my all problems related to hero section
Thanks for the ideas, bro. You're the man.
This video is amazing Payton. Thanks!
Loved that Payton. Great video.
Great content man! Love it
That was 12 minutes of valuable time spending on YT!
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.
Excellent stuff sir. Keep it coming
The comnt section is very positive and downright encouraging! Love it!
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
incredible video and wonderfully explained
That's Incredible Content. Thanks mate. Subscribed.
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.
Very informative video, thank you Payton.
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.👍
Really cool video man. Its better than ASMR to me.
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!
Thanks a lot for such a nice content! I needed exactly this for inspiration
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.
How did I miss this?!?!?! Awesome job on this!
Thank you for this, it helps to have sth to reference for layout ideas.
Belo trabalho. Aprendendo muito com seus vídeos.
Would've been cool to see these same designs on mobile as well. Great video!
Thank you for these. I learned something new!
Very well done. I just created some quick wireframe versions of all of those in figma.
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 love all your videos
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. :)
great video. I hope you'll make more videos like this for different component in web design.
Nice, I learned something new
Highly informative. Thank you very much.
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.
Great video! Thanks
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
Brilliant. Thanks a lot. I have subscribed.
😻i really love your Channel, so usefull
Dope video man
Great video. Thanks
i love this, very helpful!
So helpful!!
so cool! I want to try some of this out
This is awesome! Thank you for sharing.
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
This is brilliantly helpful thank you.
Some great designs to highlight indeed! Inspired to try a few myself indeed
I feel this video very helpful. Thank you!
That Guy Thanks, I will look into it later.
great video, thanks! quirky are the best, most creative and interesting, I think
شكرا thanks it was amazing and very useful ❤❤
Tanks for this content. Really good
thank you! i am taking notes! 🙇
Thank you Payton!
Awesome stuff! Would love to see these with their responsive design counterparts for mobile and tablet!
Great Video!
Amazing Content, Thank you!
I learned a lot thank you!
thank you for this content
Now there’s a lot lot of value in this
Great, thank you!
Crazy useful! Thanks!
I'm so glad you shared this. It's going to save me a lot of time and effort."
really good.. thnk u
Nice information
Please make more videos like this in future
Nice video that's really interesting and helfull to create better content, i'm glad i find you i subscribe
Good job!
Great Job.
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 is a great video.
Hey Awesome video!
Thank you for this content 😉☺🔥
Very useful video 💯🔥🔥
LUV the ‘Quirky’ ones! I’d luv even more if I could buy those layouts (especially if also have animations/dynamic style)!
This is such a great video 👍
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!
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 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!
so useful vid tnx ❤
Great for Seth everman! he's even a designer!