13 Feb 2020

Dark UI – Why, When and Where?

After defining the product structure, it's time to start working on the look and feel. At this point, the designer should think, amongst other things, about the appropriate colour scheme to target the product's audience.

Most of the time, the safest decision is to opt for a white theme. In most cases, a white background is easier to work with for 1 simple reason: black text on a white background means better contrast, scanning perception and readability.

A few months ago, I was assigned to a sports-related project. So, it seemed like the perfect situation to put my skills to the test and cross over to the 'Dark Side'.

Unsurprisingly, I started facing usability issues the moment I began 'colouring' the wireframes. Great UX starts with excellent readability and high contrast between text and background. So, in other words, black text on a white background means optimised legibility.

But try white text on a dark background, and the story becomes slightly different.

To guarantee readability and positively influence a product's performance, be prepared to go through a meticulous font selection process.

But let's take a few steps back. If Dark UI has all these problems, why did I opt for it?

Its purpose. The project is sports-related and black is often associated with power, elegancy and prestige.
It’s not text-centred. Unlike a blog which contains big blocks of text, it’s not information heavy.
To reduce eye strain. As we expect users to stay for long periods of time, a darker scheme can reduce eye strain.

So when does it work well?

Products such as movie streaming services and gaming consoles usually opt for a dark-themed UI to match the low-light environment of your living room when you're watching TV.

As it blends with the environment, it helps the content to stand out as you sit far away from the TV.

Dark-themed UIs can also help improve the experience when users stay for long periods.

Developers work many hours daily in front of a computer, using their code-editing software. The dark UI not only helps with eye strain but also creates enough contrast on different code tags, making it easier to rapidly scan the code.

Less contrast means better contrast.

Even though it's true in a traditional sense, white elements on a dark backgrounded interface are not the ideal way to highlight content. That much contrast increases eye strain and is unnecessary for elements to stand out. But be aware of older screen contrasts.

Lots of text? Stay in the light!

As mentioned before, if the website's content is text-heavy, using a white background is ideal to ensure readability. This doesn't necessarily mean the entire website has to be white – a single section can be enough to host the text-based content.

Lighter fonts for a bolder look.

Due to our eyes’ perception of light and dark, white text on a darker background will always look bolder than its counterpart. This means that sometimes you must have background-specific font weights in your design.

Too much space is never enough.

Make sure to be generous when spacing design elements on a dark background. And when you're done, add a bit more space. This will help balance the contents and increase readability and perceptibility.