Dark UI — Why, When & Where?

Property of @ Lucas Films
  1. It’s not text centered. Unlike a blog which contains big blocks of text, it’s not information heavy.
  2. 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.

Netflix app — iOS
Football manager 2018
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.

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 almeida

Written by

lead designer @ significa

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.