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 ua-cam.com/video/Fq2jbai4jqI/v-deo.html 2. Designing Grid Layouts for Dashboards and SaaS Products: The Ultimate Guide! ua-cam.com/video/dhUrLmr6GnM/v-deo.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)?
I've watched a lot of similar videos but I've never found anything explained so well!
Thanks Man
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.
Finally, someone talks about designing for androids as well! Thank you! 🙂
✌️
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.
You are most welcome
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 !!!!
Thanks Tony
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
ua-cam.com/video/Fq2jbai4jqI/v-deo.html
2. Designing Grid Layouts for Dashboards and SaaS Products: The Ultimate Guide!
ua-cam.com/video/dhUrLmr6GnM/v-deo.html
Subscribed immediately once you explained ppi.. my god.. i never understood it so ignored it. but man, i M here to learn and found the best teacher🎉🎉
You are now my new best friend. THANK YOU SO MUCH.
I'm a developer who needs some design skills for side projects. Your channel and content is just awesome!
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).
Hello sir thanks 😁👍👍👍
didn't know anything about designing on mobile so this will help me
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
no one make it more simple than this
thanx man
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?
Visit my website 😝
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!!!!
The most helpful video about UI for mobile apps I've ever watched. Thank you so much!!!
going to go make my first soft! My first soft!! Here I go! Wish luck.
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.
Thank you for this video. I never understood PPI and stuff until now. Well explained!
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
Yay!!! Awesome
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
Omg thank you! It's really the first time I understand the DPI thingy that well!!!
🙏
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
very informative video that i'm looking for many days finally got it. Thanks for making such informative video.👍
Bro it’s very intimidating! I’ve been slacking on it for a month now. The symbols are very confusing. You have to train your mind to
First video and I'm on a binging spree . Well done
Such a in depth knowledge you have shared, its just awesome. very thankful.
Wow I've found a gem mine of contents 🤩
thanks my man you solved lot of problems i appreciate the hard work. Wishing you to grow more
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.
Glad to hear that
@@DesignPilot do u have a plan for making video for tablet and desktop design with similar guidelines And techniques ?
The guidelines are pretty much the same. Nothing different. Just keep not of the screen size. That’s it
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!
This is what i'm searching for.. oh thanks man, very helpful!
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
Nicely explained ... Got every bit of figma and i only watched it once.
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
This is so well-explained! Thank you so much for this video!
Thank you for the video. Perfectly explained!
Brother you are a hero
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?
You can use the ones provided in Materiap Design and Human Interface Guidelines
Life saving ! Thank you! You are a master in explanation.
You're simply our Messiah!
Please make a video on handoffs and exporting for devs.
Thanks Man 🙌
Yeah please!!!!
Best movie I’ve seen about the subject. You are awesome!
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
0:01 I thought my video speed settings were on 2x speed...
😂
Really helpful for a growing designer like me, many thanks!
Glad to hear that
Really amazing video. Learned a lot from it. Thank youu
Such a detailed and quality content 🥺🥺🙌🙌tysm
🤩🤩🤩
A LOT of good information in this video!! Thank you so much, really well explained.
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.
Yeah man. It's on the way. I have planned it.
@@DesignPilot Thank you, I will stay tuned
This what I was looking for!! You are a savior bro.
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?
Yes
Amazingly helpful !! (from a UI Designer)
Thanks so much man 🙏
Maybe I missed it, but could you please explain why I should start designing for the most small screen instead of designing for the biggest screen?
I think the entire video is about that. I recommend watching it again.
Awesome explanation. A question: Are this proportions and size specifications up to date at 2022? Thanks for the video.
Yea they are
I love the content , love the intensity. Keep it up!
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
Explained well...thank you so much
Been waiting for this.. awesome and simple to understand.. a proper user experience :)
Thanks so much Vivek 🤘
Simply Marvellous 👏
ThankYou So much Bro It really helped a lot ...
Great Video, helped me alot
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
I uploaded that last week. Check it out
@@DesignPilot thanks
Thank you so much for this well-explained video. This is very helpful to me. Keep creating more videos like this. Subscribed!
Well Explained!!!
Wow this video is amazing. Any chance of talking about android tablet resolution? Where should one begin?
1024*768 should be good enough
@@DesignPilot Thank you. I'm going to give it a go now. THANKS!
Intro is just amazing
great content thank you for this knowledge
don't know what kind of drug dude take before tutorials but this was an intensive class of UI. Thank you
Hahaha 😂
Thankkkk youuu soooooooo muchhh for this practical and amazing information🥰🥰
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
Thank you for this. You explained very well.
👍
Such a amazing content, keep doing your awesome work
Thanks mate
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?
Just ensure you’re using high resolution images
Do you have a video where you explain constraints in detail?
Not really. But it’s very simple. I think you can just Google it.
So when your designing an app , do you design it for all resolution types or just one for both android and iOS?
Just 1
@@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?
@@raystarzee3929 Yeah. The developers scale in the design then work on that. Most 18:9 and 21:9 ratio phones just scale things hardware-based.
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?
The amazing explanation! Many thanks to you.
Goldmine bro. Much respect
Thank you
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)?
Yes
Design Pilot you sir is a saviour! 💯
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?
Ideally you are not supposed to design at 2x. That’s completely wrong.
@@DesignPilot Ah so we should design at 1x, and export @2x files?
Super Informative..🤗
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 ?
Don’t export images from Figma. Share the original files itself with the developer
@@DesignPilot It,s clear now , thanks again
Totally superb, great work
You are very good at teaching 💯👌. But am sad you ain't uploading these days.☹️
Superior .. thanks 🙏🏼
love the content, Chetan sir you the best ❤️️
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
Very well explained Bro. Hats off🙌❤
Awesome video, thank you!
Very informative, thank you so much
Amazing man! Really explained well.
🔥
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
Thanks man :)
Great video! Well explained !
very well explained!
extremely helpful, thank you!
this is very useful tutorial ever! thanks
Thank you
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?
UI design is not to be done in Photoshop
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
It was WOW!!✌m talking about background music you put in starting of video
😂😂😂 Thanks
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
Too good, Keep it up!
Very Well Explained Big Thums up
Make more video On App Designing
An Thanks for Your The Amazing Tutorial
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.
highly useful
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?
You don't have to. It's just to explain how the responsiveness works
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?
Apart from this question, this video has been a complete lifesaver. THANK YOU 🔥
For the status bar and home indicator, use the one from the Ui kit. It is designed to match the iPhone X
Thanks ❤️
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
You need download the respective UI KIT for the respective device
Man you are doing such a great job keep it up and keep Creating amazing content.
Thanks Love from Pakistan
Very informative! Thx
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)?
It doesn’t scale. The with of the components just increase . The margin stays 8dp on both viewpoints
U can probably just scale it diagonally as much as u can then scale horizontally/vertically. Some manual changes can be needed
This was really helpful!
pretty detailed. great stuff man :)
Thanks
ua-cam.com/video/WrkbTigh6UU/v-deo.html
Please look at this if you like it.