How Screen Sizes, Screen Resolutions & Screen densities play an essential role while designing.
When I started my career in UX design, the one thing that always stuck in my head while designing was: How do I determine which screen size is ideal for drafting? What are screen resolutions and screen densities? What role does it play, and how does it matter?
Let’s understand them in a better and easier way.
Screen size
A screen size, display size, and viewable image size (VIS) are the physical sizes of the area of the device, typically measured diagonally from one corner to the opposite corner. For devices like smartphones, tablets, laptops, and displays, it is measured in inches. For instance, a smartphone with a 6-inch screen has a 6-inch diagonal.
Understanding screen sizes is crucial for UX (User Experience) designers to create adaptable and user-friendly designs that enable an array of devices such as responsiveness, touch targets, interactions navigation, layout, and content optimization.
Although the most common questions asked by a new designer are that-
What is the best screen size to design for?
There is no one ideal screen size to design for. A designer should be able to design with (device-agnostic) responsiveness in mind, indicating that websites should be able to transform responsively from one format to another with all screen resolutions & should be accessible to all platforms ( devices).
Screen Resolutions
Screen resolutions or display resolutions are a measurement of how many pixels are arranged horizontally & vertically on the screen. The standard way of writing is:
*Pixels (abb as px) are tiny dots of color that make up images on a screen. Each pixel represents a single point of color and contributes to the overall clarity and detail of the display. Imagine a picture as a grid, where each small square (pixel) is a different color.
The higher the number of pixels on a screen, the clearer & sharper & more detailed image quality.
Below are some of the screen resolutions to consider according to different devices:
- Desktop- 720x1280 to 1920x1080.
- Mobile- 360x640 to 414x896.
- Tablet -601x962 to 1280x800.
Can different screen sizes have the same screen resolutions and same image quality?
Monitors are available in different screen sizes and resolutions, though the visual quality differs due to their pixel density.
e.g., 15", 24", and 32" screens can have a screen resolution of 1920x1080, but the smaller display image quality will be more visible and sharp because of its higher pixel density.
Pixel densities.
Pixel density is the number of pixels that fit into one inch of screen. It is measured as pixels per inch.
The greater the number of PPI in 1 inch of screen, the clearer and sharper the image quality and the smaller the pixel size. Designers must consider pixel density to create touch-friendly interfaces and provide a better user experience.
Why do the screens designed in the design tool differ from the actual screens?
The difference between the design tool screens and the actual screen is mainly due to its screen size and pixels density:
In a design tool, the designs are created on a specific canvas size, often on a computer screen, which is usually greater than the actual devices and at a fixed pixel resolution, such as 1920x1080 for a Full HD screen. When the same design is displayed on screens of different sizes with different pixel densities (e.g., smartphones, tablets, laptops), the content must be able to adjust and scale to fit the different screen dimensions.
This can lead to variations in the visual presentation.
To account for these differences, UX designers use responsive design techniques. They create multiple layouts for different screen sizes and densities, ensuring the design adapts gracefully to various devices and resolutions. It ensures that users enjoy a consistent and engaging experience, no matter what type of device they use.
