> [!info] Design Takeaways > * Don't worry too much about pixel density. Design in 1x. > * Prefer designing in vector, but if I must provide raster images / bitmaps, make sure the developers know how to get them in the various scales they'll need. * Pixel * Screen density * pixels per inch (ppi) * dots per inch (dpi) * density-independent pixels (dp) * scalable pixels (sp) - same behavior as dp, but especially useful for sp * screen size or dimensions (in inches) * screen diagonal (5.7") * aspect ratio * screen pixel resolutions * screen dp resolution * retina * points * scale factor (1x, 2x, 3x)] * density bucket / density qualifier (ldpi/mdpi/hdpi/etc) * bitmaps * other measurement types (%, rem/em, etc) ### Pixel Density ![[PixelDensity_AndroidDevVideo_01.png]] Android has created "logical pixel density. 160 DPI is the "baseline" DPI on Android, that everything else is based on. ![[PixelDensity_AndroidDevVideo_02.png]] Density-independent pixels (`dp` or `dip`) ![[PixelDensity_AndroidDevVideo_03.png]] ![[PixelDensity_AndroidDevVideo_04.png]] ![[PixelDensity_AndroidDevVideo_05.png]] * On a Nexus device, 200dp becomes 400px on an XHDPI screen. Meaning, they ![[PixelDensity_AndroidDevVideo_06.png]] [[Gisela]] ## Flashcards ## Reference [ScreenSiz.es.](https://screensiz.es/phone) —[iOS Resolution.](https://www.ios-resolution.com/) Really great breakdown of iOS resolution. [Material Design Team. "Material 3 > Layout basics > Pixel density" (May 2021, Material 3 Documentation).](https://m3.material.io/foundations/layout/understanding-layout/spacing#28f7a086-b6f7-4120-b18f-02a5fa5adbb5) See also [Material 2's documentation on pixel density](https://m2.material.io/design/layout/pixel-density.html#pixel-density). [Android Developer Guide. "Support different pixel densities" (Last updated Jan 2024, Android Developer Guide).](Support different pixel densities) See especially the DesignBytes video, which provides a terrific example of how pixel density works. [Reyes, Laura. "Pixels and screen densities: Android and iOS" (Jan 2024, Medium).](https://bootcamp.uxdesign.cc/pixels-and-screen-densities-android-and-ios-1fd0efcfc6d4) > ![[SHIHIR_PixelDensityiOSAndroidTranslation.png]] [Tutorial Tim. "Let's Build a Design System: Pixel Density" (???, YouTube).](https://www.youtube.com/watch?v=zGiB_Bd0Ip8) >  [Yadav, Akash. "Basic concepts of screen resolution, screen density" (???, YouTube).](https://www.youtube.com/watch?v=o0995NBtCm0) >  [Chiemsombat, Gavin. "Resolution scaling for Figma designers" (December 2020, Oozou blog).](https://oozou.com/blog/resolution-scaling-for-figma-designers-142) [Spradlin, Liam. "How to Find Device Metrics for Any Screen" (May 2020, Material Design Blog).](https://material.io/blog/device-metrics) [SHISHIR. "Best practices for supporting Android Application in multiple screen" (July 2018, Medium).](https://medium.com/programming-lite/best-practices-for-supporting-android-application-in-multiple-screen-a685afa83493) [Kearney, Dave. "Mobile design 101: pixels, points, and resolutions" (September 2015, Fluid Blog).](https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/) Has a good summary of "the 6 numbers you need to understand when talking about screen sizes and images" (pixels, screen sizes, resolutions, DPI, points, density independent pixels).