funny thing is 90% of the time the final development app never look like this. Dev are are going to complain and say the API is incapable of doing such animation for the UI element is bloating causing the app to slow down. what a sad world we live in
@@KL-oj2my yeah I remember the day when my friend gave me a ridiculously difficult UI design for a react app as a figma file, I don't even wanna talk about how messy css I had to write for that. It slowed the development speed and website as well.
@@morgard211 to be honest it turned our really awful, and I'm ashamed of it, but now I'm working with D3 (and I know there are a lot of wrappers and stuff) But I think I needed a different set of tools for such kind of applications.
I feel like 0:58 has a great animation but bad UX/UI. Just imagine if I were to buy 15 pizzas and next thing you know I would have a stack of 15 pizzas to scroll over. The same principle applies to the pineapple lemonades and mushroom burgers. As a designer, we should make the user life easier to navigate. Don't get me wrong the design has a great animation but it lacks the fundamentals of User experience and Interface.
There wouldn't be 15 pizzas. It would be three or four and that's it. Like the coffee cups. 2 cups will be visible and the rest of the cups won't be visible. Its a listview.
@@abraiyan7984 More important is the question if you had 7 pizzas lets say, which can probably happen if you throw a party, than this UI element is overkill in my opinion. Sometimes delivering a piece of information in the form of a text is much more worthy than an image stacking on top of each other.
@@biiiiiimm I completely disagree, the coding is the problem solving which makes it frustrating but definitely not boring. But you get tonnes of reward when something works.
Hope Adoli one was an agency and had a professional process. Unfortunately we hired them for a 3D project and they weren’t able to deliver. We cancelled the project 3 or 4 weeks into the process and needed to hire an agency that had the skills. The other was a freelancer and he delivered good work. He was, however, a bit difficult to work with and was “high maintenance”. We had done two projects back-to-back together and I wanted to continue the collaboration, but we had creative differences.
@@sakshimudgal8809 From a developer's point of view, in some particular design the animation is overused which is distracting the user from the main activity. The animation should be there to grab user attention with micro-interaction animation.
From my point of view, micro animations should makes the app more "natural" without disturbing the interaction or making it heavy. The first one, for example, do the job perfectly i think.
@@SaSha-hb5rq Is it really distracting like it's preventing you from getting you where you need to go because there's so much going on or you just think the interface shouldn't be used in every part of the platform? There's a difference, context is important.
As a client, having a app developed, while I love the animations, I am telling my coders fast over pretty. If the app takes 1/4 of a second longer to go from screen to screen, that apps up fast for a driver using it to track things.. I personally hate animations since I am all about speed..
The bank transfer flow does look really nice but this assumes that everyone has an image. Otherwise this won't work. In my experience fewer people than you'd expect actually bother to populate an avatar image.
Applying SEO best practices into web design increases your website's visibility in search engine results. By optimizing features such as meta tags and page structure, you may increase organic traffic to your website.
Firstly congrats to the hard work, who did this. Ui Looks very nice, the chosen in u r app is very simple to take. This is the main advantage of work. and the bad thing no one shows how to convert them into a working app or XML code.
Also, why do these never look as good when developed into an app? And is it possible to have these smooth animations in the final app? Especially now that we have high refresh rate phones?
Because it's turns your codebase into a mess, you'll be running more functions to keep track of an icon than the actual required code. Plus it slows down the app reall badly, you and I might have fancy phones but there'll be a lot of devices where it just wouldn't work properly and that's bad for your sales.
really beautiful.i don't know how to create such beautiful ui.i tried learning fundamentals colors,spacing,typography etc.but still cannot get uis to look good.can you give me a advice ?
on the second design I would prefer to have a number on the top because imagine if the user order 10 pizzas, we gonna have 10 box on the screen that would take too much space
Hello, this was awesome. I'm trying to understand the full flow of this UI Process. I want to have a mobile UI for my very small little business, that clients fill in details. My question is where do these details go? Is this component of the flow part of the UI design or is it 'something' else. Thank you!
Just write a brief first, like what style you want, how much screen you need, and the flow of the app if you have it, also include the rough sketching, have a meeting with your vendor, then discuss that brief.
I really want to get into UI/UX design but don't know where to start. I'm currently in CyberSecurity with a background in Sys/Network Administration. Does anyone have any tips for an accelerated learning path? It really is my passion.
Hey man, I already have a flutter application but I wanted to share my personal project on git and LinkedIn. So, I wanted to know how can I make these small videos which look dope!.. Appreciate your efforts man!.. anyone pls help
These animations have the novelty factor, but they just seem gimicky. I get it that you can create a video with any kind of liquid or wacky animation but: 1. Is the effort to do that actually worth it? 2. Are these animations actually developer-friendly? Like the people that design them, it seems they don't really care if adding these animations add value or actually become distraction, let alone thinking about the development process. Other than that, seeing a liquid motion is cool, but that's kind of it.
What if they aren't a distraction and are user friendly? The animations look great. As long as all it's easy to navigate, user friendly, not distracting, and adds value then these animations are fine.
Where can I find someone to do this stuff? I need some serious animations. Someone hit me up with a list, we got the $$$ real stuff searching hard. Lemme know
How do they get these interactions to move so much? I'm just starting out and my mock ups on adobe xd and figma are pretty static, these are almost like videos of ui
No need for all the crazy animations/movements. as long as the interface showcase the pain point of the product it's good enough. dont waste so much time on making a screen/mockup look pretty, because PM, Dev and stack holders are going to tear it all down during reviews.
do you transport Mock ups from XD or sketch to AE then make it animated ? Please share me some insights on how you can make this because i wanna learn and I do not know how to
Tnx very much. i have another question. after we design these in adobe xd or ... , how can we use it in app or in website? we should code it but how we should code it? in which program?
![[UA] NAVI проти G2 Esports | Blast Premier Fall Final](http://i.ytimg.com/vi/QWlIm4FGESQ/mqdefault.jpg)
funny thing is 90% of the time the final development app never look like this. Dev are are going to complain and say the API is incapable of doing such animation for the UI element is bloating causing the app to slow down. what a sad world we live in
it's because designers don't take in account what actually needs to be done to realise the design in IRL
@@KL-oj2my yeah I remember the day when my friend gave me a ridiculously difficult UI design for a react app as a figma file, I don't even wanna talk about how messy css I had to write for that. It slowed the development speed and website as well.
@@thatsalot3577 now I'm curious about how it looks - do you have a screen from that design?
As a developer, Personally I take the challenge and try to do my best to achieve the same feel and look of the design
@@morgard211 to be honest it turned our really awful, and I'm ashamed of it, but now I'm working with D3 (and I know there are a lot of wrappers and stuff)
But I think I needed a different set of tools for such kind of applications.
I feel like 0:58 has a great animation but bad UX/UI. Just imagine if I were to buy 15 pizzas and next thing you know I would have a stack of 15 pizzas to scroll over. The same principle applies to the pineapple lemonades and mushroom burgers. As a designer, we should make the user life easier to navigate. Don't get me wrong the design has a great animation but it lacks the fundamentals of User experience and Interface.
Didn't think about that!
There wouldn't be 15 pizzas. It would be three or four and that's it. Like the coffee cups. 2 cups will be visible and the rest of the cups won't be visible. Its a listview.
@@abraiyan7984 More important is the question if you had 7 pizzas lets say, which can probably happen if you throw a party, than this UI element is overkill in my opinion. Sometimes delivering a piece of information in the form of a text is much more worthy than an image stacking on top of each other.
@@TheBlingm listen, if you order 25 pizzas, maybe the UI will show just 2 or 3 then ...
@@TheBlingm but ya, text is a good option. Nice thinking
everybody: this is amazing WOW!!
the guy who will code this : O_O
Ahah but it's funny to code this kind of stuff. Coding boring stuff is boring lol
@@biiiiiimm it's not boring it's complex
@@biiiiiimm I completely disagree, the coding is the problem solving which makes it frustrating but definitely not boring. But you get tonnes of reward when something works.
@@mastercode7851 Ohhh sorry my english isn't that good ^^ i wanted to say : i prefer to code this kind of stuff. It's challenging so not boring ^^
@@aiyushg1769 i totally agree. Just my english is abviously inaccurate ^^
Best examples of animation should be combined with how it has worked successfully for users.
Seeing these ui designs helped me feel relaxed when I was tired
Haaha, true :)
Interestingly enough I see two different people I’ve hired for projects featured in this list.
Wow interesting. How was your experience with them? in terms of keeping to schedules, delivery and quality of work?
You must be rich
Hope Adoli one was an agency and had a professional process. Unfortunately we hired them for a 3D project and they weren’t able to deliver. We cancelled the project 3 or 4 weeks into the process and needed to hire an agency that had the skills.
The other was a freelancer and he delivered good work. He was, however, a bit difficult to work with and was “high maintenance”.
We had done two projects back-to-back together and I wanted to continue the collaboration, but we had creative differences.
@@ab-kx1vg your comment doesn’t make sense to me. What is it you were trying to say?
@@dustinoverbeck I wanna work for you, freely
0:54 WoAHHH... Insanely beautiful!
ikr :)
Thanks for showing some great designs and the UX behind them!
cheers mate :)
Its more like UI ANimations than UX Design examples. Most of these are distracting users. lovely animations though.
Distracting ? How i just wanna know .I m new to this.
@@sakshimudgal8809 From a developer's point of view, in some particular design the animation is overused which is distracting the user from the main activity. The animation should be there to grab user attention with micro-interaction animation.
@@SaSha-hb5rq ok got it👍
From my point of view, micro animations should makes the app more "natural" without disturbing the interaction or making it heavy. The first one, for example, do the job perfectly i think.
@@SaSha-hb5rq Is it really distracting like it's preventing you from getting you where you need to go because there's so much going on or you just think the interface shouldn't be used in every part of the platform? There's a difference, context is important.
Damn Designs are amazing but just think of the one who codes this lol
Hahah
THis looks so easy. But behind the scene, it has great effort. looks simple and nice
None of them are implemented tho. Some of then are so complex it would not worth money and time to implement.
@@otoS97 exactly
As a client, having a app developed, while I love the animations, I am telling my coders fast over pretty. If the app takes 1/4 of a second longer to go from screen to screen, that apps up fast for a driver using it to track things.. I personally hate animations since I am all about speed..
Great look... but how much is difficult to implement? And regarding the performances?
Don't forget to like the video if you enjoy it, cheers :D
The bank transfer flow does look really nice but this assumes that everyone has an image. Otherwise this won't work. In my experience fewer people than you'd expect actually bother to populate an avatar image.
This is the best free software Ive seen. Respect.
Looks really great, nice animations, but to code all of this will take time and money. Seems client should be having very big project budget.
complex Animations maynot be effective for low end and mid-range devices
That's why i like using canva all my project
Wait, you design on canva?? that's awesome 🙂
It is really overwhelming to even look at, and not in a positive way. Like someone said in the comments section, animations are lovely though.
Is it really overwhelming? It doesn't even look complicated!!
Applying SEO best practices into web design increases your website's visibility in search engine results. By optimizing features such as meta tags and page structure, you may increase organic traffic to your website.
Firstly congrats to the hard work, who did this. Ui Looks very nice, the chosen in u r app is very simple to take. This is the main advantage of work.
and the bad thing no one shows how to convert them into a working app or XML code.
Thank you so much 🙂, yeah soon we will have Development series using flutter.
exactly
It is easy to design them, not to code them.
I think we need 9Gb of ram to run those apps 😅
are you sure?
😂😂😂😂😂😂😂
🤣🤣🤣🤣
These are cool, but you would never get such fluidity once it gets developed.
Oh
Thank you very much for your key......1000% work :)
Enjoy
I thought the intro was an ad and I got ready to skip
Im a ms software engineer graduated and Its my firm desire to become ux ui designer , its my dream and wish to learn more.
Hey, good luck with the process to become UX/UI Design. I hope this chanel can help you :)
@@newagemood thanks , this channel is cool and helpful for me
Thank you, you can subscribe this channel and get notif when the new video out.
It works! Thanks a lot.
Enjoy
like the second one
Also, why do these never look as good when developed into an app? And is it possible to have these smooth animations in the final app? Especially now that we have high refresh rate phones?
Because coding and animation are two separated things. This is why designers should learn to code as well.
Because it's turns your codebase into a mess, you'll be running more functions to keep track of an icon than the actual required code.
Plus it slows down the app reall badly, you and I might have fancy phones but there'll be a lot of devices where it just wouldn't work properly and that's bad for your sales.
Really nice animations but the developers definitely arent going to be happy trying to implement that.
🤣
You really good at explaining thank you
Glad it was helpful!
This is so cool!
hope you get some inspiration from this :)
She will create intuitive and functional UX UI designs. a freelance UX/UI
designer who translates your business requirements into modern, professional
well done lads, good job....
Glad you enjoyed it
Such a big designs woow😍😍
Thank you! Cheers!
awesome ideas & designs
Glad you like them!
amazing works. Thanks for sharing :D
Thank you! Cheers!
thank you!!! video liked and u got a well deserved sub from me!!!!
Glad I could help
Okay so how are they animating these!? I mean in chih platform! XD, Figma are limited do thry use After Effects to make these animations!?
You can use After Effect or Protopie to animate this design.
I love it 💯❤️
really beautiful.i don't know how to create such beautiful ui.i tried learning fundamentals colors,spacing,typography etc.but still cannot get uis to look good.can you give me a advice ?
Just keep practice and share your design, dont judge your own design let them give the feedback, so you can learn from it.
While all these look very cool, why are these kinds of UI/UX designs not actually any where to be seen irl?!
where I can learn ui animation like this
on the second design I would prefer to have a number on the top because imagine if the user order 10 pizzas, we gonna have 10 box on the screen that would take too much space
Mahn I love that music
Wow . Is it designed with Adobe xd or after effect? Hope you can tell me
Both
@@newagemood okey
thanks
Great!
Hello, this was awesome. I'm trying to understand the full flow of this UI Process. I want to have a mobile UI for my very small little business, that clients fill in details. My question is where do these details go? Is this component of the flow part of the UI design or is it 'something' else. Thank you!
Just write a brief first, like what style you want, how much screen you need, and the flow of the app if you have it, also include the rough sketching, have a meeting with your vendor, then discuss that brief.
@@newagemood Thank you, most helpful!
I like the application at the end. Can we have you do the application in the style we want in exchange for money?
Email as here itsmeuxiudesign@gmail.com
I really want to get into UI/UX design but don't know where to start. I'm currently in CyberSecurity with a background in Sys/Network Administration. Does anyone have any tips for an accelerated learning path? It really is my passion.
Any luck/Update?
Google UX Design Certificate
I really like the beat
When making the individual menu icon and texture on it on the app design, what program usually use? illustrator?
Yes, you can use illustrator to make the icon.
I’m struggling to see the ux in a lot of these e.g. a searchable list is a lot easier to navigate in a banking app than floating bubbles 🤔
So perfect
Wow, Your Video is awesome!!!
I'm glad you like it
perfect👌
Chersss :)
But how implement it in android studio some ui you can't for example custome progress bar it hard to create it the same
Hey man, I already have a flutter application but I wanted to share my personal project on git and LinkedIn. So, I wanted to know how can I make these small videos which look dope!.. Appreciate your efforts man!.. anyone pls help
You can use after effect & premiere pro.
I like how the 2nd one if you look closely you can see the tallest building in Dubai and he said it's in Singapore Xd
6.10 its good task planner
Amazing.what tool did they used for interaction?
You can use AE or Principal.
you got new subs
Glad it was helpful!
...how about explaining why you picked these randoms?
Nice design 👍
Thank you! Cheers!
Awesome
A developer will hate these
Why? Because the animations are clear and great?
Can anyone let me know the font name they mostly used? >
When a Designer laughs programmers cry...💔
How I can use these all !?
These animations have the novelty factor, but they just seem gimicky. I get it that you can create a video with any kind of liquid or wacky animation but:
1. Is the effort to do that actually worth it?
2. Are these animations actually developer-friendly? Like the people that design them, it seems they don't really care if adding these animations add value or actually become distraction, let alone thinking about the development process.
Other than that, seeing a liquid motion is cool, but that's kind of it.
What if they aren't a distraction and are user friendly? The animations look great. As long as all it's easy to navigate, user friendly, not distracting, and adds value then these animations are fine.
I love all the designs. What music track is at 5:19? I really like it.
Mate, my bad, forget the music tittle, i think all of music we put in the description :)
@@newagemood Great, thanks.
Ye kaise banate hai is pr video honi chahiye 😊
how to record such smooth animation, on which program? Let's say I made a design in Figma, then a prototype, how to record it?
You can use ob studio mate :)
Cool😘👍
good reference
Where can I find someone to do this stuff? I need some serious animations. Someone hit me up with a list, we got the $$$ real stuff searching hard. Lemme know
go to dribbble or behance, or if you want a cheap price go to fiverr.
We are design Firm , let me know what you need and we will design it for you !
@@magoktec7114 you have no content
@@mottoprint We dont showcase on youtube . If you want see our works then email us !
hi, i am a web development student, may I ask what tools or software or programm to do the animation like this?
You can use After Effect, Protopie, or Principle to animate your design.
what software does most designers use in designing the mobile app?
You can use Sketch, Adobe XD or Figma.
@@newagemood thank you i will try adobe xd :)
Bro. That intro music ! What's the name ????
where does get all this animation? Like which software do they use?
You can use Ae or Principle to create this type of animation.
How do they get these interactions to move so much? I'm just starting out and my mock ups on adobe xd and figma are pretty static, these are almost like videos of ui
Use AE if you want much move in your interaction :)
No need for all the crazy animations/movements. as long as the interface showcase the pain point of the product it's good enough. dont waste so much time on making a screen/mockup look pretty, because PM, Dev and stack holders are going to tear it all down during reviews.
@@sengv1987 So having a good looking interface is bad?
This video says why UI and backend developers cannot be friends
where to i download adobe illustrator for hp probook 4440s plse tell me
Creative cloud.
Which software are use to UI Animation?
You can use principle or after effect mate.
Intro music ? Pls
Is there any tutorialgor thesekindanimation
Good
Thanks
do you transport Mock ups from XD or sketch to AE then make it animated ?
Please share me some insights on how you can make this because i wanna learn and I do not know how to
In XD version 13 you can export your designs from XD to After Effects already. So you can animated your design per layer or artboard
@@newagemood so all these designs are made from xD? I wanna make prototype in those level of quality plz do tutorials!!
@@seoulkimchi50 Not really, it maybe figma or sketch to.
Any tutorial or recommendation where I can learn how to make that level of prototype?
@@seoulkimchi50 you can learn here ua-cam.com/video/KRDKQnGUsTg/v-deo.html
es idea mía o es la misma música de intro de Cecilia kookmin?
how do they create these?
The animation using AE
From where I get this design for my practice
You can find it on dribbble or you can go to our Figma community and download the freebies then learn it.
@@newagemood where I get your figma community send me link
Check it here www.figma.com/@itsmebfg
what software do they use to make this animations?
You can use principle or after effect to make the animation mate :)
What applications are used to create designs sep
You can use Figma or Adobe XD :)
Does the UI/UX designer do the coding.?
Not really, but you need to understand the basic
@@newagemood thanks
which program they make these ui ? i'm so interested in.
You can use Figma, Adobe Xd or Sketch.
Tnx very much.
i have another question.
after we design these in adobe xd or ... , how can we use it in app or in website?
we should code it but how we should code it? in which program?
@@user-fo9ce3hr5h im using flutter to develop app or web :)
Программисты нервно кусают ногти)
Which app sir you use
You can use Figma or Adobe XD to made the design, to animate your design you can use After Effect or Principle.
Sir please, make full course on figma or Adobe xd please sir 🥺
Please the 14seconds intro can you help get it done?
my bad, sry :)
All animation with AE ?
Yeah, mostly using AE