18 Hero Section Designs You Can Steal
Вставка
- Опубліковано 27 кві 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:
ua-cam.com/video/JByOVEOpXas/v-deo.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!
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.
I keep coming back to this video whenever I need inspiration. Great to have a bunch variations in one spot
Awesome content, Payton. Loved this. Thank you.
Thank you Payton for systematizing the design of hero sections!
LOVE this collection. I was inspired.
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.
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.
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
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
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 love this!! Thank you, Payton. This is so useful!
Amazing. I am going to apply this to my workflow. Thank you Payton
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.
Would've been cool to see these same designs on mobile as well. Great video!
Thanks for the ideas, bro. You're the man.
Thank you for your great advice on Hero Sections.
Great content man! Love it
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.
Excellent stuff sir. Keep it coming
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. :)
Loved that Payton. Great video.
Thank you so much. You solved my all problems related to hero section
That's Incredible Content. Thanks mate. Subscribed.
Man your content is exactly what I was looking for
Brilliant. Thanks a lot. I have subscribed.
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 is amazing Payton. Thanks!
This is awesome! Thank you for sharing.
Belo trabalho. Aprendendo muito com seus vídeos.
Highly informative. Thank you very much.
incredible video and wonderfully explained
This is brilliantly helpful thank you.
Thank you for this, it helps to have sth to reference for layout ideas.
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
Very informative video, thank you Payton.
Thanks a lot for such a nice content! I needed exactly this for inspiration
i love this, very helpful!
Thank you for these. I learned something new!
شكرا thanks it was amazing and very useful ❤❤
great video. I hope you'll make more videos like this for different component in web design.
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! Thanks
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
Some great designs to highlight indeed! Inspired to try a few myself indeed
Tanks for this content. Really good
Awesome stuff! Would love to see these with their responsive design counterparts for mobile and tablet!
I feel this video very helpful. Thank you!
Dope video man
Amazing Content, Thank you!
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.👍
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.
Crazy useful! Thanks!
great video! really inspiring. can you please make one for other sections
That’s the plan! 👍🏻
How did I miss this?!?!?! Awesome job on this!
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 learned a lot thank you!
Thank you for this content 😉☺🔥
The comnt section is very positive and downright encouraging! Love it!
great video, thanks! quirky are the best, most creative and interesting, I think
so cool! I want to try some of this out
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.
Nice information
Please make more videos like this in future
Good collection, thank you. Having a review of the mobile iteration would be helpful.
Watch the mobile version here:
ua-cam.com/video/JByOVEOpXas/v-deo.html
This is such a great video 👍
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!
Thank you Payton!
So helpful!!
thank you! i am taking notes! 🙇
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!
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, I learned something new
Great video. Thanks
thank you for this content
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 UA-cam channel. Cheers 🥂
Really cool video man. Its better than ASMR to me.
LUV the ‘Quirky’ ones! I’d luv even more if I could buy those layouts (especially if also have animations/dynamic style)!
😻i really love your Channel, so usefull
Very useful video 💯🔥🔥
Thank you! Inspiring layouts and ideas. Would love to see how these translate to mobile too.
Great Video!
so useful vid tnx ❤
I love all your videos
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.
Thx man, amazing presentation. What is that website puzzle link?
Great, thank you!
Brilliant!
Hey Clark, awesome stuff. Would be more useful if you can bring in Mobile view of all these designs along with desktop. If possible
I'm so glad you shared this. It's going to save me a lot of time and effort."
really good.. thnk u
Thank you soooo much
Now there’s a lot lot of value in this
You are an inspiration.