Ordering Balloon Bouquets UI Design and Animation [Design Tutorial]

★ cuberto.com/
In this design course, we demonstrate how to create an "Add to cart" web page for a balloon ordering service. For ordering a product, we applied one of the techniques that affects the conversion of sales. The whole process includes working in Figma as well as After Effects for the animation of a special control for selecting goods quantity.

[@pixellover2223]

Great vid! I'd love to see a switch from AE to Framer instead. I feel it's much more representative of the reality for animations and would allow people to actually interact with it. I feel that using AE for interaction design is an outdated workflow. Keep up the awesome vids.

[@aaronlee7012]

The developers : Sorry, I can't do this animation!

[@rayhanahmed2917]

Lol i just feel the same thing

[@greydef]

I’m a developer and I’m thinking “this video ended too soon” ;-). In all seriousness this looks like an interesting challenge, perhaps having balloon & control as Lottie files is a good start...

[@SaadKhaan]

Chris gannon has done it, I think it was last year he posted on twitter

[@askopin]

@@greydef there is no complex animations in this video, all can be done natively without overhead imposed by lottie

[@jayg5123]

I can do it in flutter

[@John-ie3mr]

I adore the pace of this. As well as not demanding a Like-smash or shilling a VPN for 3mins. *likes and subscribes*

[@wikki640]

love it

[@AkinsRealm]

Thank you!

[@Lokesh3152]

Nice

[@dinesh_1447]

Dopeee

[@dave3k]

Are your Patreon courses like this i.e in-depth with voiceover explanations?

[@giannidoria653]

Do you have guys any premium course about UI motion design using Figma and mainly working with Adobe After Effects? The tutorials are awesome but sometimes they are a bit faster for me and my current AE knowledge :(

[@mrajax_0101]

why you haven't used auto layout or constraints ?

[@_b_l_x_c_k_]

Would you mind telling me a way to get that easing menu out on the left side of your screen?

[@t_er3335]

Excuse me for your comment. I am Japanese. The Japanese ui video has little Figma making, and I've been curious about this video, so I'd like to ask you a question. Is it possible to animate a layer created in Figma with After effect and then return that layer to Figma again? I want to connect other screens on Figma with the screen created by animation with After effect with a prototype that is a function of Figma, so I want to move to Figma. I'm sorry that the sentence is difficult to understand because I use translation. Please.

Hello, if you use bodymovin plugin for AE , you can convert your animation to json . I'm not sure but you can't use this AE project on Figma

[@DavinSane]

how can i install the ui / ux plugin?

[@namtong577]

seems no Github link in the description?

[@_b_l_x_c_k_]

I wonder if this technique would work in adobe XD i know figma is very standard and does more when it comes to prototyping and design. Your design is very much considered to be advanced which i do not know how to make it like that in XD As you were more professional in these field. Do you think XD has these kinds of function like in figma (your demonstration). Even sliding, looping picture is impossible in XD. Sorry it could my knowledge is very limited but I can never figure out a way or even find any tutorial on youtube on that of XD yet. But I do want to start picking up figma.

[@welsey_uxley]

slice para selecionar quantidade é muito incomodo se tratando de usabilidade. mas ficou visualmente bonito :)

[@frysh]

Basta colocar um input para o usuário colocar o valor exato

[@_b_l_x_c_k_]

How do you know which expression is for which?

[@azazovsky2553]

Its paradise for designers, but it hell for developers

[@punkyllama420]

It's paradise for end users though. That's the variable that matters in this context. So if anything developers should create assistive technology that makes it not so hellish, and then these sorts of "delight" attributes can become more ubiquitous and not so exclusive to those with big $$ and access to the "world's greatest devs" (or whoever the hell is actually able to make these things work without supposedly excrutiating amounts of effort).

[@kedarsatwik6938]

Its so cool and awesome, but i want to know one thing is this is like photo editing or like workable website ...

[@TheRishikesh99]

Whats the background music?

[@samtipikin366]

Как попасть к Вам?

[@helenchinweike8080]

very difficult to understand cos am a complete beginner

[@Businesslearnte]

Hey brother, You're tutorials are great but there is no design source files attached then how we make this animations ? this is for entertaining purpose ?

[@Viralvlogvideos]

can u please share the details of the tool that ur using in the video for designing.

[@saitamas_cape]

i think it's figma

[@Viralvlogvideos]

@@saitamas_cape oh thank you for info :)

[@aahritya_tv]

@@Viralvlogvideos after effects for animation

[@user-gr7lk4dx3q]

@@aahritya_tv qwea s d s

[@aniketkumarchaudhary9066]

Figma plugin link ?

[@VladMolodetskiy]

20:02 slider

[@randomstreamer2675]

Didn't know you need coding for being a front end ux designer

[@TheBlingm]

That'd be considered as a unicorn...more or less

[@nathanleroux6509]

I still dont understand why every designer create models "for desktop" without using a standard desktop width. example: this video 1440px instead of 1920px

[@yash7630]

because majority of the displays are still 1440px and it all comes down to ratio so it doesn't matter

[@rusithgayashan3927]

@@yash7630 I just googled the most used screen resolutions and 1440x900 is only used about 10%, while 1080p is used about 20%, and 16:9 aspect ratio is the standard according to many sources. So your statement about the majority of displays is false. And what do u mean by 'it all comes down to ratio'? in my experience, trying to replicate a design with a non-native screen width in a native screen is really a pain.

[@samtipikin366]

​@@rusithgayashan3927 gs.statcounter.com/screen-resolution-stats/desktop/worldwide 1400 is macbook 1366 is a regular laptop. and they are almost the same, so by combining them, we have more percents than 1920 has. Also, It's a common situation when it's much easier to make the layout bigger than to make it smaller instead.

[@semyonneklyudov3718]

Круто, а почему на Русском не делаете?

[@CubertoDesign]

Очень маленький спрос, да и те кого мы опрашивали сказали что лучше все же на английском делать

[@VladMolodetskiy]

Включите титры с переводом и смотрите

[@user-sonyalan]

@@CubertoDesign пока не наткнулась на этот коммент смотрела ваш канал и думала: "какие же забугорные туторы полезные и высококачественные в отличии от наших", лол Спасибо за ваш контент ❤️

[@mrrrksmith]

You made a button without auto-layouts 🤮

[@audrinatalia2093]

Hi Guys 😍💋 💝💖