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

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 ม.ค. 2025

ความคิดเห็น • 457

  • @sakheemehta2785
    @sakheemehta2785 5 ปีที่แล้ว +89

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

    • @DesignPilot
      @DesignPilot  5 ปีที่แล้ว

      Thanks Man

    • @ahmedyassin2953
      @ahmedyassin2953 ปีที่แล้ว +1

      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.

  • @deipty222
    @deipty222 3 ปีที่แล้ว +30

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

  • @tonybasa7491
    @tonybasa7491 4 ปีที่แล้ว +5

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

  • @ARTushar1
    @ARTushar1 5 ปีที่แล้ว +18

    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
      @DesignPilot  5 ปีที่แล้ว +1

      You are most welcome

  • @stubmow1567
    @stubmow1567 3 ปีที่แล้ว +4

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

  • @ajaythakur3557
    @ajaythakur3557 4 ปีที่แล้ว +1

    no one make it more simple than this
    thanx man

  • @olytovchenko
    @olytovchenko 2 ปีที่แล้ว +1

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

  • @varshakapil8224
    @varshakapil8224 2 ปีที่แล้ว +2

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

  • @MustafaDemirEng
    @MustafaDemirEng 7 หลายเดือนก่อน +1

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

  • @harshitagarwal5849
    @harshitagarwal5849 2 ปีที่แล้ว +1

    Super Informative..🤗

  • @emilytchuu9876
    @emilytchuu9876 3 ปีที่แล้ว +1

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

  • @jaza7613
    @jaza7613 2 ปีที่แล้ว +1

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

  • @Im-np3fj
    @Im-np3fj 2 ปีที่แล้ว +1

    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

  • @zeehansheikh3022
    @zeehansheikh3022 3 ปีที่แล้ว +1

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

  • @mubarakakikonyogo6319
    @mubarakakikonyogo6319 2 ปีที่แล้ว +2

    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.

  • @blendibr9554
    @blendibr9554 ปีที่แล้ว +1

    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
    @rohitjadhav8744 2 ปีที่แล้ว +1

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

  • @AhmedAli-ek9gx
    @AhmedAli-ek9gx 4 ปีที่แล้ว +1

    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
      @DesignPilot  4 ปีที่แล้ว +1

      Yay!!! Awesome

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @bkivvratnagar829
    @bkivvratnagar829 2 ปีที่แล้ว +1

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

  • @sonumot5768
    @sonumot5768 7 หลายเดือนก่อน +1

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

  • @sachinsharma-kp7rh
    @sachinsharma-kp7rh ปีที่แล้ว +1

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

  • @praveenpsg77
    @praveenpsg77 4 ปีที่แล้ว +1

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

  • @yomioseni
    @yomioseni 2 ปีที่แล้ว +1

    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!

  • @christy22896
    @christy22896 4 ปีที่แล้ว +1

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

  • @amreshR
    @amreshR 4 ปีที่แล้ว +8

    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
      @DesignPilot  4 ปีที่แล้ว

      Visit my website 😝

  • @tiueueh
    @tiueueh 4 หลายเดือนก่อน +1

    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?

    • @DesignPilot
      @DesignPilot  4 หลายเดือนก่อน

      You can watch these 2 videos
      1. Ultimate Guide to Layout Grid Systems for Websites! - Figma Tutorial
      th-cam.com/video/Fq2jbai4jqI/w-d-xo.html
      2. Designing Grid Layouts for Dashboards and SaaS Products: The Ultimate Guide!
      th-cam.com/video/dhUrLmr6GnM/w-d-xo.html

  • @ben6
    @ben6 3 ปีที่แล้ว +10

    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
      @aaaasifgk5186 2 ปีที่แล้ว +1

      Hello sir thanks 😁👍👍👍

  • @tanhoang763
    @tanhoang763 2 ปีที่แล้ว +1

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

  • @melomancheto2761
    @melomancheto2761 2 ปีที่แล้ว +1

    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

  • @kishorekumarseenivasan
    @kishorekumarseenivasan ปีที่แล้ว +1

    Simply Marvellous 👏

  • @alvarodemoraesduarte5587
    @alvarodemoraesduarte5587 4 ปีที่แล้ว +1

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

  • @den_vortexx
    @den_vortexx 2 ปีที่แล้ว +1

    Thank you for the video. Perfectly explained!

  • @vivekjpcsinha4226
    @vivekjpcsinha4226 5 ปีที่แล้ว +1

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

    • @DesignPilot
      @DesignPilot  5 ปีที่แล้ว

      Thanks so much Vivek 🤘

  • @siddhibhatia5714
    @siddhibhatia5714 2 ปีที่แล้ว +1

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

  • @rahilkarimlou5010
    @rahilkarimlou5010 3 ปีที่แล้ว +1

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

  • @dpkd3198
    @dpkd3198 ปีที่แล้ว +1

    Wow I've found a gem mine of contents 🤩

  • @bensaxon3829
    @bensaxon3829 4 ปีที่แล้ว +2

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

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @manaaanouar6071
    @manaaanouar6071 9 หลายเดือนก่อน +1

    Brother you are a hero

  • @deckelm
    @deckelm 4 ปีที่แล้ว +2

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

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว +1

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @iansong1676
    @iansong1676 4 ปีที่แล้ว +17

    0:01 I thought my video speed settings were on 2x speed...

  • @yobillionaire
    @yobillionaire 3 ปีที่แล้ว +1

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

  • @waqariqbal19
    @waqariqbal19 3 ปีที่แล้ว +1

    Intro is just amazing

  • @bhumitribe
    @bhumitribe 2 ปีที่แล้ว +1

    Explained well...thank you so much

  • @nikhil4yourhelp670
    @nikhil4yourhelp670 ปีที่แล้ว +2

    great content thank you for this knowledge

  • @marwotobersahaja1721
    @marwotobersahaja1721 4 ปีที่แล้ว +1

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

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @haneefahmed9748
    @haneefahmed9748 3 ปีที่แล้ว +1

    Too good, Keep it up!

  • @krishnaar21
    @krishnaar21 4 ปีที่แล้ว +1

    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
      @DesignPilot  4 ปีที่แล้ว

      Glad to hear that

    • @krishnaar21
      @krishnaar21 4 ปีที่แล้ว +1

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

    • @DesignPilot
      @DesignPilot  4 ปีที่แล้ว +1

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

  • @AndroidCreators
    @AndroidCreators 2 ปีที่แล้ว +1

    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

  • @pratishthajoshi3153
    @pratishthajoshi3153 3 ปีที่แล้ว +1

    Such a detailed and quality content 🥺🥺🙌🙌tysm

  • @npc73x
    @npc73x 3 ปีที่แล้ว +1

    Such a amazing content, keep doing your awesome work

  • @sadisticwinter8354
    @sadisticwinter8354 4 ปีที่แล้ว +5

    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)

  • @amitsai
    @amitsai 4 ปีที่แล้ว +1

    Totally superb, great work

  • @PriyaSingh-zz8zj
    @PriyaSingh-zz8zj 3 ปีที่แล้ว +1

    very well explained!

  • @sahilaujla
    @sahilaujla 4 ปีที่แล้ว +2

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

  • @Valentynaua
    @Valentynaua 4 ปีที่แล้ว +1

    The amazing explanation! Many thanks to you.

  • @vigneshyesvy8874
    @vigneshyesvy8874 3 ปีที่แล้ว +1

    Very informative, thank you so much

  • @MuratUsubaliev
    @MuratUsubaliev 3 ปีที่แล้ว +1

    Very informative! Thx

  • @aktarali01
    @aktarali01 4 ปีที่แล้ว +1

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

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @lakshayk97
    @lakshayk97 4 ปีที่แล้ว +1

    Amazing man! Really explained well.

    • @DesignPilot
      @DesignPilot  4 ปีที่แล้ว

      🔥

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @SanjeevKumar-mk1yv
    @SanjeevKumar-mk1yv 4 ปีที่แล้ว +1

    Awesome video, thanks brother

  • @margaret_rejnowska
    @margaret_rejnowska ปีที่แล้ว +1

    8:24 You account for top status bar when align app nav bar. Shouldn't you do the same for bottom bars, meaning shouldn't nav application bar be sitting on the top of device nav bar?

    • @DesignPilot
      @DesignPilot  ปีที่แล้ว

      What’s a device nav bar?

    • @margaret_rejnowska
      @margaret_rejnowska ปีที่แล้ว +1

      @@DesignPilot sorry if I'm not clear, I'm new to UI design. I mean the bottom navigation bar default for all Android with icons triangle, circle and ractangle.

    • @DesignPilot
      @DesignPilot  ปีที่แล้ว +2

      You don’t need to consider that. That usually is not a part of the screen real estate.

    • @margaret_rejnowska
      @margaret_rejnowska ปีที่แล้ว +1

      @@DesignPilot Ah, ok. Thank you!

  • @shreyassrivastava81
    @shreyassrivastava81 5 ปีที่แล้ว +3

    You're simply our Messiah!
    Please make a video on handoffs and exporting for devs.

  • @Robert723
    @Robert723 4 ปีที่แล้ว +1

    Great video! Thank you!

    • @DesignPilot
      @DesignPilot  4 ปีที่แล้ว

      😍

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @evanmanni2723
    @evanmanni2723 4 ปีที่แล้ว +1

    Goldmine bro. Much respect

  • @riansetiawan648
    @riansetiawan648 4 ปีที่แล้ว +1

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

  • @yt.oladimeji
    @yt.oladimeji 4 ปีที่แล้ว +1

    Thank you for this. You explained very well.

  • @saiswarupmohanty9428
    @saiswarupmohanty9428 3 ปีที่แล้ว +1

    this is just amazing!

  • @thesushantmohta
    @thesushantmohta 7 หลายเดือนก่อน +1

    Do you have a video where you explain constraints in detail?

    • @DesignPilot
      @DesignPilot  7 หลายเดือนก่อน

      Not really. But it’s very simple. I think you can just Google it.

  • @ibukunadegola8415
    @ibukunadegola8415 5 ปีที่แล้ว +1

    Amazingly helpful !! (from a UI Designer)

    • @DesignPilot
      @DesignPilot  5 ปีที่แล้ว

      Thanks so much man 🙏

  • @eumm11
    @eumm11 3 ปีที่แล้ว +1

    extremely helpful, thank you!

  • @salocarrillo4344
    @salocarrillo4344 4 ปีที่แล้ว +1

    Great video! Well explained !

  • @vaibhav5038
    @vaibhav5038 4 ปีที่แล้ว +1

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

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @rayanfernandes2631
    @rayanfernandes2631 4 ปีที่แล้ว +1

    Nicely explained ... Got every bit of figma and i only watched it once.

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @tts7786
    @tts7786 3 ปีที่แล้ว +1

    Wow this video is amazing. Any chance of talking about android tablet resolution? Where should one begin?

    • @DesignPilot
      @DesignPilot  3 ปีที่แล้ว

      1024*768 should be good enough

    • @tts7786
      @tts7786 3 ปีที่แล้ว +1

      @@DesignPilot Thank you. I'm going to give it a go now. THANKS!

  • @MassuNoEgao
    @MassuNoEgao 4 ปีที่แล้ว +1

    Very very informative! Thank you!

    • @DesignPilot
      @DesignPilot  4 ปีที่แล้ว

      ✌️

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @akhwanstudio
    @akhwanstudio 5 ปีที่แล้ว +1

    this is very useful tutorial ever! thanks

  • @vineetkapil1646
    @vineetkapil1646 4 ปีที่แล้ว +1

    This was really helpful!

  • @hasnainkha9738
    @hasnainkha9738 5 ปีที่แล้ว +1

    Awesome Man!

  • @MrMusic-ob2jj
    @MrMusic-ob2jj 2 ปีที่แล้ว +1

    Superior .. thanks 🙏🏼

  • @santoshjbansode
    @santoshjbansode 3 ปีที่แล้ว +1

    Truly Genius!

  • @zeindeedesigns6364
    @zeindeedesigns6364 4 ปีที่แล้ว +1

    thank you! so useful!!

  • @sahilsalekar4455
    @sahilsalekar4455 3 ปีที่แล้ว

    4:30 Sir plz can you explain that y are u bringing it down to only 360X640 ratio.....12:27 how?

  • @NanchoArt
    @NanchoArt 4 ปีที่แล้ว +1

    pretty detailed. great stuff man :)

    • @DesignPilot
      @DesignPilot  4 ปีที่แล้ว

      Thanks

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @billal2731
    @billal2731 3 ปีที่แล้ว +1

    Thanks man :)

  • @darmayuda9236
    @darmayuda9236 4 ปีที่แล้ว +1

    Thanks a lot bro its very helpful

  • @adityabhardwaj7022
    @adityabhardwaj7022 3 ปีที่แล้ว +1

    highly useful

  • @selifsa
    @selifsa 3 ปีที่แล้ว +4

    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
      @DesignPilot  3 ปีที่แล้ว +8

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

  • @mufeezrollwala8254
    @mufeezrollwala8254 4 ปีที่แล้ว +1

    It helps a lot brother.

  • @RisingmOOnStudio
    @RisingmOOnStudio 4 ปีที่แล้ว +1

    Very well explained Bro. Hats off🙌❤

  • @ashishsoni2431
    @ashishsoni2431 5 ปีที่แล้ว +1

    Awesome explanation love it

    • @DesignPilot
      @DesignPilot  5 ปีที่แล้ว

      Thank you man

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @hertzdesigns9166
    @hertzdesigns9166 5 ปีที่แล้ว +2

    Thank you man

  • @JamesNithasWorld
    @JamesNithasWorld 3 ปีที่แล้ว +1

    Cool. Great Video.

  • @hasnainkha9738
    @hasnainkha9738 5 ปีที่แล้ว

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

  • @adhamelkelany
    @adhamelkelany 5 ปีที่แล้ว +2

    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.

    • @DesignPilot
      @DesignPilot  5 ปีที่แล้ว +1

      Yeah man. It's on the way. I have planned it.

    • @adhamelkelany
      @adhamelkelany 5 ปีที่แล้ว

      @@DesignPilot Thank you, I will stay tuned

  • @marzia16
    @marzia16 4 ปีที่แล้ว +1

    Thanks a lot

  • @adrianmoreno2354
    @adrianmoreno2354 4 ปีที่แล้ว +6

    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?

  • @tarnum13
    @tarnum13 4 ปีที่แล้ว +1

    Amazing tutorial 👏👏👏

    • @DesignPilot
      @DesignPilot  4 ปีที่แล้ว +1

      Thanks

    • @shivammagarde
      @shivammagarde 4 ปีที่แล้ว

      th-cam.com/video/WrkbTigh6UU/w-d-xo.html
      Please look at this if you like it.

  • @RodrigoMirra
    @RodrigoMirra 4 ปีที่แล้ว +4

    don't know what kind of drug dude take before tutorials but this was an intensive class of UI. Thank you

  • @sukanyakumari5718
    @sukanyakumari5718 3 ปีที่แล้ว +1

    You are amazing

  • @Saravindkv
    @Saravindkv 4 ปีที่แล้ว +1

    Fantastic 👏👏👏