Web & UI Design Trends for 2024

In this video, we explore the upcoming web and UI design trends for 2024 including dimensionality and layering, 3D elements, complex animation, vibrant color and gradients, AI imagery, dark mode, Bento grids, morphism, massive typography, and the rise of no-code builders. These trends are set to revolutionize the way we design and interact with digital interfaces.
Stay ahead of the curve and gain valuable insights into the future of web and UI design by watching this video. Don't miss out on the opportunity to enhance your design skills and create visually stunning and user-friendly experiences.
.. Remember to Subscribe goo.gl/6vCw64
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:
30dayui.com
🏆 //////////// Join my free member's community to get access to perks:
designchamps.io/
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma
psxid.figma.com/ixbomhqzoiy0
🖥️ ////////// I Prototype Magic in ProtoPie
www.protopie.io/plans?ref=jesse
🖥️ ////////// I Build websites in Framer
framer.link/jesse
📅 ////////// I run my life with Notion
affiliate.notion.so/tokendsfahjf
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/1...
Timestamps:
00:00 Intro
00:27 Trend #1
01:13 Trend #2
01:57 Trend #3
03:07 Trend #4
04:01 Trend #5
04:59 Trend #6
05:56 Trend #7
06:49 Trend #8
07:37 Trend #9
08:21 Trend #10
#webdesign #UIDesign #DesignTrends #2024

[@OhmVibe]

00:27 Dimensionality and Layering (Trend #1) 01:13 Usage of 3D Elements (Trend #2) 01:57 Complex Animation (Trend #3) 03:07 Vibrant Color & Gradients (Trend #4) 04:01 AI Imagery (Trend #5) 04:59 Dark Mode (Trend #6) 05:56 Bento Grids (Trend #7) 06:49 Morphism (Trend #8) 07:37 Massive Typography (Trend #9) 08:21 No-Code Builders (Trend #10)

[@briannhinton]

I hope my fellow designers remember that too much motion can cause issues for many ranging from migraines to like myself nausea. Create those animations but pass it on to your developers to respect reduced-motion platform settings.

[@muhammadpaksi]

Lol, unless the developers earn proper salary. 😂

[@mr.fanstastic9010]

not just , too much of artistic freedoms and purple colors can course migraine

[@augustjoseph629]

It should be up to the user - allowing the user to toggle their preference should be the standard, imo

[@pixlmyst]

As a developer, the no code tools frustrate me. Many of my clients use them before realising that they are fine if you just want to get to an end product with your desired aesthetic. However, they often run into roadblocks when they want to create a performant website that hits all the coding standards required to take it to the next level. I literally spend half my time needing to explain the value of developing a website by hand.

[@muhammadbacar6051]

As a Designer I agree. No code tools should be mainly used for portfolios, showcase marketing websites, landing pages and maybe to an extent e commerce websites. But for the other types of websites a developer is needed. nevertheless I believe that no code tools might try to become a tool that creates a better collaboration with designers and developers. Wix Studio for example is trying to do that.

[@maskedvillainai]

I mean, you’re comparing your knowledge as a dev to the ability of a tool. Knowing how to code as a developer equates to == whatever you want to code. It’s your knowledge as a tool. As No code tools are very focused on a task, they can’t really be compared with the ambiguity of ‘code something’. The only no code tools I use as a dev are FlutterFlow and DraftBit

[@wfwfwfwfwfwf]

I love Webflow and have started building more and more client websites in it, but I would never let the client touch the Designer... There's a different login for them to update content that I've designated them to alter. A developer learning the principles, up- and downsides of the platform can really take advantage of the platform, and clients are super happy with the easy way to on-screen edit content, simple billing and no stress of updating plugins... I'm not a super experienced developer though, so the tradeoff is maybe different for me.

[@williamjobson3092]

Excited by all of these things - gonna rewatch more than once to keep motivated!

[@tim_longhurst]

Great video and insights. I really appreciate your thoughts and predictions on these topics. I also like how you seem to articulate confidently without constant video cuts and jumps. Are you using a prompter or cue cards or is it off-the-cuff. Either way, it's great to see clear, confident explanations delivered at a great pace and not overwhelming. Thanks as always for sharing :)

[@YarivBE]

Thanks a lot Jesse. Beautiful summery of things that i guess where already cooking in 23 and now kind of more "officially here to stay" in 24. Good one 🔥

[@EM-fz3hf]

These are the exact types of styles I was looking for when I get ready to build my Ecom store & now I know how to explain it better. I'm building a niche brand but launching with 1 product & going for the complex 3D visual that animates as you scroll down. Just super luxe & modern looking. Now I have a better vision for the design aspect. This video matches my vision completely.

[@patriciopomies]

Love the esoteric prediction's style! THE YEAR OF FUN!!!!

[@danielavega3739]

I love how you use amazing examples and not just random pages

[@JesseShowalter]

Glad you liked it

[@shirleyxie7144]

Webflow is awesome!!!!!! Thanks for sharing.

[@juls2334]

Exciting trends for 2024! Thanks for sharing! 🎉🎉

[@JesseShowalter]

You are so welcome!

[@muathsurakji2443]

Thanks PRO see you in 2024

[@FrederickHqz]

Less friction, excellent way to put it

[@robertsimondj]

I remember when I designed a website with illustrator in several weeks, where is it now...maybe it was a long time, but I really enjoyed the journey to the goal, I found my joy in creativity in the process.

[@maskedvillainai]

Shit man you got a super good memory 😂

[@svnbit8408]

I still think it's a tool that others that "prototype" fail to emulate from speed and handling typography etc.

[@santiagobydesign]

LESS FRICTION!! Yes, very smart analysis... these all make a lot of sense to me as a 3D architect and graphic designer, thanks for putting these together.

[@mrvfino]

As someone who's starting to get into a hobby of creating websites as an artistic medium this adds more fuel to the fire of my desire lol

[@chadleebryson]

Great video. Where's mobile, though? Why are designers and these type of trend videos care so much about desktop so much?

[@jromecabugwason5140]

intro sold me

[@xpoftik]

Last point is pretty disputable, the others are really useful! Thanks man!

[@thewebstylist]

Great vid and highlights sir!

[@renaissauce9516]

Am I the only one who doesn't like the bento grid trend lol? I don't know where my eye is supposed to go or which element on the page is most important. Trying to find what I'm looking for takes a little longer.

[@darkmode_memes]

bento grid is good for gallery or ads

[@kawaiihikari0]

Thanks Jesse 👏 😊

[@henrythomas7112]

I extremely like the video, man. Very helpful and informative. Thank you very much. It is presented so well too. Great, positive work.

[@JesseShowalter]

Glad it was helpful!

[@stevendesigner]

Great video! Thanks!

[@nimakarimi90]

amazing dude

[@trvnq]

this feels more applicable to expressing yourself via a personal portfolio as opposed to making something that is user friendly and thoughtfully designed. i'm not in the field yet, but i find it hard to believe that users want to scroll through a website with 20 different animations just to achieve the thing they came to the website for

[@AmbientMusicStudio]

Many of these examples look great on desktop, but how well do they transfer to mobile? It seems like mobile is a lot easier to use if it is flat, minimalist and, well, kind of boring.

[@nakreid771]

I think the biggest trend in 2024 will keep the same positive attitude like the one u have. I’m tired of listening everyone crying about AI. Just use it in ur advantage and have fun with that. Great videos as always short and informative. Happy Holliday bro.

[@Freddyfoxburg]

May be this helps for your perfect font pairings : Cottorway pro with Open sans, Quinn display font with any sanserif.

[@SusanneGeert]

Great video - thanks for taking the time to create and share this 🫶 As a photographer (branding portraits / products / food) I am very curious to hear what you think is the trend for photographer websites?

[@XenaK-ti2ej]

Happy to see Noomo agency, founded by Ukrainian family 😍 on my fav youtube channel

[@tokyodream88]

Sir,, can I use Adobe Illustrator for designing the UI and UX and applicate it on real applications? Thank you..

[@BlackFiance]

Excellent video

[@JesseShowalter]

Thank you very much!

[@konstantinshmarin2676]

Cool! Realy cool bro! Hello from Russia!

[@rkem1000]

These design trends may look very slick, but it all boils down to user experience and visibility. Some of these are great for personal sites but might not work in real-world scenarios. Many companies are still adapting old legacy platforms with outdated technologies and design approaches.

[@yasamankhani3603]

Bento is my favourite

[@ArminmoTV]

we need a course about animation

[@JesseShowalter]

I talk about animation in my www.30dayui.com course

[@gebbygeb3547]

Breath of fresh air, really. It's February, yet I was still stumbling on what style I wanna go for this year before seeing your video. Thanks a lot!

[@milanrdesign]

Where do you see these trends? What tools do you use to research them?

[@robertsimondj]

he searches, reads, looks, uses only the eyes

[@JawsoneJason]

​@@robertsimondjanecdotal bias then ok

[@wfwfwfwfwfwf]

Dribble f.i

[@CiaranBoylePhoto]

@@JawsoneJason It's a KZbin video not a thesis

[@jamielocreda9780]

how do software engineers/mobile devs feel about these trends?

[@deipty222]

Do you have tutorials to teach the complex animations?

[@JesseShowalter]

My new course has an entire section on complex animation www.30dayui.com/

[@obvinpro]

Bento design was popularized by Microsoft

[@NintendoFreakify]

Didn't you also mentioned like half of these last year? Easy vid to make 😂 Anyways, no code is making big steps but it still lacks the flexibility to really go all out for a client, also adhering to guidelines and stuff.

[@JesseShowalter]

This is my first “trends” video

[@LightsaberPanda]

I think these trends are pretty accurate. If I was going to add two more trends to this list, it would be implementing AI chatbots in websites as a standard and having accessibility being a must. I know EU has passed a11y laws. It'll be a only a matter of time before US and other countries follow suit.

[@denistroler8452]

What does it mean (a11y laws). How will this affect us?

[@LightsaberPanda]

@@denistroler8452 In the industry we're seeing more and more product teams having mandates in place to ensure the products we design meet or exceed accessibility standards based on the WCAG guidelines. So if you have a beautifully designed app or website and it doesn't meet A11y standards, you may have to redesign it and trade off beauty for inclusivity for users that have disabilities. This also protects the companies from getting sued for being inaccessible.

[@joshuajumbo1586]

Lovely Jesse 😂

[@PhilippLeitner-qo6hy]

how to trent 2

[@user-mh9jm3ph9w]

I learned front

[@user-mh9jm3ph9w]

how can I earn money I ma web designer

[@bloojkl4520]

Most of these give me a headache

[@JesseShowalter]

Ouch

[@BrahimBrahim-pw2te]

boycott wix

[@igo2054]

none of these trends is really new

[@vaxonoff]

So shitty trends, bruh

[@JulieRoberts-od8ff]

Less friction, excellent way to put it

[@PhilippLeitner-qo6hy]

how to trent 2