It's time to talk about these UI trends

Hey guys! Let's explore some of the simplest yet most popular UI trends right now, like creative buttons, loading screens, progress bars, color blending, 3D models, GSAP animations, locomotive scrolling, huge texts, and so on.

// ✨ Helpful links:

// ✨ Let's connect:

Thanks for watching!

--------

// Timestamps:

00:00 Intro
00:12 Benefits
00:36 Drawbacks
00:57 Loading screens
01:55 Huge texts
02:15 Custom cursors
02:37 Bento grids
03:56 Color blending
04:48 Buttons and CTAs
05:40 Progress bars
06:00 3D models
07:24 Locomotive scrolling
08:04 Using GSAP
08:54 Outro

----------

// Websites and designs featured:

#uitrends #gsap #awwwards

[juxtopposed]

What do you guys think about these trends? It's time to share some unpopular opinions. ✨

[MrGrayNk]

As a user, I can't stress this enough: never ever ever highjack my scrollbar. I couldn't care less if it's boring or not to scroll, I just want all pages to behave the same. Don't do "smooth" scrolling, definitely don't switch from vertical to horizontal scrolling. Loading on demand / scaling during scrolling is fine, but those other effects are the worst of trendy effects IMO

[roccociccone]

Thing is, instead of adding useless loading animations or even loading screens, focus on building your application with a focus on performance and you won’t need any of this. I’m a professional software engineer and I guarantee you response times and loading times contribute more to the user experience than any fancy mouse cursor or useless scrolling animation. We spend so much time making things look “good” and completely forget performance implications.

[gameofpj]

Actually one important thing: If you add lots of animations to your site, please make sure prefer reduced motion works.
Thanks <3

[johnw]

As a web developer, I find that the more javascript you have to load, the worse it gets. Not only because of the overhead, but because CSS and html standards were carefully designed for usability and accessibility, and javascript is your escape from all that. As a user, I actually don't mind the snazzy CSS effects as long as I feel like I'm navigating a website

[kurtmueller]

Peak UI design is archived only by those old academic university websites that include a ~ (tilde) in the URL and contain no CSS or JS whatsoever. Usually they contain the information about which version of Apache webserver they are running on in the footer of the site. The best ones also contain "last updated on XX/YY/199X"

Even on dial-up, those were always blazingly fast.

[MobiusCoin]

As a young developer, I used to cut my teeth on this kind of work. It was a showcase of my technical prowess. As a senior developer, I can't stand these sites anymore. None of them feel right. I always feel like I'm relearning how to use my computer just for this one context. Web Design tutorial content on YouTube doesn't help in this regard. They keep pushing this kind of flashy design without any consideration of the user experience.

[ego-lay_atman-bay]

As a pc, android phone, and slow ipad user, all these modern effects are terrible, and give me a degrading experience on many websites. I'm not even joking, these modern websites usually lag a whole lot on my ipad, which makes me click off the website. Horizontally scrolling is also the epitome of all evil, I mean, it's just super disorienting, especially on mobile. I mean, swiping up scrolls right? What kind of black magic is that? Plus, hijaking the scrolling, like stopping the scrolling to do some stupid animation that I don't care about is awful, and should never be done, because it makes me think I've hit the bottom of the page. Custom cursors are also terrible, especially if it's just an element that follows the mouse, because when it follows the mouse, it actually lags behind the mouse. Custom cursors are fine on game sites, but not on anything else. The biggest gripe I have is, it takes away any personalization that the user might have already done to make their experience better for them, for example, I made my cursor very large and black because I found it easier to find the mouse when it's that big.

[TheLexikitty]

As a legally blind person that works in IT, I’ll never understand tiny text on websites that then block test size manipulation, or apps that ignore system fonts, I’m all for the large text haha

[Issvor]

It's pretty crazy that almost every single site on awwwards look the same, and almost all have poor UX, or at least subpar UX. I honestly thought I was going crazy because "how could it win site of the month with bad UX?"

Then after a few weeks of visiting I realized it's a design award site. Awwwards doesn't care about how intuitive a site is, or if it makes any actual sense for the end user.

With that being said, the designs and efforts are very cool, and actually creating most of the effects is very impressive with vanilla JS, so I like to look for inspiration and try to recreate some design and features for the challenge

[trimonmusic]

Using CSS to add "scroll-behaviour: smooth", I have no problem with - it's not generally considered scrolljacking and is actually helpful to help the user understand how far they have jumped when navigating.

I don't particularly mind horizontal scroll, when used tastefully and for more visual/marketing-focused sites.

But if you modify the scroll speed or change the scroll friction via JavaScript, it's a race to see whether I can complete my task before I abandon your site for poor usability.

I'm a web developer, my browser is like a car, I know how I expect it to act and if you mess with the pedals and gearbox I will not be traffic on your site for long.

[neo_uwuowo]

i feel like one of the worst thing a site can do is make it so if you hit the back button on the site it just sends you back to it. you have to right click the history to go back to whatever page was before it.

[trzw]

The best are websites that just display NOTHING unless you start allowing stuff in NoScript. Bonus points when apparently the entire CSS is done via js, so it's just an unformatted mess without allowing the js to run.

[TotallyNotK]

Most of those modern day website designs hurt my eyes. I don't know if it's just me, but I feel like simpler designs (with some occasional smooth animation or maybe a few effects) is better than a website with a ton of stuff going on

[NFSHeld]

One of the things I think needs to be focused more on are user preferences, such as "prefers dark theme" or "prefers reduced motion". Because making your website good for your taste is easy, making your website also respect the taste of your customers is a lot harder.

[dhillaz]

I think of these designs as 'spices' to be sprinkled in moderation on top of a content-focused design.

Imagine going to a restaurant and being served a chicken wing buried under 2 ounces of paprika powder. Some users will refuse to eat it, some users will patiently brush the powder off, but all users will feel discouraged from visiting your restaurant again.

[boiimcfacto]

God bless this new trend of entertaining, funny and informative web dev YouTubers. Hyperplexed and Fireship (and now you) are my go-to channels for dev-related content and I love your style of humour so please keep making more of these!

[LifeAquaticSteveZissou]

There's a lot of what I like to call Hipster UX Bullsh*t in these designs. I'd have a serious conversation if anyone on my team came to me with trying to pass off a lot of this as usable.

[ElvenSpellmaker]

Bento boxes that load as you scroll are a right pain. They never load in time (even on decent Internet) before you've scrolled past them and then realise you've missed a chunk of content.

[aliengeo]

My hot take is that it doesn't matter how pretty your site is on the optimal viewing device if on Joe Schmoe's low-end laptop running your non-preferred browser (I've heard professional designers act as if Chrome is the only thing that exists) it looks and runs like a potato. I see so many design trends that people talk about as being great and I can't relate because my experience of them is how they lag, how they break other things, etc. My hobbyist web design work involved trying to optimize from the very beginning because of limited storage and I think it's a good habit to have gotten into.