Screens and pixel density. Basics of UI design

The world is your canvas, but it has certain limitations.

Welcome to Part 4 of UI Design Basics. This time, we ll take a look at the screens you are likely to design for. It is also part of the free chapters from the Designing User Interfaces book.

99% of the interface = screen pixels *

• 1% is for voice interfaces and possibly neural connections in the near future.

Interface design comes down to displays. Since the user interface is everything we see, it is important to understand for what we are looking.

In the early days of the Internet, things were pretty simple – you were designing somewhere between 640 x 480 and 800 x 600 pixels. We can, of course, go back even further – to the first Macintosh or the very first desktop interface of Xerox, but let s take the old color CRT monitors as a basis. That s when I started designing for the Internet (1998).

But that was in the late 90s, and after that things started to change rapidly. Most displays from that era had the same resolution ranges, were very heavy, and couldn t display too many colors. They also had a low refresh rate, which resulted in poor quality page scrolling. Displays from that era often limited the visual experience of websites.

Since we now live in a world of technology with millions of pixels and millions of colors, we need to understand what screens we are designing for. Since the early days of the Internet, technology has leaped forward. Now the phone you are holding in your hand has a permission that simply did not exist twenty years ago.

PPI or pixels per inch

At some point, 72 pixels per inch became the standard for these CRT monitors, and it has been like this for a long, long time. Both our laptops and mobile devices now have much higher resolution and pixel densities.

DPI and PPI Designer Guide

But what s the difference?

Resolution is the number of individual pixels in a display. For example, the first iPhone had a baseline resolution of 320 x 480. Apple decided that this resolution should be sufficient for a user-friendly interface, so it set a baseline density of 1x for the platform.

That all changed with the arrival of the iPhone 4 with Retina display. The gist of the new display was that the pixels were so dense that individual pixels were no longer visible. The base (or 1x) resolution was the same as the previous iPhone, but the pixel density was a multiplier of that resolution, resulting in sharper text and images. iPhone 4 doubled the pixel count to 640 x 960, but the actual design of the elements was kept at 320 x 480 and enlarged on the device.

Okay, but why did the design still behave like 320 x 480? Why not just use 640 x 960 as your “visible resolution”?

After doubling the pixel count in the iPhone 4, we saw 3x, 4x, and higher pixel densities on both phones and tablets and laptops.

For example, the modern iPhone X uses a base resolution of 375 by 812 pixels, but the actual number of pixels is three times (3x) at 1125 by 2436 pixels.

For example, if you are designing a button, you need to make it at least 44 points high. This means that when designing at 1x it will be 44 pixels (at 1x it is the same as a point), and at 2x it will be 88 pixels, but in your design you will still have the same 44 points.

Since all the interfaces we design are inside vector tools, we no longer need to worry about real resolutions. A base resolution of 1x serves as a template that works on low density screens and will be sharper and more accurate on high density screens.

But you don t need to remember this

Most design tools provide you with a 1x template for all popular screen sizes. You just design for 1x and the encoded interface scales automatically. What a relief! ?

But be aware that there is fragmentation.

What is fragmentation?

Unfortunately, the growing number of screen resolutions results in a very fragmented screen landscape. We design for TVs, laptops, tablets, phones, smartwatches and IoT devices, which requires careful planning and design changes for a specific device.

The first questions to ask when creating a design are what screen it will run on and what is the typical viewing distance.

A TV app needs to have higher contrast and more prominent interface elements than a mobile app, largely because the TV is often at the other end of the room and the phone app is just inches from the face.

But fragmentation within one device category suffers most. The most common example – a mobile phone – has so many possible resolutions and aspect ratios that it is impossible to make one design suitable for all. There are dozens of screen resolutions for Android mobile devices on the Google Play store. Apple used a more consistent set of settings a few years ago, but has since abandoned this path and moved to individual permissions for almost all devices.

How to deal with fragmentation?

The only way to combat this trend (and defeat it) is to design with the lowest possible resolution, at least until it becomes legally obsolete. Then switch to the next smallest possible resolution.

Simply put: Don t design specifically for the iPhone Pro Max. Design for iPhone Pro.

Thumb accessibility

In mobile devices, it is also important to consider the accessibility of interface elements when using the phone with one hand. A randomly composed interface can be difficult to use with one hand and frustrate the user.

We assume that the typical use of the phone is when the user holds the phone with one hand and the thumb of that hand performs most of the actions on the screen.

The access zone can also help determine how easy it will be to navigate the product. The popular hamburger menu design pattern is in the least favorable place for right-handers.

Bottom-aligned tabs are in most cases the easiest way to create menus and should be considered the primary option for almost any product.

Main conclusions

Here s everything you need to keep in mind when designing for any type of screen:

1. Always consider 1x pixel density.
2. All design tools have built-in screen sizes (no need to memorize them).
3. Make basic navigation available on mobile devices.

In the next article in this series, we ll take a look at artboards and frames – the space in which you ll create designs.

Articles from the series:

Part 1: Fills and Borders. Basics of UI design

Part 2: Everything you need to know about shapes and objects. Basics of UI design

Part 3: Shadows and Blurs. Basics of UI design

Part 4: Screens and Pixel Density. Basics of UI design

Part 5: How to start designing a mobile application. Basics of UI design

Part 6: 5 Tips to Improve Button Design Basics of UI design