2024 Design Trends! | 5 Must Try Hero Layouts
Vložit
- čas přidán 1. 07. 2024
- 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
⊚ 6.5 Most Popular UI Design Trends | • 6.5 Most Popular UI De...
⊚ Figma Introduces New AI Features! | First Look 👀 | • Figma Introduces New A...
⏱ 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
⊚ Links to example websites: designerup.co/blog/2024-desig...
📚 PRODUCT DESIGN (UX/UI) COURSE I RECOMMENDED
⊚ Enroll Now | designerup.co/product-design-...
📒 GET FREE DESIGN LESSONS
⊚ Free UI Design Crash Course | designerup.co/ui-design-crash...
⊚ Newsletter | designerup.co/newsletter
⊚ Live Webinars | designerup.co/webinars
📖 READ THE BEST DESIGN ARTICLES
⊚ BLOG | designerup.co/blog
🥰 JOIN OUR MINDFUL COMMUNITY
⊚ DesignerUp Community | designerup.co/community
💬 CONNECT WITH US
⊚ Twitter | / designerupco
⊚ Instagram | / designerupco
⊚ Facebook | / designerupco
⊚ LinkedIn | / designerupco
⊚ Pinterest | / designerupco
🧰 RECOMMENDED PRODUCT DESIGN TOOLS
⊚ Figma - Industry standard design software | go.designerup.co/figma
⊚ ProtoPie - Advanced prototyping tool | go.designerup.co/protopie
⊚ Notion - UX research organization and notes | go.designerup.co/notion
⊚ Framer - No-code website platform | go.designerup.co/framer
⊚ Uizard - AI to UI tool | go.designerup.co/uizard
⊚ Icons8 - High-quality icon set | go.designerup.co/icons8
⊚ Lunacy - Figma alternative | go.designerup.co/lunacy
⊚ Mobbin - Design Pattern examples | go.designerup.co/mobbin
⊚ Setapp - Discounts on apps and software | go.designerup.co/setapp
⚙️ RECOMMENDED GEAR
Video Gear | kit.co/DesignerUp/designerup-...
Home Office Accessories | kit.co/DesignerUp/home-office...
🙋🏽♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UX/UI) School
⊚ Trained teacher
⊚ CZcams 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
⊚ Email | learn@designerup.co
Want to improve your web and UX/UI design skills? Come be a part of our Product Design Course! designerup.co/ →
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.
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.
Great point! I definitely have noticed a few and might dive deeper into these in another video. In the meantime, here's my latest Figma tutorial on designing these trends step by step for web and mobile. Would love to know what you think!
Great video! Some key points were highlighted that I hadn't heard anyone else discuss. Thank you!
Cool to hear Henry! Thanks for stopping by 👋🏾
Thanks for sharing amazing informations on the latest design trends. Lucky to be a part of designerup community.
We’re even more lucky to have you! 💜
THANKS! Elizabeth ur the best!!! cheers from philippines!!!❤💯
Cheers Peter! 💜 Thanks for stopping by
Nice content!
Perfect just in time for my website redesign
Good luck!
Amazing :)
Very nicely done!
Why thank you! 😊
You earned a subscriber, thanks for the video
Yay! Happy to have you!
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!
Totally agree! Annnd that’s why I just made this video- here’s a tutorial of some original examples I created and how I would implement them! czcams.com/video/TjLxhLSrmGw/video.html
Excellent, I learned a lot.
Glad to hear it!
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.”
That’s so good to hear! These are really great questions that your asking about the intention behind the your Bento design! Something I’ve been doing is using Hotjar (after I launch) to see where people are clicking and what they are spending the most time on. And then I can easily shuffle around the boxes as the I gain more data points. Otherwise yes the best way is to think of it as a way for the user to cherry pick what’s important to them and if needed you can use design elements and colors on individual boxes to pull focus to things that you know are important! Good luck with your designs!
Here's another video you might like - it's my step by step Figma tutorial on exactly how to design each of these trends for web and mobile! shorturl.at/fq369
Love this.
Thanks Areous! 💜
Love your videos.
Thank you Ellena!
Check out my latest Figma Tutorial on how to design theses trends step by step! 👉🏽czcams.com/video/TjLxhLSrmGw/video.html
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.
Thanks a lot 😊 I hadn’t heard of that one but I’ll definetly check it out!
lava layout love that
impossible to achieve
Great Video! Can you please also post the links to the websites you presented?
Link in the description: here it is again - designerup.co/blog/2024-design-trends-5-must-try-hero-layouts/
Copy. Paste. Publish.
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
I already did! You can watch the video here czcams.com/video/TjLxhLSrmGw/video.htmlsi=TeXlSQJkMhFgtQUB
I really like the Spark website, would you mind to share this website link for me please 4:09. I’m really interested 😊
Of course! All links can be found here designerup.co/blog/2024-design-trends-5-must-try-hero-layouts/
Thank you for this fast and concise video!
I really don't like the lava design haha
Hahah really?! I quite like that one! Thanks for watching 😁
Might take extra development time, yes they will. But if you have something crazy. Love to help make it happen.
Hello possible to know the url of spark please ?
Hey, all the links can be found here designerup.co/blog/2024-design-trends-5-must-try-hero-layouts/
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
As I mentioned at the end of the video, you have to know your audience and use these only when appropriate and when it ‘makes sense’ for your brand or product and remember, these trends are meant to push the boundaries or design so they may not all be the most practical or functional choice.
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.
Here's is a step-by-step tutorial for Figma on how to create these design that I think you might find helpful - shorturl.at/fq369
Nice course do you have a discounts for students?
Yes we do, just send us an email to learn[at]designerup.co
@@DesignerUp wow cool do you have guides for color design? or Color Paletes. Thanks
@@wilbertduneI do! Here’s one czcams.com/video/GyVMoejbGFg/video.htmlsi=_QLe7xC70lMu_nhE Another one on trending color palettes is dropping next week! Stay tuned
Are all these design examples live sites? I can't seem to find Careen and Skillify, for example.
All links to the live sites are here - designerup.co/blog/2024-design-trends-5-must-try-hero-layouts/
@@DesignerUp since it's a blogging site, please make it SSL secure else Google won't index it on SERP. You got good content, make it SERP worth.
Here's a full tutorial on how I would go about designing these sites if you're interested - shorturl.at/fq369
@@DesignerUp just curious to know, did you delete my comment where I stated about usage of https protocol? Because I got the notification but can't see my comment here. If you have done it, eager to know why? If not, CZcams is drunk again.
Hahah I think YT is definitely drunk! I don’t see your comment anywhere, odd. But would love for you to repost if you can!
can anyone give me idea how to develop that lava layout? how to get those shapes ??
I think I will do a tutorial on that! Make sure to subscribe to get notified!
That would be awesome! Please also cover how to make it responsive. That’s what is keeping me from designing that layout.
@@johnnymuller7454 as promised here is my responsive/adaptive Figma tutorial on designing these trends! shorturl.at/fq369
designs are nice and all but how do some of these translate on mobile devices? would be nice if these dribbble creators would show a live site with their designs dev'd out and implemented to show how responsive some of these are.
I’m releasing a video on this next week! Stay tuned!
@@DesignerUp looking forward to it!
@@mpantaleon5286 as promised! shorturl.at/fq369 Including web and mobile examples. Would love to hear what you think!
What about mobile?
I cover that in my latest video czcams.com/video/TjLxhLSrmGw/video.htmlsi=H1tFO0dBqQfX4V9c
@@DesignerUp Thanks
59 Columns?! 😵💫
Question. This is somewhat data overload. Why is this considered to be a good design in terms of Good Ux and UI?
You can watch this follow-up video to learn more
czcams.com/video/TjLxhLSrmGw/video.html
The lava layout and callout heroes are just such a gimmick. So cluttered and so little hierachy that the information that you actually want to convey in that section will get lost. And I think if you design a website like this it is going to look very dated in 1-2 years time.
Making the lava layout responsive is the crux for me. Doing it with svg mask would make it mandatory to scale fonts linear which conflicts with the website accessibility. Or am i doing it wrong?
Great question! I will be exploring this in my next video. Stay subbed!
That’s exactly why it’s a ‘trend’. It probably won’t last and it should be used very sparingly and with intention, if at all. It should always have sound research behind it and make sense for your project.
HAHAHA