Liquid Animation in After Effects // UI Design Course
HTML-код
- Опубликовано: 10 сен 2024
- 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
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
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
This was phenomenal from start to finish. Entertaining, educational, great cadence and soothing background music.
and useless. lol
I think this may be the first tutorial I have watched as entertainment. Amazing stuff!
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 😂
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.
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
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 "
this tutorial is a work of art, it tells a great deal about your skills . cheers
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
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.
Clearly I wasn't built for this, the level of patience required FINE TUNING every detail really pisses me off
That UI is exactly what I'm looking for.
I love minimal theme 😍😍😍
Brilliant designers like you, make chaos in the developer's life. Very good animation, Thanks
Fun to see someone take the same base idea and take it another direction
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.
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
Great Insight. Thanks a lot. I definitely won't hesitate to pay for your content. Looking forward to more.
How can you good at not only App design but also After effect? Brilliant!
I have been waiting forever for this, Most accurate and to-the-point tutorial I have ever seen. Keep up the good work cuberto.
I'm from morocco . Good work and professionalism
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
Love it man ! you discussed lot of topics not only UI Animations
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!
I really hope you create more series of this UI + AE tutorials :)
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.
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.
Awesome idea guys! Please keep up the excellent work - stunned to see the next parts!!
You guys, just have to merge with Uizard! Both of you'll make so great!
Such a great showcase. Would love to get a masterclass on the interaction side a bit more. Impressive work. Stay hungry!
Very sophisticated and professional video, looking forward to the next course
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
this kind of content that i need! looking forward for more tutorial on UI animation
Lovely piece of gold you guys had shared here! Thank you very much!
thank you so much , it's very helpful for us as a designer ,
please give me more video like this , thanks again
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.
@@hakimdouib432 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
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
The best walk through and great inspiration of fluid animation, thanks a lot ...
that was beutiful flow of animation not gonna lie wow!!!
the slight pieces of B-role is pretty sick.
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.
Simply love it!
Thank you so much
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?
I'll come back to watch this in one day...
That day is now 😂
Come back
When would the next tutorial be out? Can't wait! I would totally pay for this master class.
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.
These videos are superb! I hope you upload more!
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
We wait more and more and more
Great work we hope to continue in this tutorial
So May I know the process of working?
WIREFRAME > UI DESIGN ( SKETCH / XD ) > PROTOTPYE animation ( AE ) > CODING ??
You're a god damn genius. This makes me feel complete. Thank you.
Leo "make me feel complete" wow ! Pai
Great value, Looking forward for more tutorial
Excellent video
1:11 This smooth mixing xD
Dream come true. Thank you for the ui design masterclass.😊
where is the full link?
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.
Love your work. Inspires me a lot. thanks for sharing it!
How to implement that liquid animation ? Any keyword for I learn it ? I have search with keyword " liquid animation android studio " but there is no result for that
Awesome, pls do more of this. i want to lean how to do it. Thanks much.
u really worth more views
How did you interact with the design on your iPhone? Did you code it ?
Quite Amazing
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?
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
Fantastic tutorial. Yall have some great work.
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?
thanks for the idea. I'll try to implement it with css, JavaScript and html.
mashallah we want to see
Awesome
This is totally amazing guys. Thanks!!
very helpful. keep posting. You guys are awesome.
Indeed, it is!
Man your work is sooo good!
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 showcase. really easy to understand the details.
Awesome stuff, looking forward for more of these.
I gave you a like but I took it off since I was expecting me to tell me how to export the animation into the app builder...
Very nice
Nice video.
Hell man, if I could I would hire you!!!!!!!!!!!!
i love your work
How to coding with that design ?
I don't get any solution css that effect:_)
Help
I'm curious how much of a pain this would be in flutter.. since it already has a slideable class which basically makes this a breeze since the widget on the side can be an animated one.. but this is always what I say before I spend a week struggling with something just to either give up or never use it if I completed it
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!!
Truely Great Channel! Thank you so much for sharing such great value with us. #inspired
A very interesting and intuitive design.
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
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.
bro how to implement this in android studio????
what a stunning UI
Thanks for sharing, this is a great class.
Can you please make a complete series on this
Keep it up with this series!
Really cool and inspiring! Thanks for sharing :)
Hug from Brazilians.
How to make this video as a interactive to the fingers? or it's just a video format?
Thank you so much for detailed information..
route, and connect it to my computer system, will it be as simple as creating one track and play a composition through it, recording it, then
great concept. I am restless to learn it for android .