Transcription

This video is sponsored by Good User Experience. So you've definitely seen websites like these. Very modern, very cool, right? From a UI standpoint, yeah, sure. But UX? Alright, let's be fair. These new sites use some cool design trends and make great portfolios, product and service showcases, and so on. Plus, they're already pretty successful in fields like art, design, games, architecture, and cryptocurrency. Before these trends, these websites used to be pretty boring. I mean, we used to do portfolios like this for crying out loud. Now we're seeing a more immersive version of the web. But do you think these websites would be as successful if they were used in e-commerce? If you just take a look at awards, you can see almost only websites meant to showcase something, and rarely a website meant to sell. Wait, do you hear that? That's the sound of JavaScript running on these sites. And trust me, your e-commerce site does not want to sound like that. But hey, let's not generalize, huh? There are cool CSS-only effects too. So let's check some of these common trends and rate them accurately. Loading screens Your e-commerce site has about 3 seconds to load before about 50% of potential customers leave it. And there's generally a risk of users leaving any site if it takes too long to load. If the site has a lot of JavaScript running on it, it makes sense for it to take 4 seconds just parsing and compiling. If you don't add a loading screen or loading animation, it will confuse users. So it is necessary for user experience. But what will confuse them even more is if the loading screen was stuck on 99%. The simplest way to make a loading screen is a progress counter, which starts counting from 0 at the initial loading request. Then when the resources all load, it will start counting faster to reach 100%. You can style this any way you want. Like this, this, this, or this. I think if we're going to have longer loading times, it's better to at least make them engaging. In video games, we have interactive loading screens, in-game tips, and cool slideshows or animations. Luckily, there are many websites already implementing immersive loading screens. Number two, huge texts. These are kind of controversial. We like them if they're just one line of short text for slogans or headlines, and if we're sitting in the perfect distance of 20 inches away from the screen. But if they're locomotive text scroll effects, then we have a problem. These effects can be destructive for the message you're sending, because users will be busier trying to scroll than read. Number three, custom cursors. Imagine being mean to a custom cursor like this. Custom cat, sir? Anyway, custom cursors are fine. As long as they don't get too complicated or confusing. Actually, having custom cursors like this on videos, cards, boxes, or images is good both for UI and UX when you use them in moderation. Number four, bento grids. These are becoming extremely popular. We can see them on huge websites like Apple or Material Design. There is something tricky about these in user experience, though. There is only so much information we can focus on at the same time. These grids might look amazing on your UI, but in the case of UX, users will only be able to pay attention to one or two, then expect most of them to be missed on the first visit. Making these bento grids in code is pretty simple if you understand how they work in design first. So on Figma, let's make three boxes, select all three, and click on this option, auto layout. Then make two more copies and select all these three rows. And again, choose auto layout. Now everything is sized harmonically in relation to others. Making them in CSS is similar. Let's say we have this grid system. First, we'll find the one-dimensional layouts, aka flex boxes, and then any remaining two-dimensional layouts, aka grids. We'll add an ID to each of these. The flex box will get a flex display and a flex direction of row. The grid will get grid display with four columns and two rows that each have automatic sizing. The last flex box will just get a direction of column instead of row. And there you go. Now, a great way to make sure users will see everything in these bento boxes is having them appear as you scroll down. We'll see how to do that in just a minute. Number five, color blending. You've probably seen effects like this or when the custom cursor does this funny thing over some elements. This happens when we blend colors together, meaning the background and foreground colors mix together in a variety of ways. This is not just great in graphic design, but web design too. When you look over on Figma, you can find this option here on this little droplet icon. If you create two shapes with different colors and select them both, you can see how they react with different blend modes. In CSS, we have mixed blend mode for this. For example, you could have a colorful image and set its blend mode as luminosity, which only accounts for the lightness value of each color. Then you can create a cool hover effect by setting the blend mode as normal. Or you can use the difference blend mode to make button hover effects that have their text change color automatically, like this. Instead of manually changing the text color like this. Number six, buttons and call to action. Now, I know this is a huge topic and we're constantly flexing with our buttons in different ways. And honestly, there is no wrong way to do it. You just have to make sure your call to action is contrasted enough, within reach, actually call for a clear action and not right next to a bunch of other primary buttons because that can confuse users. Hover effects are also important. I'm sure it's not just me who spends a few minutes on random sites appreciating a button with a fun hover effect. Is it? The hover or click effect can transfer this feeling that something great is about to happen. I mean, you can't put that effect on a button and expect me not to click on it. Again, for many of these effects, you'd have to use JavaScript, which might be too much if you have too many buttons. So my suggestion is make it balanced. Number seven, progress bars. Wait, what are you talking about? We already have this. Duh. Well, for the sake of user experience, we can add a little progress bar to show how much of the actual content we have left to explore. We can mostly see them in blogs, courses, landing pages, and so on. But there are some new innovative ways like this cursor. Number eight, 3D models. This is actually the best time to use 3D elements on web, thanks to Spline 3D, which makes the process so much easier if you're a beginner. If you're not familiar with Spline, it's a 3D design tool just like any, but with way more options for exporting. For example, I have this scene set for my landing page. I can press on export and choose between public URL, embed code, code export for 3JS, React, or just vanilla JS, image, video, GIF, GLTF, what have you. I'm going to choose this embed option here to paste it in HTML directly on a landing page like this. Plus, I have all these play settings that let me interact with my model, like I'm going to add a hover behavior that orbits the camera a little. And of course, you have your good old animations too. Just create different states and use the events tab, choose the timing, and ta-da! This is like a nine out of 10 for UI if the 3D model really fits the branding, showcases a product, or adds a little cool touch to the UI. Because, well, we can't really ignore the fact that it uses a lot of JavaScript now, can we? Don't get me wrong though, I love JavaScript. But if it's going to ruin user experience, then does it mean I just made it for me and my friends? I mean, I get it. Cool new tech is coming out, and we just can't wait to make everything pop out of the screen because, well, we live in the future. But we still have a long way to go to make these effects the new standards of user interface. Number nine, locomotive scrolling. Normally, we navigate on our own. Muscle memory helps us find the menu, sign up buttons, scroll bars, and everything else in less than a second. When this layout changes, it can confuse you. But well, you know, scroll is a new click. If you don't get scroll jacked. If there's not too much content or too many choices, it's pretty cool. Like these sections with one static visual side and another moving text side, like on the Material Design website. Thing is, we can only memorize like five to seven chunks of data at a time. So if you're telling a story or showcasing something, it's fine. But when the scrolling becomes the main navigation control, then that's a zero out of 10 for UX. That aside, there are some good ways to make this scrolling a bit more interesting with GreenStalk Animation Platform. Better known as GSAP. For example, if you want to make a horizontal scroll, a zoom effect, or text effect, all you have to do is register the scroll trigger plugin in JavaScript, initiate the animation with GSAP, and depending on what you want to achieve, whether it's moving on the X-axis, scaling up, or becoming visible, you can specify it in the beginning. Then comes the scroll trigger setup, where you can set the element that triggers the animation, where it starts, which in this case is when the top of it reaches the center of the screen, where it should end, and whether it should be pinned. Remember when we wanted to make the bento boxes load as we scroll? Well, you can achieve this perfectly with GSAP. There are many cool GSAP effects, but don't forget that sometimes less is more. And that's our list for the trendy UI effects. So what do you think? Do you like them? Do you not? Let me know in the comments. And that's all for this video. If you liked it, make sure you do your magic down there. Let me know what you want me to explore next, and see you on the next one.