Dark UI — Why, When & Where?

filipe
filipe
Jun 26, 2018 · 4 min read

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, on the appropriate color scheme to target the product’s audience.

The safest decision — most of the time— 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 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’.

Property of @ Lucas Films

It was no surprise I started facing usability issues the moment I began ‘colouring’ the wireframes. Great UX starts with great readability and high contrast between text and background. So in other words, black text on white background means optimised legibility.

But try white text on a dark background and the story changes a little bit.

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

But lets take a few steps back. If Dark UI has all these problems, why did I opt for it to begin with?

  1. Its purpose. The project is sports related and black is often associated with power, elegancy and prestige.
  2. It’s not text centered. Unlike a blog which contains big blocks of text, it’s not information heavy.
  3. 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?

To match the low-light environment of your living room when you’re watching TV, products such as movie streaming services and gaming consoles normally opt for a dark-themed UI.

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

Netflix app — iOS
Football manager 2018

Dark-themed UIs can also help on improving the experience when users stay for long periods of time.

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

Sublime text 3

Considerations:

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 of highlighting content. That much contrast increases eye strain and is not necessary 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, the use of 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.

Rocket.Chat Blog Article

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 with the spacing of your design elements on a dark background. Then when you’re done, add a little more space. This is will help balance the contents and increase readability and perceptibility.


Final Thoughts

A light UI is always the safe bet, but in some cases, a dark UI can be a winner. So choose wisely.

Check out the designs by Significa on Dribbble and Behance

Significa Blog

Significa is a design-led agency focused on product development: we take on products from inception to launch, from business model to people’s pocket, from wireframe to continuous deployment.

filipe

Written by

filipe

Lead designer @ Significa · Young jury @ Awwwards

Significa Blog

Significa is a design-led agency focused on product development: we take on products from inception to launch, from business model to people’s pocket, from wireframe to continuous deployment.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade