@@Whoami-kn4lk A lot of coders can even without any libraries, but that's not the main concern here. The thing is that you could do some productive work instead of coding something which is absolutely unnecessary.
*Coders* : Great concept. Amazing animations. Wonderful design. A challenge that we all want to face off. *Also Coders* : Fuck you designer, this is a nightmare. We don't have time for that. The DEADLINE is coming soon.
@@gabrielramos3201 they can be if you export them at high resolution, but then you get into some complicated compression stuff, trying to keep the file size down
I love seeing a designer whose actually going through the lengths not just putting one mock up but yeah if you want this to become a reality you do need to communicate with developers because some of the after effects animations may be impossible in code
It's always fun watching how other designers conduct their work and what they choose to use and not use. One thing thing that stuck out - why not use auto layout, especially for parts that required even spacing?
I thought exactly the same. These are all super common components that are very easy to build using auto layouts. It just seems more work and messier outcome without auto layouts.
@@Astralmess I was also looking and thinking the same. Also with the naming, everything is still Rectangle XXX and Shape XXX. Still a highly informative video.
Right! No AutoLayout, no proper naming convention for layers, no use of rulers or grids, inconsistent text properties, building icons from scratch. This is the epitome of Dribbble designing!
Hello ! I am learning UX/UI in the goal of becoming a UX Designer. Do i actually need to master this type of animation for my future job or it's going to be the role of a Graphic / Animation Designer ? It seems very difficult to me to master these kind of animations
I feel like such an animation in a application would trigger me more than anything. Imagine having to wait for this animation to finish, before the new menu actually opens.
Looks interesting. Could you say, what is the purpose of this effect? Have you tested this on real device? Is that even visible for people with normal thumbs? What is the reason to squish the main content during transition? Is this effect more important than icons labeling in the tabbar? This is definitely cool from the fun perspective, but I really don't see here actual interface design. P.S. Guys have you heard about autolayouts? Really good stuff :)
yeah it's not a very functional interaction from a UX perspective, doesn't really seem to have a well thought-out purpose. repeatedly switching between tabs with the full screen animation would turn some people off to the app entirely! that being said, I think the point of this video was just to showcase a fun visual design exercise that may or may not have useful applications in the future. although I appreciate you bringing up these questions. many designers go for what's 'cool' at the cost of good usability.
@@frogturtle yes strikes me as something that would be a waste of money for how much time it would take to implement as well, with little payoff. Doesn't add anything to the functionality, doesn't add much to the experience of using the app either. Some might actually find the feature irritating.
Hey guys, You do pretty slick animations with fluid effects. Can you please tell me, what is done after the animation is done and completed in after effects?? How do you club them to make a GUI?.
Hey, this tutorial is awesome! But could you also explain how to make the rounded corners in the final composition? It would be really helpful, Thanks a million! 😊
is there a simple way for me as a designer to convert my animation on after effect to code or anything that can make easier for the programer to code????????????
Just wanting to understand: Is this normal in the design process to animate this for the programmer? Because it seems a lot of work just to get an idea across.
Depends. Sometimes its better to just spend and hr to animate the concept than to try to explain it to 20 different stakeholders with scheduling conflicts.
Rather than traditional website wireframes are you creating a storyboard closer to what you'd use for a video animation when you start laying out the web design for something like FlipaClip? Trying to wrap my mind around how you begin to show those interactions on paper to the client.
Hi I'm a designer trying to learn UX/UI and I gave this a shot and somewhat managed to succeed. But how do I import this back to figma so that I can prototype the buttons? Thank You.
The site looks amazing. Would you be able to make a video about a few of the technical challenges you guys tackled with that site? As a developer myself I wouldn't immediately know how to build this. I am especially interested in the syncing of scroll state to dom elements. Thanks
He doesn't know how to do this. He just designed it. This kind of animations are cool, but programming them is not realistic. First because of the loading time, second: deadlines, and third cost of production. More time = more money.
Hello I have a question regards of purchasing and using templates. Is it ethical if I use the modified template work for my job seeking portfolio and claim it's my work? Thanks for answering!
Of course, it is not ethical. You should use those only for inspiration but create something on your own, not small changes here and there. In the learning process, you can practice copying other great designs, but this is not to be displayed in your portfolio, this is for you to get better and better at designing and creative thinking. Once you are comfortable with the application and learn the design principle, you can start creating designs that emerge from your own creativity. You don`t have to reinvent the wheel, just be good. A developed eye for design is more important than knowledge. This comes if you practice every day. By doing this for a long period of time, you will become better. Practice makes perfect.
Was this recreated in coding or the animation was exported and simply just use gesture recognizers to toggle the animations? I'm tempted to do something similar but might be too hard to even accomplish.
This type of stuff is just concepts though right? How does this apply to actually creating something and not just showing how it would look if there was a working product
This. We can always find a good, beautiful prototype or animation concept on design sites. But nearly none of them can be actually implemented (without a dedicated anim->css tool or long development time). I think these designs are made to a large extent, to show off their design skills, rather than considering whether or not they can be developed within a limited time period.
I think there is an option to just implement the code that is already in AF into the actual code without the need to manually implement all the processes.
Awesome video, as always 🔥 It would be great to someday see the thought process, smaller decisions and paper wireframes leading up to these designs in Figma.
I've been using Axure for almost 8 years. In term of animation AE = 10/10, Axure 3/10 :D About Framer, I dont use it much but I think you can code any kind of animations (not sure) Axure's power is its ability to build prototype that you can interact as it is a real MPV. User can interact with real data, and the data can be processed throughout the prototype. So for me, I would prefer Figma for UI design/UI library, AE or Principle for animations/micro animation and Axure for UX design and prototyping.
Hi, thanks for your really cool and useful videos. I have a question, do you have to make the icons only in the Figma?or you can do them in Adobe Illustrator too?
he probably makes them in figma just because it's more efficient to make them in the same application he's already using, especially with that plugin for exporting to after effects. that being said I imagine they could be made in adobe illustrator first and then imported into figma as long as they're still in a file format that allows vector editing.
I have legit been dreaming about this part yesterday night 24:57 Is it actual swift?!Like was it made through SwiftUI or storyboard?! This part really blew my mind
Great design, but it would be challenging to actually code this. I think clean and simple design is the best, something like WhatsApp, Viber. Everything else is laggy and useless.
@@yuyah7413 English-language internet. The internet of othet cultures/nationalities/languages can me much more polite and considerate. It's really bad that people get used to speaking like that and never learn how to chill.
can somebody give me the working files so i can able to make it into code its so hard to follow the tutorial where these people also make a video fast which making hard to follow
With all due respect, this would never see the light of day in a real project. The FX you used aren't exportable to a vector animation with tools such as Lottie which would on the contrary make the devs job super easy.
★ cuberto.com/
★ www.patreon.com/cuberto [EARLY ACCESS]
The flipaclip website is mind-blowing! It's so pleasing to the eyes! Is this the future of websites, what they call story-telling?
Imagine having to code all these designs man I would be in tears.
same thinking bro :')
@@Whoami-kn4lk A lot of coders can even without any libraries, but that's not the main concern here. The thing is that you could do some productive work instead of coding something which is absolutely unnecessary.
@@TheKisem User experience and aesthetics are not unnecessary, if that was the case beautiful houses and office areas won't exist.
it actually looks easier to code to be honest than to go through the ball ache of manually keyframing the animation
Ui is easy to build just use figma to flutter
*Coders* : Great concept. Amazing animations. Wonderful design. A challenge that we all want to face off.
*Also Coders* : Fuck you designer, this is a nightmare. We don't have time for that. The DEADLINE is coming soon.
Also FE (after successful): Damn dude, i create this, look at this, look at this... (spread the news to the entire chat room)
@@sloggypanda Also User: Idoit developer, the app is so laggy. Uninstalling the app and rating 1 star
Undoable as app or code 🤦🏻♂️😅
@@madrid.. It can be achieved somewhat using Lottie
@Syed Mohammad Sannan how? In which language? Give me link to c
hence proved designer and programmer can never be friends.
Beautiful animated video. Good luck programmer now translate those effects into code :p
KKKKKKKKKKKKKKKK
It is horrible like a nightmare !!! Crazy designers. (Btw I'm a designer too but I do not do same complicated useless effects)
@@Whoami-kn4lk This is how brazilians laugh. We use "kkkk" instead of "hahah" sometimes
@@hermanocavalcanti9047 vietnamese too =))) it's sound 'kaka' in my language =)))
@@hermanocavalcanti9047 as an Indonesian, we used "wkwkwk" 😂😂😂
its crazy how you make icon, i love it
This could also be made interactive by taking the AE export as a gif to figma and triggering with interactions
Wow, that's useful information!🙌
Lottie not gif please! Spare me the compression!
are gif responsive?
@@gabrielramos3201 they can be if you export them at high resolution, but then you get into some complicated compression stuff, trying to keep the file size down
Nice, now show us how to implement this into code!
Thats the neat part, you dont
@@pins849 *nearest
@@TwitchTamilan what?
@@TwitchTamilan This was a reference to an anime meme template...search it up
@@codeIMperfect yup that's invincible ,
Developers are feeling crazy since they are getting design tasks like this from their bosses. HAHA
I love seeing a designer whose actually going through the lengths not just putting one mock up but yeah if you want this to become a reality you do need to communicate with developers because some of the after effects animations may be impossible in code
If there is any bar set in the design that's always set by CUBERTO. Some of the sick work for sure.
I do not agree to point out dev-s handoff, as this is an exercise. Thanks for sharing the process, it is always valuable. Great content! 🔥🔥🔥
It's always fun watching how other designers conduct their work and what they choose to use and not use.
One thing thing that stuck out - why not use auto layout, especially for parts that required even spacing?
I thought exactly the same. These are all super common components that are very easy to build using auto layouts. It just seems more work and messier outcome without auto layouts.
@@Astralmess I was also looking and thinking the same. Also with the naming, everything is still Rectangle XXX and Shape XXX. Still a highly informative video.
Right! No AutoLayout, no proper naming convention for layers, no use of rulers or grids, inconsistent text properties, building icons from scratch. This is the epitome of Dribbble designing!
im a frontend developer and i have to say that this hurts... a lot
Foda que mesmo tendo uma transparência isso deve pesar legal na aplicação
It hurts, but it looks so good!
Can't you use Adobe Animate for the animation?
@@wenhuang7989 I suppose you could for the mock up, but the animation must be programmed if you want to implement it in an app
Hello ! I am learning UX/UI in the goal of becoming a UX Designer. Do i actually need to master this type of animation for my future job or it's going to be the role of a Graphic / Animation Designer ? It seems very difficult to me to master these kind of animations
The dedication you put in on your work is amazing 👏
It is like clicking a picture of a scenery an artist has painted
You have to code this all🤧
خدارو شکر عالی هستید خدارو شکر کنید که به اینجا رسیدید
I feel like such an animation in a application would trigger me more than anything. Imagine having to wait for this animation to finish, before the new menu actually opens.
What tool do you use to import these custom animations to the app? Beautiful animations btw
tears ;-; (and bodymovin/lottie)
Cute haha
We dont use any app or tool, just our brain aahah These effects could be done by code using some frontend technology like css react etc
Looks interesting. Could you say, what is the purpose of this effect? Have you tested this on real device? Is that even visible for people with normal thumbs? What is the reason to squish the main content during transition? Is this effect more important than icons labeling in the tabbar?
This is definitely cool from the fun perspective, but I really don't see here actual interface design.
P.S. Guys have you heard about autolayouts? Really good stuff :)
you are totally right.
yeah it's not a very functional interaction from a UX perspective, doesn't really seem to have a well thought-out purpose. repeatedly switching between tabs with the full screen animation would turn some people off to the app entirely!
that being said, I think the point of this video was just to showcase a fun visual design exercise that may or may not have useful applications in the future. although I appreciate you bringing up these questions. many designers go for what's 'cool' at the cost of good usability.
@@frogturtle yes strikes me as something that would be a waste of money for how much time it would take to implement as well, with little payoff. Doesn't add anything to the functionality, doesn't add much to the experience of using the app either. Some might actually find the feature irritating.
Hey guys, You do pretty slick animations with fluid effects. Can you please tell me, what is done after the animation is done and completed in after effects?? How do you club them to make a GUI?.
Sadly the video ends with the AE part, where coding part is also juicy too. Do you guys use lottie or other animation methods (webgl/css animation)?
I love this tutorial
what was the action at 16:10 min? how to make animation with shrinking circle and rectangle? thanks
Hey, this tutorial is awesome! But could you also explain how to make the rounded corners in the final composition? It would be really helpful, Thanks a million! 😊
I 💙 the music in the background 😶
I’m going to use the AE technique on a course I am developing.
New UX-UI designer here. What are the best courses/places to learn these skills and how to implement them via code?
Animation starts at 14:03
is there a simple way for me as a designer to convert my animation on after effect to code or anything that can make easier for the programer to code????????????
Just wanting to understand: Is this normal in the design process to animate this for the programmer?
Because it seems a lot of work just to get an idea across.
Depends. Sometimes its better to just spend and hr to animate the concept than to try to explain it to 20 different stakeholders with scheduling conflicts.
Rather than traditional website wireframes are you creating a storyboard closer to what you'd use for a video animation when you start laying out the web design for something like FlipaClip? Trying to wrap my mind around how you begin to show those interactions on paper to the client.
how to use the after effects animation in native android and ios swift app,, any tutorials to help
Mine doesn't look like a real rectangle more like a buggy shape idk why all my settings are the same
U love liquid so much 😀
Hi I'm a designer trying to learn UX/UI and I gave this a shot and somewhat managed to succeed. But how do I import this back to figma so that I can prototype the buttons? Thank You.
So cool and easy on a design software like figma, but how am i supposed to do that in code and expect it to be flawless and performance light?
Beatiful animation, thanks for sharing!
Are you from Russia? I saw how you start typing "шт" in 08:28
ахах, да походу. не один это заметил)
@@combitoo_ оооо))
@@combitoo_ от наших не скроешься))
Yes, you got a video in After Effects. Now why didn't you let us know how you made it the APP UI?
The site looks amazing. Would you be able to make a video about a few of the technical challenges you guys tackled with that site? As a developer myself I wouldn't immediately know how to build this. I am especially interested in the syncing of scroll state to dom elements. Thanks
He doesn't know how to do this. He just designed it. This kind of animations are cool, but programming them is not realistic. First because of the loading time, second: deadlines, and third cost of production. More time = more money.
Why are you not using frames and autolayout?
How to run ui/ux in any smart phone. Please reply 🙏
That it beautiful!!!!
Did you code as well, how are you clicking and things are working?
Can this be converted into a code? Which language would you use?
Hello I have a question regards of purchasing and using templates. Is it ethical if I use the modified template work for my job seeking portfolio and claim it's my work?
Thanks for answering!
Of course, it is not ethical. You should use those only for inspiration but create something on your own, not small changes here and there. In the learning process, you can practice copying other great designs, but this is not to be displayed in your portfolio, this is for you to get better and better at designing and creative thinking. Once you are comfortable with the application and learn the design principle, you can start creating designs that emerge from your own creativity. You don`t have to reinvent the wheel, just be good. A developed eye for design is more important than knowledge. This comes if you practice every day. By doing this for a long period of time, you will become better. Practice makes perfect.
Create this as a lottie to make developers life easier
Great job..Thank you for this type of video
Was this recreated in coding or the animation was exported and simply just use gesture recognizers to toggle the animations? I'm tempted to do something similar but might be too hard to even accomplish.
This type of stuff is just concepts though right? How does this apply to actually creating something and not just showing how it would look if there was a working product
please can u just tell me where to get bgm like these?
That's cool. Now how do we code it to work in an app?
It's a nice concept, but I wonder how hard is to code this behavior.
This. We can always find a good, beautiful prototype or animation concept on design sites. But nearly none of them can be actually implemented (without a dedicated anim->css tool or long development time).
I think these designs are made to a large extent, to show off their design skills, rather than considering whether or not they can be developed within a limited time period.
That's the best part, you don't.
I think they use lottie
This looks amazing and gorgeous but also RIP the poor dev that have to translate it into code
I think there is an option to just implement the code that is already in AF into the actual code without the need to manually implement all the processes.
wow this is nice bro
How did you learn all that. Can u please recommend me something so that I can start making apps with this too.
waht programm do you use for this
I appreciate best work
👍🏻
✅
😀
Everyone talk about its hard in code, but its not if the style was on an image then you can easily change it to code too😅
Awesome video, as always 🔥
It would be great to someday see the thought process, smaller decisions and paper wireframes leading up to these designs in Figma.
can we also implement it in android app using android studio ?
Keep the hard work
Whats are your guys thoughts on using After Effects vs tools like framer or axure?
I think it's about limitations
I've been using Axure for almost 8 years. In term of animation AE = 10/10, Axure 3/10 :D
About Framer, I dont use it much but I think you can code any kind of animations (not sure)
Axure's power is its ability to build prototype that you can interact as it is a real MPV. User can interact with real data, and the data can be processed throughout the prototype.
So for me, I would prefer Figma for UI design/UI library, AE or Principle for animations/micro animation and Axure for UX design and prototyping.
how to import this animation back in figma?
Amazing make more videos like this
Super cool but can you guys make a animations totorial with code
Hi, thanks for your really cool and useful videos.
I have a question, do you have to make the icons only in the Figma?or you can do them in Adobe Illustrator too?
he probably makes them in figma just because it's more efficient to make them in the same application he's already using, especially with that plugin for exporting to after effects.
that being said I imagine they could be made in adobe illustrator first and then imported into figma as long as they're still in a file format that allows vector editing.
@@frogturtle Thanks 🙏
Thank you so much!
Intresting animation
which software is this
can we make Android app with this
nice animation
what is the name of the program you use?
Magic!
Where do you get the pngs for the categories section?
flip a clip is a fine app, cant u guys make pc verstion? i cant really draw well in my phone with my fat fingers.
I have legit been dreaming about this part yesterday night 24:57 Is it actual swift?!Like was it made through SwiftUI or storyboard?! This part really blew my mind
What fonts did you use on this one?
can this be done in Dreamweaver?
Show man, how to implement into code? Thanks
Great design, but it would be challenging to actually code this. I think clean and simple design is the best, something like WhatsApp, Viber. Everything else is laggy and useless.
Viber and WhatsApp are shit. You should've better mentioned Telegram as an example of good and simple design.
@@MaxTsyba Perhaps you could consider using less strong language to express simple opinions
@@dsle2617 welcome to the internet
@@yuyah7413 English-language internet. The internet of othet cultures/nationalities/languages can me much more polite and considerate. It's really bad that people get used to speaking like that and never learn how to chill.
@@dsle2617 othet
This cool but what's the point for users to have that kind of animations?
Now please - help ---- how to convert this in coding / real app on React Native platform ?????????????????
can somebody give me the working files so i can able to make it into code its so hard to follow the tutorial where these people also make a video fast which making hard to follow
song name?
awesome!!
that is cleeaaaannnnnn my guy
Really Amazing I was wondering How to realize them By CSS
How to check real-time prototypes like you are using on the app?
figma mirror is a really good app
@@ekaterinaefremova956 Thanks ..
Can anyone tell me how to translate this whole thing in android app code
I wish my boss never see these kinds of designs...
dont know about ios but motion layout made that animation easy to translate in android else its a real pain in the backside
With all due respect, this would never see the light of day in a real project. The FX you used aren't exportable to a vector animation with tools such as Lottie which would on the contrary make the devs job super easy.
Yo I dont even know how to do anything in this video but damn this interesting
where is the AE UX plugging link?
How do I implement this in my app?
Insane design without example code, best one xD ajajaja thats animation hurts asf
What designers do is provide multiple ideas to develop... So front end developers have something to do
ngentek-enteki memori hp ae 👍
How you bring that from after effects to mobile live screen ?
We developed it on Swift