CSSDesignAwards is similar to Awwwards -- This is their list of the top 10 websites of 2022. And yes, most are 3D with Threejs. www.cssdesignawards.com/blog/2022-website-of-the-year-winners/378/
I'm still wandering why it called CSS AWARD when it clearly defile css😑 and there's too much going on in these websites. To my they aren't user friendly
It’s so weird. What I really care about are stunning mobile websites; yet all awards focus on the desktop viewport. So annoying. In business 80% of first visit traffic is phones now. Total average is 50% mobile vs desktop
I was thinking the same throughout all the video... These websites do look impressive, but that comes at the cost of mobile users. I don't even think they're great websites on their own, actually. I get the impression the average person would feel overwhelmed by them and confused. I definitely did.
Gary, this channel's owner seems like an above average developer and even he was dumbfounded or confused at times with some of these sites. Comparing this to the average person who doesn't even realise what some of these elements could be, this seems like a recipe for disaster. I own a mid-tier smartphone with a snapdragon 720G processor and that thing is cooked navigating half these websites for just 5 minutes!
I'll be honest, you didn't really add much beyond some very mild quips. Like: "This was made with this stack" up in the corner, which in theory anyone could download, or reacting by stating that a transition just happened. I was kinda hoping you would go a *little* bit more into depth.
Impressive sites. Although I fing that this is more of a Web Showcase as opposed to a CSS showcase, as JavaScript is almost always the driving force behind these creations. Regardless, good video!
I was building this kind of crazy 3d immersive stuff way back in the day in flash for brands like Sony and Audi. Good to see this creativity return… and on another level with things like web assembly taking it way out there.
i love the kubota future cube the best, even though I just visited and the starting animation is far to pixelated. With the game at the end... well is that still webdesign or is that gamedesign :'D open unity, import the scene and characters, create the logic and export for web.. hardly webdesign =) but really nice examples there! finally not some 0815-black font on white background with some pictures, very nice :)
These sites are just trash in my opinion. They were built to show off tech skills but have zero sense of design elegance. Over crowded jumbled typography. Horrible navigation and animation for no reason.
lets not forget the motion sickness it causes and how more than half the users would be confused and just hit the big X in the corner to close the website asap haha, then the 1st place is like just a game the dude made a game instead of a website so dumb, what next? wanna see the contact info oh beat this boss in the game first to access that area 😂
@@mrbobbilly2 the sites are horrible, they are just a form of show off like some weird art but not good from user point of view, me as the user would literally click off of those site asap because users want to reach their desired information quick, not see a f**king slideshow and definitely not wanna get motion sickness from using a companies website lol, maybe the only site that seemed alright was the shirt design to color it yourself its cool to like design the shirt the way you want and if then able to buy it
Sorry, but some of these are just too over the top. Going all out seems more like a flex of skill than actually making useless sites. If I visit a site where it's just pure animation it makes it almost impossible to tell what is going on.
the cube website is the best appearance, practicality i can see that as a advertise for a #1 company in agriculture field, that wants to push the agriculture to the next level. that website deserve to be on top.
Quick question for anyone: With something like Design 5 (Masar Destination), how would one start designing that? Whose job is it to handle the 3D animations and how much of that website would be the UI designer's job? Who puts it all together?
I could create it all myself... Really depends... The following "departments" are featured in 3D content creation as well as website-dev-wise: 3D Modeling, Rigging/Skinning (create bones inside 3d models which can be used for animating and deforming the model), 3D Animation, Web front and back end developers (front end = html/css/javascript/2DAnimation; backend= server side coding with e.g. php) and Graphic Designer. Always depends on the complexity of the site and the knowledge of the people of course. Yet it still is for web (meaning it's far more lightweight and easy to develop as a 3D game e.g.) so find the right person and he can do it for you all by himself... I guess the bigger the company that does it is, the more they are separated into different departments. But it could be two brothers, one doing the 3D content and the other the implementaiton into web. or one's doing the 3D animations, the other one the 2D stuff... It's really hard to tell... Depends on who you have available ;)
At 3:32 the banana is receiving emission either from the shader for the banana itself, a predefined light source at a z-index lower than the pink bg, or a pre-recorded animated object in THREE.js - Nice touch 🤌
The first website was like indian serial editing... too much coke involved... the only reason why you appreciated that is because it got an award... if a junior intern developer showed this to you... you would have asked him to calm down... that website was opposite of user-friendly.
No. If it's a portfolio/design agency site, it's customary to go "over the top" with creativity and ease up on all things having to be cookie cutter UX perfection.
@@DesignCourse Just because it's customary, doesn't mean it's "good" though. 🤷 A lot of times these award sites tend to recognize complex experiences, but not necessarily intuiative or accessible ones. It's a shame because they could be both.
Think of these design agency sites like a fashion catwalk. It's deliberately and outrageously ostentatious as a marketing point. The average consumer is never actually going to wear any of it.
Wtf man .. never seen an illiterate like him reviewing website designs.. what do he mean that ecommerce website cannot have designs like the first website you discussed.. it is the excuse of an illiterate who cannot make or understand the concept..otherwise what sense your review mean..? thankfully I never got an opportunity and hopefully never will to work with man with long hairs... Forget firing no one will even hire him... Illiterate who can only appreciate kiddish things and cannot understand mature concepts.. you aren't selected, go try somewhere else illiterate... Are you an Indian it appears from your intellect level and accent.... As I have seen people doing such foolish senseless talk only in India mostly... Giving awards to wordpress themes. Which don't even work on mobile devices.. how can you imagine of being hired.. stop dreaming and do something else in life.
19:14 you were supposed to click on the actual image of the the page which brings you to the actual site that's being nominated. You clicked on his name which brings you to his portfolio
Dear Greg - thanks for showing and commenting on these websites. I would like to know what you are using to show which software(s) or apps were used to develop the website(s). Thank you!
These website's suck, I see the complexity and work that has been put into them but there is to much going on and most of it doesn't fit together it's adding more crap for the sake of adding more crap.
hi do you have any idea how do i replicate the effect of the tshirt when the tshirt was rotated in design 4. you mentioned about shaders. do you know any tutorial that i can look into.
in three js you can use something valled shader material which allows you to modify a lot of stuff like the geometry and the colors bruno simon has an excellent course which includes a chapter about shaders that is pretty good but not too advanced enough to get your feet in my guess of how they achieved that effect is by adding the mouse movements as uniforms and then doing some math with the position x for the shirt to move them accordingly you can check out yuri artiukh he has plenty of tutorials on shaders
That's all very far from real design: accessibility (bad perfomance & navigation), product thinking, business tasks... In the end, what does it generally give the user? But i can call it "art". Very mediocre art.
yeah or straight up games like i never seen such sites why would a regular customer wanna go on such a site haha, as always they overdo creativity to the point that i wanna click out of those sites asap
I don't like your video. I rather clicked on the link to go straight to the cssdesignawards and looked at the websites myself. You clicked too fast through the pages, just talked about the tech-stack, not the design decisions. IMO you didn't add enough value to the viewable content that I will sit here and watch an almost 30 minute video, sorry.
same its just motion sickness the websites award why would anyone wanna see these websites they look more like games but nothing useful, maybe only the shirt one to draw own colors on design was impressive but the very top one halfway through forgot that they arent making a game but just a website
love the intersection of art and web development here, real treat to see many of these websites, understandable that most people here would complain about about usability and accessibility, they clearly fail in those aspects but the designers making these were showcasing whats possible, usability and accessibility can be reserved for e commerce websites, not while showcasing a portfolio. absolutely loved the first design, great sense of humor xD
yes but to me thats trash, go make a game then not a website, why would anyone wanna visit a website that is a game? zero functionality, if i wanna play a game i download a game or go on a website that specifically has games on it many of them, this whole award is more of a showoff as if they comparing their D size just cramming as many unique things as possible but none of it works well together or doesnt look good at all, and dont get me wrong YES its a lot of hard work i know that but all that hard work couldve been aimed towards doing something actually good not a showoff, its waste of time and effort
Is doing that more effort than actually being complex? I understand there's a lot of planning and design involved, you have to really know webgl/threejs, probably know blender or something like that... but after that, is it still "rocket science" or just a lot of effort?
@@markopolo2224 I would rather use a tool which would spit a three.js scene than using the three.js to create stuff. It is counter productive. Take it like trying to program in assembly while you can do it in a higher level language. In this case I believe all scenes are taken together on an engine platform be it unity or unreal and then exported to webgl and finally tweaked at three.js to remove absurdities or bugs.
@@denizorsel1029 interesting way to look at it but making a complicated scene in three js is already kinda easy so i dont get why would you need the extra 2 steps
@@markopolo2224 So you use blender to export assets to three.js . That is what I also mean. I wouldn't create meshes, materials within three.js eventhough it is possible. I would use a thirdparty platform like unity or unreal. In your case it is blender. By the way blender doesn't have UI export. Unity and Unreal give you the opportunity to create and export UI functionality so that you dont even need to write html css or js for the functionality. I said you can finally fix stuff in three.js regardless because those tools don't necessarily export everything 100% compatible with webgl and some things such as shaders may look weird on web and we go in to three.js and fix those or replace them. TLDR: What you are doing makes sense and I exactly meant the same.
CSSDesignAwards is similar to Awwwards -- This is their list of the top 10 websites of 2022. And yes, most are 3D with Threejs.
www.cssdesignawards.com/blog/2022-website-of-the-year-winners/378/
You actually went to the designer's portfolio website rather than the race game in 2nd one.
I'm still wandering why it called CSS AWARD when it clearly defile css😑 and there's too much going on in these websites. To my they aren't user friendly
Can’t agree more 😅
They aren't user friendly but we all spend love them.
It’s so weird. What I really care about are stunning mobile websites; yet all awards focus on the desktop viewport. So annoying. In business 80% of first visit traffic is phones now. Total average is 50% mobile vs desktop
@@denizorsel1029 So true
I was thinking the same throughout all the video... These websites do look impressive, but that comes at the cost of mobile users. I don't even think they're great websites on their own, actually. I get the impression the average person would feel overwhelmed by them and confused. I definitely did.
Gary, this channel's owner seems like an above average developer and even he was dumbfounded or confused at times with some of these sites. Comparing this to the average person who doesn't even realise what some of these elements could be, this seems like a recipe for disaster. I own a mid-tier smartphone with a snapdragon 720G processor and that thing is cooked navigating half these websites for just 5 minutes!
Which extension you were using to see which languagea where used behind?
I'll be honest, you didn't really add much beyond some very mild quips. Like: "This was made with this stack" up in the corner, which in theory anyone could download, or reacting by stating that a transition just happened. I was kinda hoping you would go a *little* bit more into depth.
Impressive sites. Although I fing that this is more of a Web Showcase as opposed to a CSS showcase, as JavaScript is almost always the driving force behind these creations. Regardless, good video!
I was building this kind of crazy 3d immersive stuff way back in the day in flash for brands like Sony and Audi. Good to see this creativity return… and on another level with things like web assembly taking it way out there.
I guess it was all flash and action script before?
What is the extension you’re using to check current tech stack?
i love the kubota future cube the best, even though I just visited and the starting animation is far to pixelated. With the game at the end... well is that still webdesign or is that gamedesign :'D open unity, import the scene and characters, create the logic and export for web.. hardly webdesign =) but really nice examples there! finally not some 0815-black font on white background with some pictures, very nice :)
how to make those do you know any tutorials? it looks amazing
These sites are just trash in my opinion. They were built to show off tech skills but have zero sense of design elegance. Over crowded jumbled typography. Horrible navigation and animation for no reason.
lets not forget the motion sickness it causes and how more than half the users would be confused and just hit the big X in the corner to close the website asap haha, then the 1st place is like just a game the dude made a game instead of a website so dumb, what next? wanna see the contact info oh beat this boss in the game first to access that area 😂
the skill and talent is undeniable but as a user I would instantly click off of most of these sites they are terrible for the user.
so do you think theyre good or bad?
@@mrbobbilly2 the sites are horrible, they are just a form of show off like some weird art but not good from user point of view, me as the user would literally click off of those site asap because users want to reach their desired information quick, not see a f**king slideshow and definitely not wanna get motion sickness from using a companies website lol, maybe the only site that seemed alright was the shirt design to color it yourself its cool to like design the shirt the way you want and if then able to buy it
The EGO on this video is on another level
is he like against three.js or something?
@@jurnoss I know right? Dude's just like where's three.js!! Where's three.js !! Bring me three.js.😂😅
Seeing works like these really humbles you a lot, that you might consider quitting. 🤣
Sorry, but some of these are just too over the top. Going all out seems more like a flex of skill than actually making useless sites. If I visit a site where it's just pure animation it makes it almost impossible to tell what is going on.
the 9th one wasn't "the race" but the site of Merci-Michel ^^
Which plugin are you using to check the tool or framework used to design the websites?
the cube website is the best
appearance, practicality
i can see that as a advertise for a #1 company in agriculture field, that wants to push the agriculture to the next level.
that website deserve to be on top.
damn i thought it was the worst, made me feel like i was in a michael bay movie or something
@@skrambledagg same its like lots of motion sickness and the cube effect makes it hard to see wtf is happening especially if you move them fast
you can middle click to open links to a new tab
Quick question for anyone: With something like Design 5 (Masar Destination), how would one start designing that? Whose job is it to handle the 3D animations and how much of that website would be the UI designer's job? Who puts it all together?
I could create it all myself... Really depends... The following "departments" are featured in 3D content creation as well as website-dev-wise: 3D Modeling, Rigging/Skinning (create bones inside 3d models which can be used for animating and deforming the model), 3D Animation, Web front and back end developers (front end = html/css/javascript/2DAnimation; backend= server side coding with e.g. php) and Graphic Designer. Always depends on the complexity of the site and the knowledge of the people of course. Yet it still is for web (meaning it's far more lightweight and easy to develop as a 3D game e.g.) so find the right person and he can do it for you all by himself... I guess the bigger the company that does it is, the more they are separated into different departments. But it could be two brothers, one doing the 3D content and the other the implementaiton into web. or one's doing the 3D animations, the other one the 2D stuff... It's really hard to tell... Depends on who you have available ;)
@@psy237 I see! Makes sense, thanks!
seeing him get frustrated with the tarot thing was somewhat endeering😂
Thank you so much for this video. Super helpful and well-presented. Your time and effort is most appreciated!
Thanks for sharing…may I know which extension you have used in your browser to know which technologies were used ?
Amazing video fr. I request you, to make like this websites tutorials (crash course). I hope I'll get it waiting... I think it will reach more
At 3:32 the banana is receiving emission either from the shader for the banana itself, a predefined light source at a z-index lower than the pink bg, or a pre-recorded animated object in THREE.js - Nice touch 🤌
The first website was like indian serial editing... too much coke involved... the only reason why you appreciated that is because it got an award... if a junior intern developer showed this to you... you would have asked him to calm down... that website was opposite of user-friendly.
No. If it's a portfolio/design agency site, it's customary to go "over the top" with creativity and ease up on all things having to be cookie cutter UX perfection.
@@DesignCourse Just because it's customary, doesn't mean it's "good" though. 🤷 A lot of times these award sites tend to recognize complex experiences, but not necessarily intuiative or accessible ones. It's a shame because they could be both.
Think of these design agency sites like a fashion catwalk. It's deliberately and outrageously ostentatious as a marketing point. The average consumer is never actually going to wear any of it.
Jay you must be super fun at parties
Wtf man
.. never seen an illiterate like him reviewing website designs.. what do he mean that ecommerce website cannot have designs like the first website you discussed.. it is the excuse of an illiterate who cannot make or understand the concept..otherwise what sense your review mean..? thankfully I never got an opportunity and hopefully never will to work with man with long hairs... Forget firing no one will even hire him... Illiterate who can only appreciate kiddish things and cannot understand mature concepts.. you aren't selected, go try somewhere else illiterate... Are you an Indian it appears from your intellect level and accent.... As I have seen people doing such foolish senseless talk only in India mostly... Giving awards to wordpress themes.
Which don't even work on mobile devices.. how can you imagine of being hired.. stop dreaming and do something else in life.
I feel like the lighthouse scores on those websites must be very low😂
These sites are not made for SEO, they are just for show. They have no organic search.
@@quickkcare605that means they really suck tbh
How did you mispronounce "tarot"? xD
WebGL right? I don't really think this counts as CSS perse but.. inspiring nonetheless
None of these sites are usable. It's the equivalent of a mod wearing a trash bag and everyone shitting themselves because it's so edgy.
the cube one is cool and all but scrolling through it fast gives you a headache or dizziness from TOO much animation
Which extension you, to check. What thinks are use in web page
Feeling depressed
..so webGL wins CSS awards? Yeah..its like trans winning in women sports..
19:14 you were supposed to click on the actual image of the the page which brings you to the actual site that's being nominated. You clicked on his name which brings you to his portfolio
love this channel. so informative and you can learn so much.
Please tell me which extension is used to know the tech stack that is being used in the build?
wappalyzer is the chrome extension
@@eloytekila Thank you! I will definitely try this one out!
Wappalyzer
Dear Greg - thanks for showing and commenting on these websites. I would like to know what you are using to show which software(s) or apps were used to develop the website(s). Thank you!
A chrome extension called Wappalyzer
It's Wappylyzer, a Chrome Extension
Wappalyzer
php
Wappalyzer extension in browser
Wow all of them are amazing 😱
As if he's never heard of Tarot card reading before.
I own a mid-tier smartphone with a snapdragon 720G processor and that thing is cooked navigating half these websites for just 5 minutes!
Designers when they see random abstracts and shapes: 😲😲😲😲
You do it then.
These website's suck, I see the complexity and work that has been put into them but there is to much going on and most of it doesn't fit together it's adding more crap for the sake of adding more crap.
so do you think theyre good or bad? because youre saying they suck, but then youre saying you can see how much work was put into them...
hi do you have any idea how do i replicate the effect of the tshirt when the tshirt was rotated in design 4. you mentioned about shaders. do you know any tutorial that i can look into.
in three js you can use something valled shader material which allows you to modify a lot of stuff like the geometry and the colors
bruno simon has an excellent course which includes a chapter about shaders that is pretty good but not too advanced
enough to get your feet in
my guess of how they achieved that effect is by adding the mouse movements as uniforms and then doing some math with the position x for the shirt to move them accordingly
you can check out yuri artiukh he has plenty of tutorials on shaders
That's all very far from real design: accessibility (bad perfomance & navigation), product thinking, business tasks... In the end, what does it generally give the user? But i can call it "art". Very mediocre art.
Very little in a way of CSS creativity. All we see is 3D models making their way into the browser.
yeah or straight up games like i never seen such sites why would a regular customer wanna go on such a site haha, as always they overdo creativity to the point that i wanna click out of those sites asap
I don't like your video. I rather clicked on the link to go straight to the cssdesignawards and looked at the websites myself. You clicked too fast through the pages, just talked about the tech-stack, not the design decisions. IMO you didn't add enough value to the viewable content that I will sit here and watch an almost 30 minute video, sorry.
Even when your impressed, you sound unimpressed😂
omg many of these sites make me motion sick. They are very cool but I feel sick and dizzy a few seconds in 😳
same its just motion sickness the websites award why would anyone wanna see these websites they look more like games but nothing useful, maybe only the shirt one to draw own colors on design was impressive but the very top one halfway through forgot that they arent making a game but just a website
love the intersection of art and web development here, real treat to see many of these websites, understandable that most people here would complain about about usability and accessibility, they clearly fail in those aspects but the designers making these were showcasing whats possible, usability and accessibility can be reserved for e commerce websites, not while showcasing a portfolio. absolutely loved the first design, great sense of humor xD
three js is really the future
What are the differences between three.js and webGL? Which is considered more advanced?
Great videos! Always learning so much :)
we all know why we are hear
to cry hard.
That Merci Michel studio is an end game villain who we all need to beat to be a top tier webGL dev
I didn't see the video thumb nail showing up in the video. Anyone knows about it?
This man had nothing to say
what is that extension called
Whats the extension that he used to check the stacks?
Wappalyzer i think, or similar
Unique, Modern, and Beautiful Website Design.
These websites are making my computer sweat, I hate it.
I get "ghost whisperer" vibes from design 2.
Great videos! Always learning so much :)
I got a superb idea after watching design 2 and I hope one day my idea will get me into successful Web developer
me watching as non programmers be like :
na na na na 3 je es.. na na na na 3 je es..
As i know, dynamic uri modification is a built-in js capability
last one seems like it was done in BabylonJS...
This is the best? Really? I guess I've still got a shot
How to make this in a ppt 🥺🥺 please help
“Terrat”
Excellent info as usual. Thanks. Could you do some advanced topics as well like SCSS functions
tarrot?
what's the extension you're using to check these pages?
le: I love this kind of videos more than the courses type of thing, mostly for the inspiration
wappalyzer
@@bartolol thanks
@Syed Mohammad Sannan good question, idk.
I download. I open. I don’t ask questions 😆
What's that highlighting pen there
Which program do you use to zoom? Like on 7:35
Ig he scrolled
Website winner is a game. That's something
yes but to me thats trash, go make a game then not a website, why would anyone wanna visit a website that is a game? zero functionality, if i wanna play a game i download a game or go on a website that specifically has games on it many of them, this whole award is more of a showoff as if they comparing their D size just cramming as many unique things as possible but none of it works well together or doesnt look good at all, and dont get me wrong YES its a lot of hard work i know that but all that hard work couldve been aimed towards doing something actually good not a showoff, its waste of time and effort
three js is the future
Three JS Man
Is doing that more effort than actually being complex?
I understand there's a lot of planning and design involved, you have to really know webgl/threejs, probably know blender or something like that... but after that, is it still "rocket science" or just a lot of effort?
three js is so hard to master that in fact this would be considered rocket science
even after 3 months of learning its like i only know the surface
@@markopolo2224 I would rather use a tool which would spit a three.js scene than using the three.js to create stuff. It is counter productive. Take it like trying to program in assembly while you can do it in a higher level language. In this case I believe all scenes are taken together on an engine platform be it unity or unreal and then exported to webgl and finally tweaked at three.js to remove absurdities or bugs.
@@denizorsel1029 interesting way to look at it but making a complicated scene in three js is already kinda easy so i dont get why would you need the extra 2 steps
@@denizorsel1029 im using blender with three js and there is almost nothing i need to change to be able to use it completely in three
@@markopolo2224 So you use blender to export assets to three.js . That is what I also mean. I wouldn't create meshes, materials within three.js eventhough it is possible. I would use a thirdparty platform like unity or unreal. In your case it is blender. By the way blender doesn't have UI export. Unity and Unreal give you the opportunity to create and export UI functionality so that you dont even need to write html css or js for the functionality.
I said you can finally fix stuff in three.js regardless because those tools don't necessarily export everything 100% compatible with webgl and some things such as shaders may look weird on web and we go in to three.js and fix those or replace them.
TLDR: What you are doing makes sense and I exactly meant the same.
Mouse bros' websites.
I love it ❤❤
Open the treasure chest !!!
"tarot" lmao
Super nice video :)
merci qui?
which extension do you use??
Wappalyzer
Boring
Yes.
❤️
the thumbnail ans is you