Liquid Animation in After Effects // UI Design Course

We create readymade websites, illustrations and branding.
cuberto.com/
Lots of designers, illustrators, developers and other people from IT industry follow us on social networks.
We decided to prepare a series of UX / UI design courses that show the whole process of app creation starting from prototype to unique animation.
In this video, we will talk about the creation design process of one screen for email client in Sketch with following unique liquid animation of removing a letter from the list
#ui #ux #webdesign

[@Luggruff]

Really nice tutorial on how to make the life of a programmer hell.

[@sharanvkt]

Underrated comment 😅

[@TheCHKMaking]

HAHAHAHAH! I agree with you.

[@tamtrinh174]

All we need to say is: Fuck you. Pay me !

[@kabir.]

LoL ! So true man

[@VeryBlueBot]

haha was going to comment the exact same thing

[@danbuild977]

I think this may be the first tutorial I have watched as entertainment. Amazing stuff!

[@AlecHalePletka]

This was phenomenal from start to finish. Entertaining, educational, great cadence and soothing background music.

[@waltage]

and useless. lol

[@yaroyaro423]

Thank you guys for such a great masterclass. Hope to see new videos soon!

[@HMalem]

this tutorial is a work of art, it tells a great deal about your skills . cheers

[@AnticioDukeDesigner]

Such a great showcase. Would love to get a masterclass on the interaction side a bit more. Impressive work. Stay hungry!

[@nicolaskarges6648]

Awesome idea guys! Please keep up the excellent work - stunned to see the next parts!!

[@ryannguyen0206]

That UI is exactly what I'm looking for. I love minimal theme 😍😍😍

[@rajivpriyadarshi3937]

Great Insight. Thanks a lot. I definitely won't hesitate to pay for your content. Looking forward to more.

[@miehackhd5027]

I have been waiting forever for this, Most accurate and to-the-point tutorial I have ever seen. Keep up the good work cuberto.

[@dhirajkadam2469]

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

[@yanpainghein5826]

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

[@ositaka]

Lovely piece of gold you guys had shared here! Thank you very much!

[@ishan101]

Awesome stuff, looking forward for more of these.

[@HenriquecgRocha]

Simply love it! Thank you so much

[@zed22065]

Love your work. Inspires me a lot. thanks for sharing it!

[@zrz1052]

Very sophisticated and professional video, looking forward to the next course

[@MarioCastellano]

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.

[@seofilipino]

I really hope you create more series of this UI + AE tutorials :)

[@MaheedharBudi]

The best walk through and great inspiration of fluid animation, thanks a lot ...

[@utsavplays3883]

Great value, Looking forward for more tutorial

[@deadpoolreborn5322]

Everyone in the comments section: this will make life of a programmer hell. Me : laughs in backend.

[@DeViLTh0rn]

ur favourite BE platform?

[@janczekala5527]

@@DeViLTh0rn Symfony

[@Amit-sp4qm]

Ha ha ha .. but I do frontend too .. aahhhh

[@ayeshaparyani376]

Hahaha can relate. I am a backend developer trying to get into ui design 😂

[@yega3k]

Yup, ain’t nobody got time 😂

[@AnshMehraa]

These videos are superb! I hope you upload more!

[@benedhk9119]

this kind of content that i need! looking forward for more tutorial on UI animation

[@titohidayat1063]

The design gonna be killing programmers.

[@achmaddany8915]

hahha

[@agent_447]

And the QAs going back to devs getting those stares

[@mansukong]

LOL 🤣

[@otoS97]

Tell me about it. They just don't give a shit.

[@AI-bo2yu]

ahahahaha

[@abdulrahmanehab8409]

We wait more and more and more Great work we hope to continue in this tutorial

[@arfandiazzahar535]

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.

[@AbualHassanPervaizAkther]

Love it man ! you discussed lot of topics not only UI Animations

[@sgnstormgamingnetwork5753]

Brilliant designers like you, make chaos in the developer's life. Very good animation, Thanks

[@juanlosada6751]

Keep it up with this series!

[@sergio_volum7677]

Really cool and inspiring! Thanks for sharing :)

[@morthim]

Fun to see someone take the same base idea and take it another direction

[@SebHaugeto]

This is totally amazing guys. Thanks!!

[@jeffthesigma]

Fantastic tutorial. Yall have some great work.

[@ahyoonkim9287]

When would the next tutorial be out? Can't wait! I would totally pay for this master class.

[@theredmaster_superbee]

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 "

[@dharmraj92]

Great showcase. really easy to understand the details.

[@mhamedayoubi2643]

I'm from morocco . Good work and professionalism

[@jojojsjdjdjjsjj]

love it! thanks you for that

[@marioserodotou2958]

Man your work is sooo good!

[@raghavendraj3758]

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

[@Pankaj-Verma-]

Truely Great Channel! Thank you so much for sharing such great value with us. #inspired

[@user-hf3ey5it5u]

what a stunning UI

[@elvischristian8063]

Thank you so much for detailed information..

[@Vikyou]

Thanks for sharing, this is a great class.

[@muri038]

A very interesting and intuitive design.

[@nhfahim1113]

thank you so much , it's very helpful for us as a designer , please give me more video like this , thanks again

[@mergenman7894]

You guys, just have to merge with Uizard! Both of you'll make so great!

[@leogt15]

You're a god damn genius. This makes me feel complete. Thank you.

[@PHlophe]

Leo "make me feel complete" wow ! Pai

[@iadesigns5558]

An amazing tuto love it

[@HenriquecgRocha]

congradulations Whait for more

[@Isynko]

nice tutorial guys, keep it up :)

[@georgemaykel4437]

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

[@jahidulislam4173]

best of luck, go ahead

[@visualproffesor]

that was beutiful flow of animation not gonna lie wow!!!

[@ratchetptnr]

very helpful. keep posting. You guys are awesome.

[@matthewvaccaro8877]

the slight pieces of B-role is pretty sick.

[@RossRawlins]

Great presentation!!!

[@adarshgoldar]

Dream come true. Thank you for the ui design masterclass.😊

[@supreetkumar7604]

where is the full link?

[@aycreativmedia3565]

Awesome, pls do more of this. i want to lean how to do it. Thanks much.

[@anpowersoftpowersoft]

Excellent video

[@panic_seller]

Clearly I wasn't built for this, the level of patience required FINE TUNING every detail really pisses me off

[@abdoulraoufgambo]

i love your work

[@shubhamaggarwal9460]

Quite Amazing

[@tolokaearnmoney4645]

How can you good at not only App design but also After effect? Brilliant!

[@jetlagfortwo8565]

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.

[@zainmu3486]

Ohhhh my God. It's so nice.

[@alexkanterman8604]

Great tutorial ! :)

[@HocineFerradj]

You are a pro !

[@tycography]

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?

[@andyziko]

Keep going!

[@KALOdesign]

Mate thanks for the tutorial.

[@mahathirmohammad8635]

thanks for the idea. I'll try to implement it with css, JavaScript and html.

[@PHlophe]

mashallah we want to see

[@raymondmichael4987]

Liked and subd; great work. Greetings from Tanzania 🇹🇿

[@mosescodes3677]

hello hi, which part are you from in Tanzania?

[@mosescodes3677]

you are learning awesome stuff bro

[@raymondmichael4987]

Moses Lazaro, thanks bro. Bagamoyo is where I live bro. Karibu saanaaa, Greetings from Tanzania 🇹🇿

[@mosescodes3677]

Are you interested in front end programming too

[@raymondmichael4987]

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.

[@ajithprakash00]

Nice video.

[@ChumX100]

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?

[@decooliveirars]

Awesome

[@user-nw6zy4pt7q]

Hell man, if I could I would hire you!!!!!!!!!!!!

[@SEIMYUNGVACTRONCOLTD]

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.

[@dreamdragons9844]

u really worth more views

[@kanishksahni3853]

Awesome video! I was wondering though how did you make the prototype interactive in the last bit of the video where you actually use it and the transition happens? did you export the transition into sketch? and make it into a drag even or something? Would really love to know more about it!

[@luluhefei]

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?

[@NERO-ez1mn]

what about the code? how to incorporate the design animation to the real app?

[@7racker]

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.

[@bakerlanglnonglait4502]

I have the same as soon as i saw the thumbnail

[@NERO-ez1mn]

@@7racker can you make a detailed vid on how to do it for the benefit of most beginners specially the coding process.

[@7racker]

@@NERO-ez1mn I will consider this but there are tutorials already out there.

[@NERO-ez1mn]

@@7racker maybe yours will be more understandable

[@vivekprasad5669]

This is soo cool

[@IsionIndustries]

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

[@inversioncomercial]

@@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

[@porter2k7]

​@@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

[@bazenagency]

Nice tutorial, I would do the same! Love the trance music as well! :D

[@aniharutyunyan7965]

Thank you!

[@user-cy4qd5kv2q]

thank your video!

[@kensyjolicoeur]

This is very answome

[@7racker]

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?

[@nihalnova]

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.

[@SkalleMedia]

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

[@nihalnova]

@@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 😎😎

[@7racker]

@@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.

[@adityaramesh1764]

@@7racker Absolutely. I fall under that category. I didn't realise that this was a problem until I saw your comment.

[@gunjankalita6276]

great concept. I am restless to learn it for android .

[@danielnewton5867]

Very nice

[@nikita1142]

Great, thank you! Can i ask you why you don't use grid when design screen ? You dont use any grid system (8/10 px or colums) ?

[@omerharel7003]

wow cool!

[@wd_1]

Nice!

[@odootiengviet3902]

so good

[@shouryathebest]

Thanks for the tut! 🙏🏻

[@danield2398]

1:11 This smooth mixing xD

[@mdjahin99]

How did you interact with the design on your iPhone? Did you code it ?

[@Uxarif]

Thanks a lot.