Basics of UI Design for Mobile Apps - Artboard Size, Screen Density and Resolution for Beginners

🚀 Get 2 free months on Skillshare Premium & watch my Course for free:
skl.sh/2TVhf8z
In this tutorial, you are going to learn about the basics of designing user interfaces (UI) for mobile apps. I will talk about the process for both Android and iOS Apps. Even before we start thinking about fonts and colors, it is important to understand about the actual mobile devices. Since the apps we design are going to be viewed on multiple types of mobile devices, it becomes important to understand the right way to design.
So in this tutorial, I will explain various concepts about picking the right Artboard Size, Screen Resolution, Screen Density (also called as Pixel Density), Aspect Ratio, Constraints, Exporting Assets and the difference between designing for Android phones and iPhones.
Android Device Metrics:
material.io/resources/devices/
iPhone Device Metrics:
www.paintcodeapp.com/news/ult...
Figma File:
gum.co/suzS
🔗 - • Basics of Responsive W...
🔗 - • Designing Grid Layouts...
🚀 Get 2 free months of Skillshare Premium & watch my Course for free:
skl.sh/2TVhf8z
🚀 Create an account on Mobbin for free:
mobbin.com/?referrer_workspac...
--------------------------------------­---
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Twitter : / kvschethan
Facebook : / designpilot
Mail : [e-mail]
Portfolio : behance.net/chethankvs
Instagram : / design_pilot
Discord: / discord
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#uidesign #uxdesign #apps

[@deipty222]

Finally, someone talks about designing for androids as well! Thank you! 🙂

[@DesignPilot]

✌️

[@sakheemehta2785]

I've watched a lot of similar videos but I've never found anything explained so well!

[@DesignPilot]

Thanks Man

[@ahmedyassin2953]

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.

[@arpitbatri1419]

This is Pure Gold!

[@yomioseni]

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!

[@olytovchenko]

The most helpful video about UI for mobile apps I've ever watched. Thank you so much!!!

[@jaza7613]

Thank you for this video. I never understood PPI and stuff until now. Well explained!

[@sonumot5768]

Such a in depth knowledge you have shared, its just awesome. very thankful.

[@alvarodemoraesduarte5587]

A LOT of good information in this video!! Thank you so much, really well explained.

[@praveenpsg77]

thanks my man you solved lot of problems i appreciate the hard work. Wishing you to grow more

[@tanhoang763]

This is so well-explained! Thank you so much for this video!

[@rahilkarimlou5010]

Life saving ! Thank you! You are a master in explanation.

[@stubmow1567]

You are now my new best friend. THANK YOU SO MUCH.

[@mubarakakikonyogo6319]

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.

[@haneefahmed9748]

Too good, Keep it up!

[@sachinsharma-kp7rh]

very informative video that i'm looking for many days finally got it. Thanks for making such informative video.👍

[@den_vortezio]

Thank you for the video. Perfectly explained!

[@ajaythakur3557]

no one make it more simple than this
thanx man

[@khawajaansaruddin6940]

Great Video, helped me alot

[@melomancheto2761]

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

[@vivekjpcsinha4226]

Been waiting for this.. awesome and simple to understand.. a proper user experience :)

[@DesignPilot]

Thanks so much Vivek 🤘

[@nikhil4yourhelp670]

great content thank you for this knowledge

[@eumm11]

extremely helpful, thank you!

[@blendibr9554]

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!!!!

[@rohitjadhav8744]

This what I was looking for!! You are a savior bro.

[@tonybasa7491]

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 !!!!

[@DesignPilot]

Thanks Tony

[@MrMusic-ob2jj]

Superior .. thanks 🙏🏼

[@Valentynaua]

The amazing explanation! Many thanks to you.

[@yobillionaire]

Thank you so much for this well-explained video. This is very helpful to me. Keep creating more videos like this. Subscribed!

[@Im-np3fj]

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

[@saiswarupmohanty9428]

this is just amazing!

[@simranchhabriya9631]

Awesome video, thank you!

[@salocarrillo4344]

Great video! Well explained !

[@emilytchuu9876]

didn't know anything about designing on mobile so this will help me

[@vineetkapil1646]

This was really helpful!

[@christy22896]

Omg thank you! It's really the first time I understand the DPI thingy that well!!!

[@DesignPilot]

🙏

[@manaaanouar6071]

Brother you are a hero

[@siddhibhatia5714]

Really amazing video. Learned a lot from it. Thank youu

[@_djbhumi]

Explained well...thank you so much

[@dpkd3198]

Wow I've found a gem mine of contents 🤩

[@ARTushar1]

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.

[@DesignPilot]

You are most welcome

[@billal2731]

Thanks man :)

[@amitsai]

Totally superb, great work

[@varshakapil8224]

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🎉🎉

[@sahilaujla]

ThankYou So much Bro It really helped a lot ...

[@harshitagarwal5849]

Super Informative..🤗

[@zeehansheikh3022]

First video and I'm on a binging spree . Well done

[@RisingmOOnStudio]

Very well explained Bro. Hats off🙌❤

[@bensaxon3829]

I love the content , love the intensity. Keep it up!

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@kishorekumar8216]

Simply Marvellous 👏

[@vigneshyesvy8874]

Very informative, thank you so much

[@MuratUsubaliev]

Very informative! Thx

[@adityabhardwaj7022]

highly useful

[@PriyaSingh-zz8zj]

very well explained!

[@marwotobersahaja1721]

This is what i'm searching for.. oh thanks man, very helpful!

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@hareeshkaladharan467]

awsome!

[@SanjeevKumar-mk1yv]

Awesome video, thanks brother

[@mufeezrollwala8254]

It helps a lot brother.

[@marzia16]

Thanks a lot

[@bkivvratnagar829]

going to go make my first soft! My first soft!! Here I go! Wish luck.

[@MustafaDemirEng]

I'm a developer who needs some design skills for side projects. Your channel and content is just awesome!

[@JamesNithasWorld]

Cool. Great Video.

[@zeindeedesigns6364]

thank you! so useful!!

[@DesignPilot]

😇

[@waqariqbal19]

Intro is just amazing

[@yt.oladimeji]

Thank you for this. You explained very well.

[@DesignPilot]

👍

[@sukanyakumari5718]

You are amazing

[@arpitpatel5814]

Excellent👏🏻👏🏻👏🏻👏🏻👏🏻

[@deckelm]

Best movie I’ve seen about the subject. You are awesome!

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@sadisticwinter8354]

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)

[@hasnainkha9738]

Man you are doing such a great job keep it up and keep Creating amazing content.
Thanks Love from Pakistan

[@rezafahlevy385]

Thanks for sharing

[@hasnainkha9738]

Awesome Man!

[@DesignPilot]

Thanks so much

[@krishmasethi2843]

great video

[@riansetiawan648]

Really helpful for a growing designer like me, many thanks!

[@DesignPilot]

Glad to hear that

[@pratishthajoshi3153]

Such a detailed and quality content 🥺🥺🙌🙌tysm

[@DesignPilot]

🤩🤩🤩

[@akhwan5297]

this is very useful tutorial ever! thanks

[@DesignPilot]

Thank you

[@aktarali01]

Thankkkk youuu soooooooo muchhh for this practical and amazing information🥰🥰

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@evanmanni2723]

Goldmine bro. Much respect

[@DesignPilot]

Thank you

[@amreshR]

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?

[@DesignPilot]

Visit my website 😝

[@AhmedAli-ek9gx]

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

[@DesignPilot]

Yay!!! Awesome

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@utkarshagarwal2484]

Awesome

[@NanchoArt]

pretty detailed. great stuff man :)

[@DesignPilot]

Thanks

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@npc73x]

Such a amazing content, keep doing your awesome work

[@DesignPilot]

Thanks mate

[@vaibhav5038]

love the content, Chetan sir you the best ❤️️

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@darmayuda9236]

Thanks a lot bro its very helpful

[@DesignPilot]

🙏

[@hertzdesigns9166]

Thank you man

[@DesignPilot]

No problem

[@lakshayk97]

Amazing man! Really explained well.

[@DesignPilot]

🔥

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@MassuNoEgao]

Very very informative! Thank you!

[@DesignPilot]

✌️

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@ibukunadegola8415]

Amazingly helpful !! (from a UI Designer)

[@DesignPilot]

Thanks so much man 🙏

[@rohanbhattacharya]

Hi, I am pretty new to UI Design. And thank you for sharing this great video. I had one query about the content I have for the smallest device. What if it's limited and I need to scale for say, Samsung Note 10+ and I don't have anything in the scroll. Could you guide me with how to set up the constraints during that time?

[@ben6]

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).

[@aaaasifgk5186]

Hello sir thanks 😁👍👍👍

[@santoshjbansode]

Truly Genius!

[@DesignPilot]

🙏

[@itzmehrshad3433]

nice content

[@krishnaar8922]

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.

[@DesignPilot]

Glad to hear that

[@krishnaar8922]

@@DesignPilot do u have a plan for making video for tablet and desktop design with similar guidelines And techniques ?

[@DesignPilot]

The guidelines are pretty much the same. Nothing different. Just keep not of the screen size. That’s it

[@AndroidCreators]

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

[@selifsa]

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?

[@DesignPilot]

You can use the ones provided in Materiap Design and Human Interface Guidelines

[@mohsenalizad1958]

ty for saving me :D

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@harshdhanuka04]

You Rockkkk!!! 💙

[@DesignPilot]

Thanks Bro ❤️

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@omgupta7150]

It was WOW!!✌m talking about background music you put in starting of video

[@DesignPilot]

😂😂😂 Thanks

[@shivammagarde]

czcams.com/video/WrkbTigh6UU/video.html
Please look at this if you like it.

[@mrajax_0101]

i hope we'll get updated video 😎

[@rue23ko]

Hello! Excuse me, if I made digital illustrations for a mobile app (but not made with vectors… but you know… painted with digital brushes in a software) should I do what you said? Send the image in 4 different sizes to the programmer? Or how should I process? Thank you!