The Top 10 Websites of 2022 - CSSDesignAwards

just a couple days ago CSS Design Awards released their top 10 websites of 2022 lists now today I'm going to react to seeing many of these for the first time on camera now in doing so I'll attempt to describe how they achieved some of their UI goodies alright so let's get started if you enjoyed this video check out designcores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alrighty let's get started so here is the blog post that has the winners and we're going to start here at the bottom of this list of 10 right here because it shows the lower scores first and the very top score here is 9.26 all right so let's start with Daniel spatzek uh let's check this one out let's click the website here we go I haven't checked this one out before I don't believe so all right so we have a intro loader so the purpose of that little sequence that you just saw if I refresh you're gonna see that uh welcome to portfolio of Daniel blonde that notice at the bottom and I'll try to Sprint that print screen this right there loading right there I here at the bottom that was basically so that it can pre-load some of the assets so that you know you can realize the experience first I have no problem doing that especially with portfolio websites or something like that now we can see this is definitely a type of approach that is with let's say more creative especially with all the topography you wouldn't do anything like this like on a very serious like e-commerce website unless you want fired all right let's scroll down alrighty oh that's pretty cool so that is that is very unique you know I have this large background image you can tell it's grainy but it's kind of meant to be grainy um and then we have the CRT TV which is being changed on Hover now let's check out the stack for this um as we can see yep we got the big ones here um if I zoom up we have 3js pixie JS as well and these both I I believe pixie JS I don't have much experience with that but um obviously animation JavaScript Graphics library gsap and then you're using next as well all right so the big the big uh two are there green sock and 3js all right very interesting I didn't I that screen just showed up because I focused outside of the window uh for an x amount of time so that's cool as well I like that that was very cool how things it's it starts to basically rotate um tied to the zoom changes the screen a little bit so it looks like you're going into the screen and now we have an entirely new section side scroll or horizontal scroller here you can notice also there's a slight bit of a smooth scroll but it's not exaggerated it's not too much look at that now that's what the 3js is coming in here for this is the most obvious usage of it which is this banana which I have to say is really high quality and look at this down here this kind of like ugly late 1990s style design all right so I actually like this very unique good good good good stuff let's check out the next one alrighty all right so this is tarot with YouTube by active theory in YouTube so we know this is going to be probably pretty crazy let's check this out so this is YouTube hyphen turret at appspot.com all right very nice we could tell this is already uh this feels like 3js to me but you know what it's actually not listing that so very interesting now if we inspect the sword inspect the source here F12 let's get that out of there elements script div ID stage all right we have a lot here wow so it's obviously using webgl 100 certain with these uh 3D floating uh flowers occurring here I don't have my actual audio on but I'm trying to figure out how to escape and I I really okay maybe hit an Escape right there so this is more of like a game sort of experience not I it's certainly a website but I guess I need I would need to look at or listen to what exactly is happening here so I understand the full con context but it's obviously very impressive but one of those types of uh immersive website experiences that is sort of difficult I'll hit skip right here dang I'm trying to hit skip just to get back to the main menu no I don't want to discover my soul card unbelievable all right you know what I'm closing this one out I'm getting bored with it let's continue on we got kubato future Club all right let's check it out all right loading screen for a second oh okay again more webgl 3js we have up here all right let's click Start oh wow Jesus look at this Let's uh scroll down here wow yeah very so when we talk about I page transitions uh that right there was a transition but obviously in 3D form Explore More so that is a very unique sort of page transition that I personally haven't seen before every time you scroll down we're going to a different section of this Cube which is really cool [Music] yeah this is excellent very nice let's check out Lacoste I draw it yourself by Mercy Mitchell let's try try this one loading animation progress down here hit accept again more what is likely to be three JS yep oops I didn't not mean to click that all right so oh this is from Lacoste okay so you can I draw it yourself all right so I can't scroll down so we can only click draw or Gallery all right let's try draw obviously look at this this shirt even waves and again this is all possible by shaders and 3js so it's tied to the mouse position so we're able to rotate the model but it looks like we have a Shader that's applied to the model that will physically transform it and kind of wave it very very cool all right so what is this so you actually it's actually an editor that is very impressive all right let's hit us exit out of there what is this draw okay I'm trying to draw oh that's the color how do I change the color what in the it's oh there we go so maybe I could draw in here there we go uh hi look at that that's really awesome though we can zoom up with the mouse scroll wheel all this stuff you can do uh when you have the canvas element and you're working within 3js it kind of just breaks all the rules of regular HTML and CSS it doesn't break the rules rather but it's just a an entirely new Dynamic from which you can build websites so of course check out designcores.com forward slash AF because I'm currently working on a course that will be bringing in gsap green talk animation platform along with 3js as well so this is obviously very cool love it nice Sleek smooth animations and a very nice kind of built-in uh kind of graphics editor let's continue on next up is going to be Mazar Mazer destination this is by immersive Garden all right what's Happening Here all right so no loading screen as we saw here we do have like a it's kind of is a splash because we do have an enter button here let's try that and more 3js alrighty that's because there's not many 3GS websites so the ones that are winning awards are the 3js websites or at least have elements that are incorporated into it so what's really cool here is we have this 3GS we have like a huge model a 3D model in the background here and on top of it we have a UI element like right here uh it looks like a logo up there you could barely see it though um oh that's nice so we can we actually have a toggle dark mode that's within the 3js elements and let's just click on something here I'm not exactly sure oh okay we see the little uh pinpoints that allow you to navigate to different areas so you click on this is a basically in this section here is kind of like a vertical navigation each one that's clicked we're using JavaScript to then transform and change uh the scene essentially that's in 3js and this is also accessible through the mouse screw wheel so I'm just going through each one of these look at that like so you can obviously it's really impressive when you have a huge kind of like real complex 3D model like this but this is something you could do with the very simple element like we saw with the banana uh that was tied to the the position and rotation of the element was tied to the scroll which is something you can definitely do and maybe I'll do a tutorial on that next week all right awesome love this one next up is going to be 601 ink by Garden 8. loader all right comes into place again it just kind of feels like a a 3js yes it is we have green sock and 3js again designcores.com forward slash AF enter your email to be notified when that course releases all right so very cool we have a uh kind of like a slide large type of Graphics section right here that will let you know which slide we're on and what they're using for this this is tied to my scroll wheel um in order to kind of stick to each section they're likely using I can't be certain though um a scroll trigger from gsap scroll trigger will allow you to do stuff like um pinning certain sections of the actual layout let's click uh let's just click on one of these all right so notice it was tilted slightly but you click on it it brings it to 100 upright and this is just a video at this point click go back and then you go right back to it so what's really cool is about each one of these if I click this the URL is changing at the top all right when I click to these different pages that are in those slides and notice though you don't feel like the CH the page changes uh so this is likely done with something let me see if there this is likely there's a possibility that something like Barbara JS is being used here um to have a page transition animation sort of Library um very cool like it let's continue on we got get ready with music by this is going to be I guarantee you this is going to be 3js oh we have more shirt graphics that'd be weird well let's check it out these going to be 3D shirt Graphics I only say that's weird because we already saw one all right got a loading screen we're using a mask to reveal everything a circular mask and I don't know what's happening here I'm kind of clicking around and okay finally stuff kind of came into The View so we have a 3D scene here and if we look over here we have oh 3js is not showing up very cool just tying to the mouse position the physical location of this all right let's uh so I can't scroll down and the only thing apparently I can do is Click connect with Spotify all right so I logged in let's click let's go all right pick what you're getting ready for up for whatever all right so this is tied to the scroll wheel again this is just webgl um apparently they're not using 3js I didn't see that in there but still nonetheless it is These are 3D objects that have shaders applied to them a wave Shader and it's tied to the scroll position very cool getting stuff done let's click next pick your mix of colors I'm not really sure what this is supposed to be um let's click add so we can just turn this disk shape very very cool hit next wow look at that crisp now there's music playing maybe I should increase it just a bit okay I can't do that because it's going to screw up the mic oh look at this so that's a Shader effect as well when you have the Tomato balls as what these are called uh the like these these these balls I kind of just like join in together it's like a goo effect you can do that actually in 3js uh or webgl it's like Mercury essentially look at this this is crazy and then you're just having fun kind of playing with this and the music that's playing may or may not relate to what you're doing in the browser I'm not sure and look at this this is like a 3D in browser webgl master class essentially of all the very cool stuff that you can do very nice let's check out more number two is Jimmy Nelson so let's check this one out all right loading Graphics it's very quick which is very nice so that was as fast as possible really so I have no problem with these as long as you know you're not waiting for you know 10 20 seconds just for something load hey what's your name Gary I just hit skip all right so I think I what I just saw was um kind of like this eye sort of 3js webgl Shader effect where they animate in it was real quick I'm not sure if you saw it either let's click view yep just like that that is a Shader effect all right let's check out what's happening there's a lot Happening Here in the stack we see we have uh react green stock animation platform we even have jQuery 3js MailChimp they have a lot of stuff Happening Here I love the type and I love the watermark here in the Mac the background really fits with the theme we have smooth locomotive scroll we have a mouse follow you have a video here let's click the menu see how that comes out nice so basically it's just uh blurring the background I we have notice when we click on this things kind of animate in sequentially which you can achieve with green stock animation platforms uh stagger animation so just notice there's a lot of like fine details like that I can really I add to the experience of using a website or an app of some sort very nice let's check out the very last one which is the number wait no it's not number one we're almost there the race by Mercy Mitchell let's check it out so obviously full on webgl looks like a loading racing game come on come on come on load up so this one's gonna take this one's gonna be intense obviously there's many assets that has to load and by the way if you want to learn how to make one of these loaders literally just my last video uh my last two videos I showed you exactly how to do this so this is a um digital production house okay so this is an actual like Studio website so let's click view our work and see what happens and again let's look at we have jQuery being used so they're not using like some sort of framework like react our view um which is completely fine um and they're also using 3js and greenstock as well so called that let's click on let's click on that one scroll to discover so these are basically case a case study for a specific project that they created and it looks like it's just screenshots I've seen this one before as well in the wild last year notice how smooth this is very just subtle animations like this notice how these aren't tied to the location of the thumbnails the actual titles all the stuff you can do if you understand JavaScript obviously as along with uh webgl Slash what else webgl and 3js which is the most popular 3i webgl framework essentially let's click on real so this is probably just a a video what happens when you click contact let's play together yeah I did see this before and there's no bedded form it's just uh their contact information right here with these uh rolling smiley faces and they're reactive to the mouse very cool let's go ahead and try and check out Coastal world again this is by the same eye Studio all right here's Coastal world [Music] all right this reminds me of that one portfolio where uh there was like an island with a guy on a bicycle um a lot of people saw that that was a real popular um 2022 design as well start the journey look at this full on webgl there's no uh significant amount of HTML elements here this is all webgl canvas stuff and apparently this is something that's probably going to take me a little bit too much time I to to Really um ascertain just in the context of a quick video where I'm looking at these actually let's just click exit I wonder if I can just kind of explore so we could check out exactly what's happening oh yeah look at this apparently I'm just gonna walk around in this world this is nuts all righty I think we get the gist of this one I just complete full-on 3D immersive experience very cool as always make sure to subscribe if you haven't yet hopefully you enjoy checking these out I tried to explain them as much as possible and again it's one of those things when you get to this type of eye level of work when it comes to UI ux design and these immersive experiences it's a culmination of many different skills and it's important to remember that pretty much in all these cases or most of these cases there's multiple team members working who have a specific role uh and specific expertise it's very difficult to be able to achieve all the different skills that are required in creating one of these uh sort of immersive experiences it goes it starts from I the UI ux phase I 3D in many cases being able to model in 3D has its own world of expertise like uh you have the people who I create materials and just uh rigging and animation then obviously being able to implement this and make it work for a browser requires front-end development knowledge heavy with JavaScript typically and also an understanding of HTML and CSS in some of these examples so I don't get too discouraged if you can't make these most people can't do it on their own anyway but I'm going to do my very best to show you all I how to to create some things like this on the channel coming up here in this year and it's one of the main things I'm going to be teaching at designcores.com forward slash AF uh enter your email to be notified when this course releases this year and as always my other course is at designcourse.com interactive for learning UI ux and CSS all right everybody hope you enjoyed that and I'll see you soon goodbye

Channel: DesignCourse

Views: 168,559

Keywords: top 10 websites, amazing websites, web design, 2022 web design, top websites, best designed websites, gsap, threejs, gary simon, designcourse

Id: N3s18dPCuVw

Length: 24min 44sec (1484 seconds)

Published: Fri Feb 17 2023