15+ years developer here that recently went UI/Product Design. Can’t understand all the whining in the comments from the developers. Sure it’s extremely complex, but if the funding is there, developers should focus on doing their job and appreciating the challenge instead of complaining about how difficult something is. Design is truly a key differentiator today and animations like this make a real difference.
I like the smoothness of the animations but 2 problems: 1. using the color "green" for the liquid deletion UI makes no sense. When we talk about deleting items we associate the process with an 'X' icon and the color red. It's just a UX/UI pattern that is informed by decades of obeying traffic lights. Red = end; Yellow = wait, stand by, and green = go 2. You show the example of 2 gestures (swipe right over email item & swipe left over email item) being used to execute the "Delete" function. That is one wasted opportunity to execute another function besides delete. What about "Archive" or something else?
Completely agree, animation looks cool but UX is really bad. One thing they don't tell that visual design becomes gimmick when not thought out properly with ux in mind. But full points for the creativity here.
The point here is the animation. you could argue about the repeated icons aswell, but this is just a showcase of the animation and how to do it. changing color and icon is quite simple task, with the knowledge of how to do the animation you can put there whatever you want
@@SkalleMedia yeah right, but when making ux on point is just easy task, why shouldn't we create with ux in mind. I am not denying that animation is really good, but I'm just saying it could've been much better if they'd made it with ux in mind. But clearly thousand claps for the creativity 😎😎
@@SkalleMedia understood but when looking at this demo from a holistic perspective it doesn't work. also consider that this is an educational resource. some students might watch this and not know UX best practices and think this is ok.
applause for this design and development agency ... as an interface designer it must be delicious to have the freedom to create and to know that you have a team of programmers who do know how to do things ... to be sure that what you imagine and You design if it can be real thanks to the skill and commitment of your programmers. That is working as a team, those of us who have worked in agencies or in poorly armed work teams know that dealing with the closed and uncompromising stance of the limited programmers who are content to say ... "As long as it works, I don't care how it works. go "But I see your team and they even want to invent effects at least for demonstration ... it must be exciting the day the developer says" tomorrow I will have the first sample of functional effects "
You can use the Body Movin plugin to extract at least some of the animation code aescripts.com/bodymovin/ but you might have to use a physics simulation library to get a truly dynamic and expressive liquid effect I think.
cuberto.com/ Your support means a lot to us, please feel free to send us some love with a donation: www.paypal.me/cubertodesign github.com/Cuberto/gooey-cell
incredible possibilities to those who master it. I am almost done with my first track, but there is so much more to discover and learn. TNice tutorials
Awesome video. Sometimes, we have got to try and push the possibilities of designs and not be bounded by codes. The fact that the design itself is a push from the norm, it is only expected that to code it would require some level of thinking out of the box. That is what differentiates yourself from others who are just building on top of someone else's code.
Will this animation actually be functional in a product though? Since you are using AE your only option is to use Bodymovin to render a JSON file and bodymovin doesnt really support most effects in AE
Moses Lazaro, I'm interested in "good designs", in programming I'm interested in Full-stack, as I'm a "one man army" so I need to have bits of all worlds.
@@Yeheudhdudjsjzjejejehdzj How do you do that? Do you use a specifici nudget or program to set it on your listview? I have never done it and I-d love to learning! *I make apps with Xamarin
Thanks for sharing this video, personally I love to create my designs and then build all the code, I hope eventually getting better and build stuff like you.
usually when I show this kind of animation to programers, they will say it's too difficult and need a lot of time. At the end, project manager will cut it down and my animation will never gonna happen. At every time
Very helpful tutorial, thank you! I am wondering about the next step after you created the animation in AE. How did you view it on your phone and trigger that animation live?
Guys thank you much for explaining this cool effect. I wonder, if you use blur effect in all transitions? Does it make the transition to look more smooth.
Great tutorial! I’m subscribing. I’m just wondering if is this feasible to be materialized in a real project or can be integrated in an actual app code?
ok so I learnt a ton watching this as a motion designer going into UI stuff but one thing confused me... Why didn't you use AEUX and just precomp whatever you need as a 'png layer' so you don't lose the positioning? Your'e rebuilding every frame you want to prototype every time? That's crazy ineffecient! If it starts getting slow, then export a frame as a png in after effects and use the 'import and replace' post-render action to replace the precomp groups with PNGs or PSDs on a case-by-case basis. If it's the bounding box that's the issue, auto-crop 3 is an amazing tool to just trim all your comps to the visible content. Way quicker, and you get to edit everything afterwards without having to re-export everything every time you change a tiny bit of the animation.
Would it be too much if i suggest a tutorial on which the full animation is transported into code for the app?? i mean the process on using the libraries? Thank you so much!!
Can you make the design interactive in after effects , if not how you make it responsive design m After effects makes animation right but how you make it interactive response. Just a newbie question if any1 can answer. thank you.
Really nice tutorial on how to make the life of a programmer hell.
Underrated comment 😅
HAHAHAHAH! I agree with you.
All we need to say is: Fuck you. Pay me !
LoL ! So true man
haha was going to comment the exact same thing
15+ years developer here that recently went UI/Product Design. Can’t understand all the whining in the comments from the developers. Sure it’s extremely complex, but if the funding is there, developers should focus on doing their job and appreciating the challenge instead of complaining about how difficult something is. Design is truly a key differentiator today and animations like this make a real difference.
This was phenomenal from start to finish. Entertaining, educational, great cadence and soothing background music.
and useless. lol
Everyone in the comments section: this will make life of a programmer hell.
Me : laughs in backend.
ur favourite BE platform?
@@DeViLTh0rn Symfony
Ha ha ha .. but I do frontend too .. aahhhh
Hahaha can relate. I am a backend developer trying to get into ui design 😂
Yup, ain’t nobody got time 😂
I think this may be the first tutorial I have watched as entertainment. Amazing stuff!
The design gonna be killing programmers.
hahha
And the QAs going back to devs getting those stares
LOL 🤣
Tell me about it. They just don't give a shit.
ahahahaha
Fun to see someone take the same base idea and take it another direction
Brilliant designers like you, make chaos in the developer's life. Very good animation, Thanks
this tutorial is a work of art, it tells a great deal about your skills . cheers
I like the smoothness of the animations but 2 problems:
1. using the color "green" for the liquid deletion UI makes no sense. When we talk about deleting items we associate the process with an 'X' icon and the color red. It's just a UX/UI pattern that is informed by decades of obeying traffic lights. Red = end; Yellow = wait, stand by, and green = go
2. You show the example of 2 gestures (swipe right over email item & swipe left over email item) being used to execute the "Delete" function. That is one wasted opportunity to execute another function besides delete. What about "Archive" or something else?
Completely agree, animation looks cool but UX is really bad. One thing they don't tell that visual design becomes gimmick when not thought out properly with ux in mind. But full points for the creativity here.
The point here is the animation. you could argue about the repeated icons aswell, but this is just a showcase of the animation and how to do it. changing color and icon is quite simple task, with the knowledge of how to do the animation you can put there whatever you want
@@SkalleMedia yeah right, but when making ux on point is just easy task, why shouldn't we create with ux in mind. I am not denying that animation is really good, but I'm just saying it could've been much better if they'd made it with ux in mind. But clearly thousand claps for the creativity 😎😎
@@SkalleMedia understood but when looking at this demo from a holistic perspective it doesn't work. also consider that this is an educational resource. some students might watch this and not know UX best practices and think this is ok.
@@7racker Absolutely. I fall under that category. I didn't realise that this was a problem until I saw your comment.
applause for this design and development agency ... as an interface designer it must be delicious to have the freedom to create and to know that you have a team of programmers who do know how to do things ... to be sure that what you imagine and You design if it can be real thanks to the skill and commitment of your programmers. That is working as a team, those of us who have worked in agencies or in poorly armed work teams know that dealing with the closed and uncompromising stance of the limited programmers who are content to say ... "As long as it works, I don't care how it works. go "But I see your team and they even want to invent effects at least for demonstration ... it must be exciting the day the developer says" tomorrow I will have the first sample of functional effects "
what about the code? how to incorporate the design animation to the real app?
You can use the Body Movin plugin to extract at least some of the animation code aescripts.com/bodymovin/ but you might have to use a physics simulation library to get a truly dynamic and expressive liquid effect I think.
I have the same as soon as i saw the thumbnail
@@7racker can you make a detailed vid on how to do it for the benefit of most beginners specially the coding process.
@@NERO-ez1mn I will consider this but there are tutorials already out there.
@@7racker maybe yours will be more understandable
Love it man ! you discussed lot of topics not only UI Animations
Great Insight. Thanks a lot. I definitely won't hesitate to pay for your content. Looking forward to more.
cuberto.com/
Your support means a lot to us, please feel free to send us some love with a donation: www.paypal.me/cubertodesign
github.com/Cuberto/gooey-cell
Clearly I wasn't built for this, the level of patience required FINE TUNING every detail really pisses me off
I'm from morocco . Good work and professionalism
Awesome idea guys! Please keep up the excellent work - stunned to see the next parts!!
I have been waiting forever for this, Most accurate and to-the-point tutorial I have ever seen. Keep up the good work cuberto.
That UI is exactly what I'm looking for.
I love minimal theme 😍😍😍
I really liked how you approach UI keeping the users in mind. I would really love to see more of the process behind designing an UI
incredible possibilities to those who master it. I am almost done with my first track, but there is so much more to discover and learn. TNice tutorials
Awesome video. Sometimes, we have got to try and push the possibilities of designs and not be bounded by codes. The fact that the design itself is a push from the norm, it is only expected that to code it would require some level of thinking out of the box. That is what differentiates yourself from others who are just building on top of someone else's code.
You guys should seriously do an online course! Perhaps something on udemy or coursera.
This video is totally for marketing. Excellency and creativity doesn't come with tutorials or courses !
Thank you guys for such a great masterclass. Hope to see new videos soon!
this kind of content that i need! looking forward for more tutorial on UI animation
I really hope you create more series of this UI + AE tutorials :)
These videos are superb! I hope you upload more!
Very sophisticated and professional video, looking forward to the next course
that was beutiful flow of animation not gonna lie wow!!!
Man your work is sooo good!
Such a great showcase. Would love to get a masterclass on the interaction side a bit more. Impressive work. Stay hungry!
very helpful. keep posting. You guys are awesome.
Looks great in AE, but how does the developer create the liquid animation with code? Is there specific information from AE that is helpful?
I dont know about The mobile App but if it was WebApp or a Website then we can create it using SVG and CSS
Check their github,the code's there.
You can use Lottie plugin in AE it will give you an JSON file of the animation I know I'm late for the comment but I hope it helps you
Will this animation actually be functional in a product though? Since you are using AE your only option is to use Bodymovin to render a JSON file and bodymovin doesnt really support most effects in AE
@@rayray9448 I can´t identify these answers in their webSite. It looks really interesting, but I don't know if it possible to do easily in JS or CSS
@@inversioncomercial All written in Swift. github.com/Cuberto ...hope this helps you dude. I'm a JS guy so this didn't help me :P
I wish designers starting to make tutorials about developer-friendly design
Clearly this sort of thing isn't for every developer. If you don't like solving these kinds of problems, do something else instead.
Great value, Looking forward for more tutorial
You guys, just have to merge with Uizard! Both of you'll make so great!
Liked and subd; great work.
Greetings from Tanzania 🇹🇿
hello hi, which part are you from in Tanzania?
you are learning awesome stuff bro
Moses Lazaro, thanks bro.
Bagamoyo is where I live bro.
Karibu saanaaa,
Greetings from Tanzania 🇹🇿
Are you interested in front end programming too
Moses Lazaro,
I'm interested in "good designs", in programming I'm interested in Full-stack, as I'm a "one man army" so I need to have bits of all worlds.
u really worth more views
Fantastic tutorial. Yall have some great work.
Lovely piece of gold you guys had shared here! Thank you very much!
You're a god damn genius. This makes me feel complete. Thank you.
Leo "make me feel complete" wow ! Pai
When would the next tutorial be out? Can't wait! I would totally pay for this master class.
I am here , i want to remember me in the future because maybe you won’t be able to see the huge wave of subscribers comments
Yay Yay Yay! Thanks for sharing. I have been waiting to step up for next goal. Thanks for sharing. I wouldn't hesitate to buy it. :D
Beautiful, but I never understand how this is going out of After Effects and back to a working prototype.
thats our job , CODING
He explains the creative process behind the UI, in the final part of the video he's just showing off the final product, coded and ready to use.
@@Yeheudhdudjsjzjejejehdzj How do you do that? Do you use a specifici nudget or program to set it on your listview? I have never done it and I-d love to learning!
*I make apps with Xamarin
@@ronaldtejada8846 You should try Flutter, it's really easy and more intuitive
@@ronaldtejada8846 you can just use Figma and then transfer the code to Xcode, it much easier if you will program it as well
thank you so much , it's very helpful for us as a designer ,
please give me more video like this , thanks again
We wait more and more and more
Great work we hope to continue in this tutorial
1:11 This smooth mixing xD
Simply love it!
Thank you so much
the slight pieces of B-role is pretty sick.
Thanks for sharing this video, personally I love to create my designs and then build all the code, I hope eventually getting better and build stuff like you.
Great showcase. really easy to understand the details.
i love your work
How can you good at not only App design but also After effect? Brilliant!
Excellent video
Love your work. Inspires me a lot. thanks for sharing it!
The best walk through and great inspiration of fluid animation, thanks a lot ...
You are a pro !
Ohhhh my God. It's so nice.
Awesome, pls do more of this. i want to lean how to do it. Thanks much.
Quite Amazing
This is totally amazing guys. Thanks!!
A very interesting and intuitive design.
Awesome stuff, looking forward for more of these.
Keep it up with this series!
The animation looks really smooth. Will the series cover how to get it working on Android and iOS? Or is it limited to the design aspects?
Thanks for sharing, this is a great class.
Dream come true. Thank you for the ui design masterclass.😊
where is the full link?
I'll come back to watch this in one day...
That day is now 😂
Come back
Super IF design for mobile it's good and fine and given guide is also good and thank you for giving information and have a good day
usually when I show this kind of animation to programers, they will say it's too difficult and need a lot of time. At the end, project manager will cut it down and my animation will never gonna happen. At every time
With good reason.
thanks for the idea. I'll try to implement it with css, JavaScript and html.
mashallah we want to see
Great presentation!!!
Truely Great Channel! Thank you so much for sharing such great value with us. #inspired
Very helpful tutorial, thank you! I am wondering about the next step after you created the animation in AE. How did you view it on your phone and trigger that animation live?
Mate thanks for the tutorial.
love it! thanks you for that
Really cool and inspiring! Thanks for sharing :)
what a stunning UI
Great tutorial ! :)
Hell man, if I could I would hire you!!!!!!!!!!!!
Thank you so much for detailed information..
Guys thank you much for explaining this cool effect. I wonder, if you use blur effect in all transitions? Does it make the transition to look more smooth.
Hug from Brazilians.
nice tutorial guys, keep it up :)
Great tutorial! I’m subscribing. I’m just wondering if is this feasible to be materialized in a real project or can be integrated in an actual app code?
That liquid animation will have more lines of code than the entire backend code.
I know right, its a nightmare for me
ok so I learnt a ton watching this as a motion designer going into UI stuff but one thing confused me...
Why didn't you use AEUX and just precomp whatever you need as a 'png layer' so you don't lose the positioning? Your'e rebuilding every frame you want to prototype every time? That's crazy ineffecient! If it starts getting slow, then export a frame as a png in after effects and use the 'import and replace' post-render action to replace the precomp groups with PNGs or PSDs on a case-by-case basis.
If it's the bounding box that's the issue, auto-crop 3 is an amazing tool to just trim all your comps to the visible content.
Way quicker, and you get to edit everything afterwards without having to re-export everything every time you change a tiny bit of the animation.
Would it be too much if i suggest a tutorial on which the full animation is transported into code for the app?? i mean the process on using the libraries? Thank you so much!!
Nice video.
great animation effect. loved it..!
Do you have its FILE like code / project if you are willing to share it with us.
that will be very helpfull.
Available in Swift: github.com/Cuberto/gooey-cell
best of luck, go ahead
How did you interact with the design on your iPhone? Did you code it ?
Can you please make a complete series on this
Can you make the design interactive in after effects , if not how you make it responsive design m After effects makes animation right but how you make it interactive response. Just a newbie question if any1 can answer. thank you.
So May I know the process of working?
WIREFRAME > UI DESIGN ( SKETCH / XD ) > PROTOTPYE animation ( AE ) > CODING ??
An amazing tuto love it
thank your video!