That's True, I am a graphic designer and I am often asked to do the initial design that the programmer will implement. And this video explained to me a many things of my part.
I don't have enough words to say " Thank you " . You don't know how much you helped me to start app design. I was so much frustrated / confused for all of the devices. But the way you explained everything, its pretty much clear to me now !! Looking forward to see some more great tutorial like this on the topic of " 8PX grid system" and " typography for app ui design" ...... Thanks a bunch bro ! Lots of love and respect for you from bottom of my heart.
Damn - I'm a 20 year IT veteran doing enterprise application design work for supply chain systems. Not the sexiest in terms of IT work and I am starting to do UX design for consumer apps. This content deserves tons of kudos! Well explained and straight to the point. Excellent work here !!!!
Wow! When I first designed for mobile, I did too much brainstormed about it. The whole point was "If I am designing on 360*640 what scenario will happen on real-time devices. Cause these days phones come with minimum HD+ screen, what about FHD, FHD+, 2K, 4K?" This video has these answers. Thank you and this is the most underrated channel. Your subscriber, Bangladesh. Can you explain it for the web design too?
You can watch these 2 videos 1. Ultimate Guide to Layout Grid Systems for Websites! - Figma Tutorial ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Fq2jbai4jqI.html 2. Designing Grid Layouts for Dashboards and SaaS Products: The Ultimate Guide! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dhUrLmr6GnM.html
Aspect ratio is width to height. So you might want to say 9 to 16, instead of 16 to 9. I think you're saying that because you've heard people say 16:9 more often (because of landscape devices/ monitors/ laptops).
TNice tutorials is aweso! I was feeling kinda overwheld when i first start soft but after watcNice tutorialng your tutorial video, i feel much more confident
Great! The way you have explained it is simply mind blowing. I had gone through many online articles but wasn't happy. You answered all my doubts. From where I can learn your online courses?
this really helped me so much!!! -- which explained why I was stuck.... and now I have to explain to my client that I messed up and need a few design changes!!!!
Thank you so much for this video it has really helped explain a concept i have been struggling with as i was working on a mobile app for my final year project.
I want to say, thank you very much I have been searching for hours to get this information but I didn't find it and here you present it in 36 minutes, now I am very happy, thank you very much
Awesome video, I'm just getting into mobile design. I can tell that THIS VIDEO IS AWESOME. I understood every relation DPI, PX and SCALING it's mindblowing
Man, this is the one of the best, infact top one from 100's. Videos and articles(including Google/apple guidelines which are complex bro understand for beginners) I read to understand this device specific design and resizing concept with difference between dp/px. Thanks lot for this definitely going to share this as best resource for all my designer friends. And lastly I would really love to see same kind of tutorial for designing for tablet and desktop versions too.
AMAZING explanation! Quick question though: I understand dp and px (now), but how do you know the ppi? sorry, I might have missed it, it's just the one thing that got lost on me. Edit: Never mind, figured it out at the end : ) (Bookmarking 15:10 for future reference)
Thanks so much Chetan giving us all these knowledge, you're absolutely one of my best on this platform. Your teaching skill is fantastic and you just nails it. You're Amazing!
Such a great video and thanks a lot! I am a newbie in mobile design and I am wondering a couple of things. How do you arrange font sizes? I mean that what are the proper font sizes for the smallest design and how do you rearrange while scaling the art board sizes?
This simply AMAZING!!!!! Can you make videos about using IOS KITS and how far can we customize the components in terms of colors and size, etc...? I have been searching for this for a while but can not find it.
As I understand the 2x 3x asset exporting only applies to images and icons, since buttons and other components are done through code and there is no need to export them, you still need to redesign everything to bigger or smaller devices so developers know how everything looks at other sizes. Right?
One of best tutorials I ever watched on design when can we expect basic UI principles for web or website please it would be really helpful for many beginner designers who has no idea for how to design for web
What happens to images after multiplication? Do they increase their resolution the same way? Is there any good practices about working with images for mobile app design?
@@DesignPilot so 1 for iOS and Android? So you saying by giving the resolution for only 1 type , the developer will be able to design for resolution types?
Amazing Video Content. It's 2023, so I hope I am not late to the party. Now, based on this how do you handle handoff. Here's what I mean. I noticed, that you had extra design elements even in the smallaer view. and then you clip content to accomodate the phone screen size. How best do I present every single one of this info, considering how they would look on different devices and the entire overlap or extra designs materials that only show when a user scrolls?
So in conclusion: Just design everything on the smallest device frame? And just let them scale accordingly since they are all in independent pixels (dp)?
Then when we export the asset for developers, let’s say we are dealing with a already 2x (720px width)prototype in Figma, do we export 1x files or 2x files?
This video has been a treasure , just amazing , thank you so much , a last question is about images I've got confused , what we need to export , an hd image or full hd image so the scalling won't affect them or anything else we must export ?
It was my first video i saw on UI basics and i understood it quite clearly!! thank you for sharing this. But can you make a video on the same for Photoshop?
I worked as a devoloper for three years now and, anytime I received a responsive design, it was only in one size and I never had problems constructing the HTML and the CSS. So... Why should I calculate all of this?
This might be a really rookie question, but when you are designing for different devices, how can you successfully locate the status bars (and the notch for iPhone X) and adjust appropriate spacing for your designs?
I find the ui kit quite confusing as you are only shown one size (iphone X) but not for iphone 8 or XS Max, so for instance there is no reference for iphone 8’s status bar
What I still can't wrap my head around is what happens when you design at 360x640 (1x for Android), and the design goes on a viewport that is 411x731 (Pixel 2) for example. Does it get scaled? Or does the size of everything remain the same (1dp=1px on both viewports), with components moving on the screen depending on the constraints (e.g. 8dp margin right on both viewports)?
