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

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

Design Pilot 116K subscribers
189.4K views · 2019-11-10 UI Design
🚀 Book 1:1 Tutoring Sessions with me and take your Product Design journey to the next level: https://www.learnproduct.design/sessions

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:
https://material.io/resources/devices/

iPhone Device Metrics:
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Figma File:
https://gum.co/suzS

🔗 - https://www.youtube.com/watch?v=_2wqNI_Ch6g
🔗 - https://www.youtube.com/watch?v=dhUrLmr6GnM

🚀 Get 2 free months of Skillshare Premium & watch my Course for free:
https://skl.sh/2TVhf8z

🚀 Create an account on Mobbin for free:
https://mobbin.com/?referrer_workspace_id=84595d96-a462-44f4-a3d2-c34148889947
---------------------------------------­----
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi

Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1

After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk

UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW

Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9

Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv

eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Twitter : https://twitter.com/kvschethan
Facebook : https://facebook.com/designpilot
Mail : designpilot21@gmail.com
Portfolio : https://behance.net/chethankvs
Instagram : https://instagram.com/design_pilot
Discord: https://discord.gg/GtjBpjD
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#uidesign #uxdesign #apps