2024 Design Trends! | 5 Must Try Hero Layouts

Here are some of the hottest design trends popping off for hero designs on websites in 2024 to inspire your next web design project!

🎥 WHAT TO WATCH NEXT

⏱ TIMESTAMPS
00:00 - Intro
00:24 - Isolated Component Heros
01:03 - Bento Grid Heros
01:57 - Lava Layout Heros
02:23 - Callout Heros
02:55 - Tied to Scroll
03:49 - Mixing and Matching Trends
04:12 - Considerations

🔗 MENTIONED IN THIS VIDEO

📚 PRODUCT DESIGN (UX/UI) COURSE I RECOMMENDED

📒 GET FREE DESIGN LESSONS

📖 READ THE BEST DESIGN ARTICLES

🥰 JOIN OUR MINDFUL COMMUNITY

💬 CONNECT WITH US

🧰 RECOMMENDED PRODUCT DESIGN TOOLS

⚙️ RECOMMENDED GEAR

🙋🏽‍♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UX/UI) School
⊚ Trained teacher
⊚ Youtube creator
⊚ Author

*Some of the links listed in the description may be affiliate links through which we may earn a small commission. They are at no cost to you and often include discounts that we pass along! These help keep our free channel going and help us continue to create the highest quality content possible. So thanks for your clicks and your support! 💜

💻 SPONSORSHIP AND COLLAB INQUIRIES

[DMmotionarts]

The designs are cool but lots of them are forgetting to keep UX in focus.
Too much clutter on the designs.
I think only Isolated Component Heroes make sense to me. It's easy to navigate and any age bracket would be able to figure it out quickly.

[VirendraBG]

You have earned a subscriber.
Good content. 👌🏻
Keep posting. 👍🏻

[CARMARCUSO]

Finally!! You mention cost and that’s such an important element in everything we design and create. Another point is most of this sites are Saas products but other services have other trends to look too. Love this thanks for sharing.

[thequietloud]

Great video! I do wish we'd only discuss real websites vs mockups from Dribbble, since those often have no consideration for device fluidity are usually not actually a website. I like the term "tied to scroll" ha ha, my peers and I call it "scroll jacking" and our users hate it. We've since removed all scroll jacking behavior since it removes control from the user. But overall really enjoyed the video and appreciate the context added in the end!

[henrythomas]

Great video! Some key points were highlighted that I hadn't heard anyone else discuss. Thank you!

[devdhimar]

Thanks for sharing amazing informations on the latest design trends. Lucky to be a part of designerup community.

[petermichael]

THANKS! Elizabeth ur the best!!! cheers from philippines!!!❤💯

[bravooh]

Perfect just in time for my website redesign

[mbhayes]

Well done and thanks for sharing. Not sure I've rec'd that much great inspiring design information in 5:47 before. Getting ready to replay it a time or two. I had been studying BENTO(s) all day so maybe this just flowed nicely into finishing up the day. Everything I was looking at my mind was abuzz with "okay how can I do that... where can I apply that...". And funny enough I had been asking myself okay how do we use this BENTO... what's the hierarchy ... how do we lead the user or do we ... the video quote was perfect ... - “So rather than telling a visual linear story the BENTO grid is more of a chose your own journey with each card or box being a self-contained adventure that the visitors can explore.”

[olatunjiolakunle]

You earned a subscriber, thanks for the video

[Skypiea]

lava layout very good. I already try it but it dont really work in terms of responsive design.I hope you make it some tutorial creating lava layout but responsive using auto layout in figma

[wilbertdune]

Nice course do you have a discounts for students?

[mahbubcyou]

Your tutorials are awesome as learning resources. Would you please review about "Droit UI - Design System"? Recently I saw a hype about them. Can't decide whether I should get it. Would love to know your feedback.

[ARABNATION]

These new trends are awesome but some of them are overwhelming for a hero section I think it may confuse the user as what is what

[sehanhasan]

Great Video! Can you please also post the links to the websites you presented?

[vickyjacky]

Where can I learn about take some sample images before developing the website, please anyone tell me where can I get some good innovative designs for developing a project

[avivshvitzky]

Thank you for this fast and concise video!
I really don't like the lava design haha

[thanapoomjantararuangtong]

I really like the Spark website, would you mind to share this website link for me please 4:09. I’m really interested 😊

[chiragrathi]

Hey, I watch your videos, and you explain things very well, ma'am. I also want to learn from your course as I have a strong desire to learn UX/UI design. However, I cannot afford it because $497 is too much for me. I come from a very small family, that's why.

[Splinternight]

Hello possible to know the url of spark please ?