Screen Essentials for UI Design
The smartphone market is growing rapidly and new phones with varying screen sizes are released yearly. How do you design interfaces for multiple mobile screen sizes? This post briefly shares some essential screen concepts to keep in mind.
Definitions
- Pixels — The dots that make up an image.
- Screen size — The diagonal length of a screen measured in inches.
- Screen resolution — Number of pixels along a screen’s width x height, e.g. an iPhone 14 is 2532 × 1170 pixels.
- Screen density — Number of pixels packed in one inch of a screen. It is measured in ppi (pixel per inch). e.g. an iPhone 14 has 460ppi.
Designing for multiple screen sizes
- Start your mobile UI design with the smallest base screen resolution available. For iOS, use a Figma artboard of 375 x 667 pixels and for Android, use 360 x 640 pixels.
2. Smartphone operating systems will use your design at base resolution as a template and automatically scale everything (buttons, text, shapes etc.) by 1x, 2x, 3x, or more to fit any screen size. Constraint rules set by developers will account for any extra vertical size space and move elements accordingly.
3. Vectors stay sharp when scaled, but photos get blurry, so to ensure crisp images at higher screen resolutions, manually export them for each multiplier level (1x, 2x, 3x, etc.) you want to cover.
N/B: Everything discussed here applies to building a real-world app in collaboration with a developer. When working on your personal design project, feel free to use the artboard size of the physical device you have with you to preview your prototype.
If you found this article helpful, I invite you to follow me for more content like this. On this page, I will synthesize my learning on all things design into brief articles. Thank you for reading, & I look forward to connecting with you! 👋🏻
