Finally someone showing the design process of such a 3D Website. I always thought about how can you design these 3D Scenes in Figma but its a clever idea to do like a storyboard on the right. Thank you so much appreciate it
This is the kind of work, I want to do as a designer. Cuberto, Ramotion, Tubik. Work that is creative and based on real world requirements. Solving issues that most businesses are facing. And not just some fancy shmancy Dribbble post.
Ikr the fact that the school teaches you those Dribbble website design is smh. None of class teaches a good design nor a good function only simple things like hover effect 😂 i mean c’mon shouldda been a better thing.
This is the perfect kind of flashy website. I think too many webdevs/designers just try to make something as fancy as possible, but here they are clearly thinking of how the information will be useful for a client instead of wasting their time with pointless "cool" 3D. Very well done!
started as a Logo Branding designer, now I'm working with UI/UX never thought I'll be interested In 3D designs. Great video, Motivated me to push my skills further.
Omg i finally see how that scrolling parallax with ongoing animation works now. Ive been searching a tutorial for XD and nothing ever came up. It looks complicated but boy the result paid off👏🏻
Thanks so much for generously sharing the process and techniques behind the stunning design! It perfectly demonstrates how design, 3d, and storytelling can bring the production site to another level.
Wow, this is just fantastic. Thank you for sharing your process - this is the stuff that got me interested! So many insanely smart ways to implement design principles. It’s a freakin art piece. You just made fences the sexiest thing on the web. Awesome work!
Amazing project, Great creative thinking. Please upload more projects like these. Would definitely love to see the development of the website in webflow or the platform you used.
This is Soooooooooooo good 🔥 really wish for a step by step tutorial on how you achieved everything. Really need a comprehensive course from cuberto 🥺😩❤❤
I recently learned some basic Blender stuff (cuz it's free unlike C4D) and right now I'm trying to make graphics for my web project. Maybe it's not as fresh as using things like three.js but still, I'm happy that I can do that. :D Amazing project, keep it up. :]
Can any one please tell me how you exported your liquid swipe animation into code or your emotional slider into code (how you made it interactive?) please answer. 😇😇
site looks amazing. I think main problem is blank loading screen. No one will wait 2-6 secs nowdays without any information just to see main menu -> price list - some main info and links \ header can be loaded imidiatly for some one who just search prices on materials. Also its strange that it load all over again after F5, like nothing was cached.
Apologies for the noob question, but what program is this? I know a decent amount of HTML and CSS but haven't used a dedicated design program in a decade.
Very very impressive and beautiful. But the score on page speed insights is 54 on desktop. I mean, it took 20 seconds to load the homepage. Is it worth it? There has to be a middle ground somewhere.
Why did you opt for animations as jpg/png if you could’v used a framework like Three.js? Did you want to be sure of the smoothness as not all computers would’v been able to render animations as you wished for? Did you even consider rendering on the client side?
question, how to do you demonstrate a complex 3d shape like say a character/car/etc cause the pipes can be done but what about complex shapes do you do that also in figma or just tell the 3D artist how to do that without showing
Great walkthrough! I’m super curious to get the same behind the scenes from the development and implementation stage… is that available or planned? Thought from the video title that was going to be included in this video
These are the type of interactive and informative product-based websites I want to learn to create! Do you have any in-depth or masterclass-style courses available to purchase?
I always wondered why webpages that have animation deeply incorporated in them, choose to base the animation progress on user scrolling. This is a very common technique used by big companies like Google and Apple and also in the design demonstrated in this vid and as an animator, this technology always bugged me, since I don't trust a user to decorate the flow of my animation. A good animation is about the right rhythm and the fact that every user can choose their speed, totally spoils the flow and renders the most beautiful animations tacky and not smooth with odd interludes, it simply doesn't flutter the design nor the product. Maybe you'd be able to give me an answer, as an experienced designer that has done such scroll based motion designs, why is this method of scrolling often chosen over alternative approaches, such as, fixed animation points that may be initiated by an action of scrolling, but with fixed speed set by the animator. It's a bit hard to put into words but, why not have the part wherein the camera goes through the metal rod, starting at a user's scroll, but within the same single scroll, reaching the end part where the camera escapes through the opening of the rod, followed by the next section of the website? Was that clear enough to understand? I'm sorry if not.
Maybe it would be messy if you mix images and videos for the same animation ? Would it compromise the UX of users if they can't stop and rollback the animation they like to see again ? (I'm just a little web dev)
@@JohnSmithhh hmm you may be right, however, the way I imagine it done is via section separation of the website, any time you scroll, some script simply sends you to the next point on the page, only the animation transitions smoothly from one point to the other. The user could simply scroll back one section up if they wanted to revisit something so I don't see how the experience would be compromised. I was not suggesting that the whole website would play like a video without the ability to stop. Only that there are predefined intervals which let the animator dictate what's the correct pace of their animation to run at so it looks best.
@@JohnSmithhh across the web there are plenty examples (part on websites like apple and google as I mentioned above), where stunning animations are being rendered in ways that make them seem dreadful. Animation doesn't have a monotonous progress, at times at moves slower, other times quicker and since it's scroll dependent, it causes scenarios where it takes just half a scroll to play a great bunch of the animation and others where it takes a good few scrolls to get through to the other part. Also, especially in those scenarios where the animation runs very quickly on a very short scroll, many frames disappear and in the scenarios where it takes a few scrolls, especially between scrolls you start see the frames which makes the animation seem wriggled. It's challenging to put it into words I'm trying my best, hoping whatever I say makes sense haha it would be way easier to show an example...
i'm a designer starting to learn to code to make websites... seems like i'll have to learn 3d as well huh... this was amazing! thanks for the motivation. edit: i checked the website. is not friendly at all with slow connections. for me it took almost 7min to fully load. i guess there are places optimization can't reach hehe still an amazing experience to navigate through the website!
thanks for this design process video.. but something is missing. I would love to see more dev & code workflow, stuff like: what frameworks/libraries you guys used?
Finally someone showing the design process of such a 3D Website. I always thought about how can you design these 3D Scenes in Figma but its a clever idea to do like a storyboard on the right. Thank you so much appreciate it
Yeah. Can i make it on adobe Xd too? I just started on design... And im going to buy adobe Xd... Or figma is the better choice? Ah im confused
@@bagustri2332 I would highly recommend using Figma over adobe Xd
@@bagustri2332 figma 100%
run from xd, run…
@@bagustri2332 I’m in the U.K and Figma is the most corporate program
This is the kind of work, I want to do as a designer. Cuberto, Ramotion, Tubik.
Work that is creative and based on real world requirements. Solving issues that most businesses are facing.
And not just some fancy shmancy Dribbble post.
yeaahh same here
and it's the kind of work I want to do as a programmer :3
... I mean that's the main reason you become a UX/UI designer in the first place
Ikr the fact that the school teaches you those Dribbble website design is smh. None of class teaches a good design nor a good function only simple things like hover effect 😂 i mean c’mon shouldda been a better thing.
This is the perfect kind of flashy website. I think too many webdevs/designers just try to make something as fancy as possible, but here they are clearly thinking of how the information will be useful for a client instead of wasting their time with pointless "cool" 3D. Very well done!
What I like about Cuberto is that they publish the source code! That helps us understand how thing are actually built based on the design.
but its paid, so its shit
@@wikkidize I think its good, because they exclude people like you that arent grown up enough to understand that work isnt for free.
@@wikkidize What's behind a paywall? They have a github account?
@@mikopiko where can I find it? I find nothing on the cuberto Patreon :/ If you could paste the link here that would be very very nice!
@@jakobvarenbud852 is the patreon still available?
started as a Logo Branding designer, now I'm working with UI/UX never thought I'll be interested In 3D designs.
Great video, Motivated me to push my skills further.
I really love how you don't work with predefined styles here for ultimate seamless creativity and exploration.
This is the design process that I've been waiting for. Thanks a lot, Cuberto for inspiring us with your beautiful and stunning websites.
Omg i finally see how that scrolling parallax with ongoing animation works now. Ive been searching a tutorial for XD and nothing ever came up. It looks complicated but boy the result paid off👏🏻
Thanks so much for generously sharing the process and techniques behind the stunning design! It perfectly demonstrates how design, 3d, and storytelling can bring the production site to another level.
Beautiful work
This is something new, something interesting.
Not new but interesting and very creative
It was straight to the point and very informative. Hope to see more videos like this.
Thanks a bunch
God! this is my first ever video that ended without any flaw. its insane!
Dude! I’m New around here. This channel is Sooo underrated! Not 150k subscribers yet!? I’ll be here to see you hit 1 Mil.
Wow, this is just fantastic. Thank you for sharing your process - this is the stuff that got me interested! So many insanely smart ways to implement design principles. It’s a freakin art piece. You just made fences the sexiest thing on the web. Awesome work!
thank you for showing your process in details! Really appreciated. Nice music selection in the background btw :)
Good job for knowing your product!! It seemed like that has made most of your creative decisions
Amazing project, Great creative thinking. Please upload more projects like these.
Would definitely love to see the development of the website in webflow or the platform you used.
Thank you so much. I'm not a begginer but I've learned a lot. Great and insightful video, you're precious to the world.
Omg !! Thank you so much Cuberto. I love you all ❤️
This is Soooooooooooo good 🔥 really wish for a step by step tutorial on how you achieved everything. Really need a comprehensive course from cuberto 🥺😩❤❤
Awesome! you guys took the design and development to whole next level very much inspired.
Absolutely brilliant and lovely! Thanks for getting this up because you explain the process and show the workflow.
This is amazing! Thanks Cuberto Design
1. amazing work! 2. amazing that you break it down like this. very very valuable content!!!
Thank you for including the whole process! Was very informative and entertaining.
I recently learned some basic Blender stuff (cuz it's free unlike C4D) and right now I'm trying to make graphics for my web project. Maybe it's not as fresh as using things like three.js but still, I'm happy that I can do that. :D Amazing project, keep it up. :]
Can any one please tell me how you exported your liquid swipe animation into code or your emotional slider into code (how you made it interactive?) please answer. 😇😇
Bro do you have link to the emotional slider files? I’ve been finding it hard to do
@@coderblip8435 bro that's what I'm looking for
If any one has made the emotional sider for Android please share
Im currently redoing my website and have hired a dev who is implementing it - once it is done (next week) will share
@@RJ-ir9pj thanks bro very cool
Очень круто!
Был немного в шоке, когда в конце увидел макет на русском :)
site looks amazing. I think main problem is blank loading screen. No one will wait 2-6 secs nowdays without any information just to see main menu -> price list - some main info and links \ header can be loaded imidiatly for some one who just search prices on materials. Also its strange that it load all over again after F5, like nothing was cached.
Great work, great research, great flow. Grateful for the video reference.
Kudos for you and your work man! This is great, truly an artist!
One of my favorite sites! Thanks for the analysis.
😄
ЛУЧШИЕ!
Потрясающие работы!
Beautiful work. Thanks for sharing the process!
First video i've seen on UA-cam with no dislikes.
the speech till 1:05 made my day lovely i agree with that
Quality makes you distinct
Apologies for the noob question, but what program is this? I know a decent amount of HTML and CSS but haven't used a dedicated design program in a decade.
Figma
When will you open the Cuberto Coding UA-cam channel? (: (:
Wow, great website! Got you a subscriber.
Amazing work! You're breathtaking!
Very very impressive and beautiful. But the score on page speed insights is 54 on desktop. I mean, it took 20 seconds to load the homepage. Is it worth it? There has to be a middle ground somewhere.
Why aren't more lessons coming?
Omg !! Thank you so much Cuberto. love it!
Is that Sketch?
Figma
Soo cool. This is how websites will look until we upgrade and are able to walk around a website in the metaverse
But how you implement that Figma Projekt to Html/CSS?
Definitely expand your horizons
Immediately subscribed. Awesome content.
Why did you opt for animations as jpg/png if you could’v used a framework like Three.js?
Did you want to be sure of the smoothness as not all computers would’v been able to render animations as you wished for?
Did you even consider rendering on the client side?
question,
how to do you demonstrate a complex 3d shape like say a character/car/etc cause the pipes can be done but what about complex shapes do you do that also in figma or just tell the 3D artist how to do that without showing
Great walkthrough! I’m super curious to get the same behind the scenes from the development and implementation stage… is that available or planned? Thought from the video title that was going to be included in this video
Thanks, channel like yours make the youtube useful
Beautiful work. Thank you for sharing.
all hail the cuberto team!
Excellent work as always ✨
Just to confirm the last scene is not protoyped in figma right??? That kind of scrolling frame by frame jpeg is not possible in Figma is it???
Sick! Nice explanation! Liked and subscribed :)
why do you use png sequence ? can it not be done in threejs? doesn't png sequence effects the performance ?
why not use three.js for rendering the model instead of JPG images?
Nice design and explanation
wow amazing skills!!! keep up bro!
How did you showcase the design with all the animations to the client before development phase? AAE?
Great job and so many insights from video .
As always, awesome video.
Any chance you make a video based on your developer's perspective?
Loved the font.
Please tell me where do I get it from?
Amazing walkthrough
What program does he use for the website building
Figma
What exact resolutions do you use for the boards?
Holy shit, how much did this project cost :OOOO This is insane amount of work for a website.
Very impressive and insightful, thank you
This is absolutely amazing experience🌝🌝
i want to make this type of sites using code.
pls make tutorial of this to make it real site
cuberto.com/tutorials/28/
thank you for sharing your processe withe us . Really appreciated
This is insane 😱😱😱😱😱 amazing work
These are the type of interactive and informative product-based websites I want to learn to create! Do you have any in-depth or masterclass-style courses available to purchase?
Wow this is outstanding 😍😍.
Thank you for sharing this!
How much was the budget tho. Pricing your product is one of the important stuff
Super impressive stuff. How do you go about making the wireframes and storyboard is a website experience like this?
what do you use for the site prototype?
What platform you use for making websites?
May I know what software are you using to build the website?
That's really inspiring!
I always wondered why webpages that have animation deeply incorporated in them, choose to base the animation progress on user scrolling. This is a very common technique used by big companies like Google and Apple and also in the design demonstrated in this vid and as an animator, this technology always bugged me, since I don't trust a user to decorate the flow of my animation. A good animation is about the right rhythm and the fact that every user can choose their speed, totally spoils the flow and renders the most beautiful animations tacky and not smooth with odd interludes, it simply doesn't flutter the design nor the product. Maybe you'd be able to give me an answer, as an experienced designer that has done such scroll based motion designs, why is this method of scrolling often chosen over alternative approaches, such as, fixed animation points that may be initiated by an action of scrolling, but with fixed speed set by the animator. It's a bit hard to put into words but, why not have the part wherein the camera goes through the metal rod, starting at a user's scroll, but within the same single scroll, reaching the end part where the camera escapes through the opening of the rod, followed by the next section of the website? Was that clear enough to understand? I'm sorry if not.
Maybe it would be messy if you mix images and videos for the same animation ? Would it compromise the UX of users if they can't stop and rollback the animation they like to see again ? (I'm just a little web dev)
@@JohnSmithhh hmm you may be right, however, the way I imagine it done is via section separation of the website, any time you scroll, some script simply sends you to the next point on the page, only the animation transitions smoothly from one point to the other. The user could simply scroll back one section up if they wanted to revisit something so I don't see how the experience would be compromised. I was not suggesting that the whole website would play like a video without the ability to stop. Only that there are predefined intervals which let the animator dictate what's the correct pace of their animation to run at so it looks best.
@@JohnSmithhh across the web there are plenty examples (part on websites like apple and google as I mentioned above), where stunning animations are being rendered in ways that make them seem dreadful. Animation doesn't have a monotonous progress, at times at moves slower, other times quicker and since it's scroll dependent, it causes scenarios where it takes just half a scroll to play a great bunch of the animation and others where it takes a good few scrolls to get through to the other part. Also, especially in those scenarios where the animation runs very quickly on a very short scroll, many frames disappear and in the scenarios where it takes a few scrolls, especially between scrolls you start see the frames which makes the animation seem wriggled. It's challenging to put it into words I'm trying my best, hoping whatever I say makes sense haha it would be way easier to show an example...
Where do you take such photos?
How long did it take you to complete the website + how much did you charge?? Amazing work!!
would using threejs be easier/better?
Any tips on quoting the unknown?
what app is that you are using?
Awesome!!!!! This is great video
Which software do you use?
i'm a designer starting to learn to code to make websites... seems like i'll have to learn 3d as well huh... this was amazing! thanks for the motivation.
edit: i checked the website. is not friendly at all with slow connections. for me it took almost 7min to fully load. i guess there are places optimization can't reach hehe still an amazing experience to navigate through the website!
thanks for this design process video.. but something is missing. I would love to see more dev & code workflow, stuff like: what frameworks/libraries you guys used?
yes
Thanks for making this tutorial
What application is this to create the website?
Can someone please list the applications used in the video?
WOW WOW Beautiful work man !!! Can you please share codes or samples how to build such animations
can you just advise me what's approx price for such a masterpiece website?
i like this work sooo much