The best of the best. This is a number 1 design resource for me now. Would love to see a slightly slower pace/longer videos so i could catch up more easily! Brutal work and keep it up.
Amazing work! I really love the effort you put into those videos and the output. I was wondering whether you will be creating a handoff type of video from design to code. Would love to see that.
You need to base your spacing and radius and size based on an actual vertical rhythm set by your baseline line-height. Formula? Baseline x line-height = vertical rhythm. Eg 18px * 1.5 = 27px. That’s your row height, column size, margins, and everything is a multiple of that value. Radius: FontSize (of whatever your component is using in the typescale like h6/24px) + scale(-2) = radius Eg take the size of what’s 2x below your h6, so go from 24px then look at baseline 18px then you’d be at the body or 16px. That’s your radius for a card using the h6 as its primary text element.
Question: At 1:32 the line height of the subtitle text is 137.5%, curious to understand how did we land on this number? Because even if we convert that into pixels it comes to 24.75px.
You did a great job🎉, I love the process and design. As a designer to dev pov, using too much effect makes a loading time high, and most of the time mask layer isn't working in realtime code.when I move this design to a web layout to a tablet responsive design that was most tricky part us, gradient stroked lines not even work properly instead of that we use svg, while scaling we need provide different asset different devices 😢 how you guys tackle this problem ..
I'm still experimenting with a format. I don't want those videos to be boring and want to highlight techniques in the practical part as well as share a broader vision, so they can be engaging and enjoyable while you drink your favorite beverage on a break. Slow, step-by-step parts are unfortunately much less popular in general because people need to dedicate a significant amount of time and effort to reproduce it themselves. We value those people very much, so this time we added links to Figma with final designs and 1x speed screencasts of the design process, so it's easy to follow if you want at own pace. Thank you very much for the feedbaack!
Hummm… without a doubt it is perfectly executed and gorgeous but… I already know the front end developer reaction… To my mind the process must be a bit different for a good handoff. Please can you make a second part to show the responsive behaviours of your cards? How you manage the fonts, paddings, margins, border-radius changes depending on the breakpoints ? Thanks Doing a single image of this composition is not the right solution.
Thank you! I keep getting this question about devs, so I will probably do another video about it :) It feels like neither developers nor designers understand how simple it is to implement. > How you manage the fonts, paddings, margins, border-radius changes depending on the breakpoints? Good point, forgot to highlight it in the video. In the examples shown in the tutorial, you can go even without changing font-size/paddings,margins/border radius on different breakpoints. They will still look fine, in case it much the overall size reduction across other sections of the site. If the font size is 18px, you can simply change it to 16px on mobile devices if you need a more compact version. Paddings can be adjusted slightly from 20px to 16px. You can check examples of bento cards we developed for neon.tech and huly.io on different resolutions.
![[DRAGON BALL LEGENDS REVEALS ＆ STUFF] LEGENDS FESTIVAL 2024 Special Edition Part 2](http://i.ytimg.com/vi/af0phKxitX8/mqdefault.jpg)
The best of the best. This is a number 1 design resource for me now. Would love to see a slightly slower pace/longer videos so i could catch up more easily! Brutal work and keep it up.
Definitely looking forward to slower paced videos. This channel is a gem
Couldn’t agree more. His content is so refreshing
Clicked just to take a quick look but ended up watching the whole thing. Interesting stuff, thanks for sharing!
That's the greatest praise! Thank you!
The quality is insane! Well done guys. Thank you
Prolly the best UI design channel on the internet
Wow, thanks!
awesome stuff!! great quality and info!!! more long form tutorials!
Beautiful design, amazing video.
Really cool
I usually don’t comment on RUclips, but I fell in love with your design. It's really cool with great details.
I hope there will be more people with that attitude :) Thank you very much for the support!
Amazing work guys, commenting to boost the video letsgoooo
Finally RUclips Recommending Something Good
I wish RUclips recommend it more 😄 Thank you!
This guy is beast. Are people born this good?
Great visual skills, very helpful!
Your channel is a blessing in disguise... am still going through your videos.. planing on watch and replicating every single one..
thank you 😊
Thank you! You will become a pro if you do this.
Even though this style or trend of design is not something I typically engage with, your video was very well made and interesting to watch. Thank you!
I can't explain how good this tutorial is, thank you so much!!!!!
Thank you very much! Don't hesitate to share it with friends; we need more eyes on it.
Excellent, excellent, excellent.
Will be using something similar to this aesthetic for a post
Great... thanks to the team creating this tutorial.
Absolutely killing it. 🔥
Amazing work! I really love the effort you put into those videos and the output.
I was wondering whether you will be creating a handoff type of video from design to code. Would love to see that.
Full breakdown video in slow speed will be more helpful 💝
You need to base your spacing and radius and size based on an actual vertical rhythm set by your baseline line-height. Formula?
Baseline x line-height = vertical rhythm. Eg 18px * 1.5 = 27px. That’s your row height, column size, margins, and everything is a multiple of that value.
Radius:
FontSize (of whatever your component is using in the typescale like h6/24px) + scale(-2) = radius
Eg take the size of what’s 2x below your h6, so go from 24px then look at baseline 18px then you’d be at the body or 16px. That’s your radius for a card using the h6 as its primary text element.
Great work as always, thank you!
Thanks man! For sharing this!
Another great video... Please do break down series.. in slower pace, it woul be fantastic to learn.
Amazing work and video as always ! Thanks Alex and all the team 🙏
Incredible quality. On everything. Big fan.
insane edition 🔥
Wow!!!! Nice work, thanks for sharing.
Awesome tutorial!
Wow, thank you guys
i'm lovin it, lets have a glass of wine under that gorgeous bridge. albi looks great. so does your work
@@u_walk2251 with a great pleasure 😀 thank you!
GOATed Content! Thanks for creating this
easily became one of my favorite youtube channels, love love
Great video. Well done.
Well You deserved million subs ❤💕💕 hoping for more content on development side Thank you.
The best of the best.
Question: At 1:32 the line height of the subtitle text is 137.5%, curious to understand how did we land on this number? Because even if we convert that into pixels it comes to 24.75px.
Yayy, thanks for this.
Taste of excellency! Brilliantly designed overall ❤🌈
Thank you!
Sick as always!
Valuable content ❤
Alex with another banger 🔥🔥
Great Tips
My new favorite RUclips channel. Keep up the great work ❤❤❤❤.
Thank you! Will do!
You did a great job🎉, I love the process and design. As a designer to dev pov, using too much effect makes a loading time high, and most of the time mask layer isn't working in realtime code.when I move this design to a web layout to a tablet responsive design that was most tricky part us, gradient stroked lines not even work properly instead of that we use svg, while scaling we need provide different asset different devices 😢 how you guys tackle this problem ..
Amazing work rate
Amazing sir !! Thank you !
this video is a chef's kiss 😘👌
Ha-ha, glad you liked it!
Great video 🤌🔥
Thank you very much for this tutorial. I'll be subscribing straight away. Quick question: where does the texture you use come from, please?
can u make a tutorial showing how to export the groups of textures and borders that u applied in the frames?
GOAT content fr
Wow just wow 🤩
Where were you guys. Loved the video
amazing! can you make something similar for a light background pls?
I really appreciate the tutorial. Thank you. 😊 How do I take this to website? Like how do I optimise this for Framer/Webflow?
nailed it!
That's awesome
Pls make a video of advance website with parallox effects and also animated website
Amazing
I hardly ever comment :D but please don’t stop posting videos
@@Bob-qf5ue Thank you for the support! It means a lot to us. We need every like and comment at this stage.
Incroyable
bro, thank you so much
which software you use for creating this amazing stuff, very inspiring.
Figma
@@mahmudzar I mean the video :)
How do I export this perfectly to Framer!!! Pls make a video on it
Amazing vid, but how do you export these cards to web, as svg?
thx man
finally i am home
Thanks
It was going so quickly that I had to pause 20-30 times to comprehend the applications.
I'm still experimenting with a format. I don't want those videos to be boring and want to highlight techniques in the practical part as well as share a broader vision, so they can be engaging and enjoyable while you drink your favorite beverage on a break. Slow, step-by-step parts are unfortunately much less popular in general because people need to dedicate a significant amount of time and effort to reproduce it themselves. We value those people very much, so this time we added links to Figma with final designs and 1x speed screencasts of the design process, so it's easy to follow if you want at own pace.
Thank you very much for the feedbaack!
what is the name of the music playing in the background? :)
Make Skeuomorphism Great Again!
How did you add the texture to the number
🔥🔥
Hummm… without a doubt it is perfectly executed and gorgeous but… I already know the front end developer reaction… To my mind the process must be a bit different for a good handoff. Please can you make a second part to show the responsive behaviours of your cards? How you manage the fonts, paddings, margins, border-radius changes depending on the breakpoints ? Thanks
Doing a single image of this composition is not the right solution.
Thank you!
I keep getting this question about devs, so I will probably do another video about it :) It feels like neither developers nor designers understand how simple it is to implement.
> How you manage the fonts, paddings, margins, border-radius changes depending on the breakpoints?
Good point, forgot to highlight it in the video. In the examples shown in the tutorial, you can go even without changing font-size/paddings,margins/border radius on different breakpoints. They will still look fine, in case it much the overall size reduction across other sections of the site. If the font size is 18px, you can simply change it to 16px on mobile devices if you need a more compact version. Paddings can be adjusted slightly from 20px to 16px.
You can check examples of bento cards we developed for neon.tech and huly.io on different resolutions.
Amazing UI but what a nightmare for the DEVs...