The Power of the Dark Side: Dark User Interfaces

The Power of the Dark Side: Dark User Interfaces

When you start designing a new product, one of the first considerations you make is choosing a color scheme for the user interface. This is a very important moment, because the color scheme you choose will have a long-lasting impact on the overall user experience of your product. But even before you start to select primary and secondary colors, you need to choose a background on which all design elements will be placed. Designers choose between two options: light or dark.

While in most cases designers select a white background, there are cases when using a dark background can be beneficial for the product. In this article, I’ll describe which elements you should take into account when choosing a background, as well as how to improve a dark UI.

You might also like: 10 Web Design Tools to Discover Beautiful Fonts for Your Next Project.

Things to consider when choosing a background

Quite often the decision to go for a dark UI is based on personal preferences, rather than a solid understanding of what’s right for the product. But the decision to go with a dark UI should be a well thought-out. Instead of assuming what might be good for your product, it’s much better to answer the following essential questions:

What is the nature of your content? Do you have more textual or visual content?

The background you choose for your layouts will influence the level of readability of your product—how easy for users to read a written text. Readability should be considered before all else, especially if a major part of the content on the website or app is text. Poor readability is one the main reasons for bad usability.

"Readability should be considered before all else, especially if a major part of the content on the website or app is text. Poor readability is one the main reasons for bad usability."

Unfortunately, dark backgrounds and light text lower readability. In the 1980 study by Bauer and Cavonius, visual fatigue was significantly greater when people read bright characters on a dark background vs dark characters on a light background. You can see an example of this below.

dark ui: background
With a dark design comes less readability. Viewing light text against a dark background strains users’ eyes and makes reading a less enjoyable experience.

The amount of text on the website or app is also a critical factor for background selection.

A light background is preferable for large bodies of text that users are likely to be reading for long periods of time. That’s why text-heavy news websites and blogs usually use a white background.
    dark ui: light background
    Dark text on a light background makes it easier for users to read. CNN uses a white background for articles.
    Dark UI can be a good option for highly visual projects that don’t require a lot of reading. It’s preferable because such UI brings the focus to the visuals (people focus on brighter areas). For cases when you want your users to focus on a particular item (say on a watch, such as in the example below) and admire its design, a dark background will allow you to create a distraction-free layout and keep user attention on the item.
      dark ui: rolex
      Images and other purely visual elements might look great against dark backgrounds. That’s why black is so often used in advertising. Rolex uses this to make a watch the focal point of the page.

      Does your product have a complex interface? Would you like to reduce visual distractions in the UI?

      Programmers and designers can benefit from using software with a dark UI because it allows the interface to fade into the background and the content come to the forefront. As a result, core elements of the page can stand out and gain prominence.

      This works whether a programming code in IDE:

      dark ui: coding
      Dark UI is a popular choice among many developers. It allows developers to focus on programming code independently of an interface.

      Or using a graphical editor:

      dark ui: graphical editor
      The dark UI of Adobe Photoshop brings the main content to the forefront and lets users immerse themselves in the graphics editing activity.

      A dark UI can be preferable for interfaces that require fast scanning. The natural property of dark backgrounds to absorb some of the light from the other elements reinforces the ability to comprehend information in a glance. That’s why such interfaces are popular among analytical tools, where users need to quickly understand the situation.

      dark ui: bloomberg
      A dark UI makes color coding easier to read. Image: Bloomberg Professional.

      What emotional perception would you like to create?

      Color psychology is another thing to consider when choosing a background. In the article A Practical Guide For Creating the Best Website Color Schemes, I’ve mentioned that color directly impacts the user’s emotions. Dark designs can elicit more emotional responses than light designs.

      Shades of black are often associated with elegance, formality, prestige, and power. This property makes it ideal for the following.

      Promotional websites

      dark ui: apple
      Apple uses a dark UI to create a feeling of elegance, power, and prestige.
      dark ui: tom ford
      The dark background on the Tom Ford website is used to create a feeling of luxury.

      Creative projects

      dark ui: minimalist
      A dark UI is a good choice for minimalist interfaces. Image: ruya.digital.

      Websites with very little content (such as creative portfolios)

      dark ui: aesthetic
      A dark background is used for used for purely aesthetic purposes. Image: alexandergadjiev.
      dark ui: luxury
      This portfolio site creates a sense of luxury. Image: Femme Fatale Paris.

      In what environment will people use the product?

      Consider the environment that the interface is likely to be used in, as well as the time of day when the majority of users will interact with your product. Ideally, the selected background should match the user’s environment—use light interfaces for products that will be used in the daytime, and dark interfaces for products that are used in a darker environment or during the night. This allows a low contrast between the screen and a user’s environment and reduces the amount of undesired screen glare.

      The majority of entertainment-related products tend to have dark-themed UI designs. This is because entertainment-related activities usually occur in the evening.

      dark ui: netflix
      Since movies are often watched in rooms with the lights dim, Netflix utilizes a dark UI. A dark UI also mimics a real movie theatre experience at home.

      Who’s your target audience? What style preferences do they have?

      Knowing your potential user and their preferences is the first step in designing UI for your product. Different user groups have different tastes and different expectations.

      It’s essential to start with competition research. Research of close competitors will give you an understanding of which design solutions have already been applied by other players on the market, as well as the factor influencing design solutions.

      Do the product’s brand colors work well with a dark UI?

      Not all brand color schemes work with a dark background. It’s better to avoid using a dark background if your design calls for a wide range of colors.

      You might also like: The User Experience Delusion.

      How to improve a dark UI

      Once you’ve decided to use a dark UI for your product, there are a few things that should be taken into account.

      Use enough whitespace

      While effective use of whitespace is important for any type of user interface, it even more important for products with dark backgrounds. Because of the natural property of a dark background to absorb part of the light from other elements in the design, designers should add more whitespace to prevent the interface from feeling too heavy.

      dark ui: spotify
      Designers use whitespace to frame essential UI elements. Image: Spotify.

      Because readability is the number one concern when using dark backgrounds, designers must pay extra attention to the text sections. It’s possible to improve readability on dark layouts by using more whitespace between lines of text. The example below shows that by increasing line spacing, it’s possible to make the text more readable.

      dark ui: spacing
      Left: Small line spacing makes it hard to read the text. Right: By increasing line spacing you make the words and letters easier to read.

      Another way to improve readability for text on a dark UI is to increase the font size. More whitespace within each letter will make the text easier to read.

      Avoid using pure black backgrounds

      A dark background doesn’t necessarily mean a black background. In fact, the best results usually come from background that isn’t pure black. When we see dark things in real life, we often assume they are black things. In reality, pure black almost never exists. All of the ‘black’ objects around us have some amount of light bouncing off of them, which means they aren’t truly black—they’re actually dark grey.

      When you place pure black next to a set of colors, the black overpowers everything else. It stands out because it’s not natural. Lots of the apps we use and sites we visit on a daily basis have blacks that aren’t real blacks, but dark grays instead. For example, the darkest color on Apple’s top bar isn’t #000000; it’s #333333. So remember to always add a bit of saturation to your color.

      dark ui: ipad
      Apple uses a color close to black for its top bar—it’s slightly muted, so it doesn’t overpower the rest of the elements on the page.

      To find a perfect dark background, take some time testing different sorts of backgrounds and colors to present the content.

      Ensure you don’t have over-bright lettering

      Light versus dark color schemes are all about one key design component: contrast. When it comes to contrast, both too much or too little can cause problems. Finding the perfect contrast means balancing the darkness of the background with the lightness of the text.

      Avoid using pure white lettering on a dark background; instead, tone it down to a pale gray. As a rule of thumb, it’s recommended to use 5 percent gray to cut the glare of bright white. Such text will be perceived as white for users but won’t put as much stress on the user’s eyes.

      Use sans-serif fonts

      Fonts play a significant role in the design and should be taken into thoughtful consideration with dark layouts. In general, it’s better to avoid serif typefaces for body text. The image below shows the same text section in serif and sans-serif fonts. The second version (with sans-serif font) is more legible for a dark background.

      dark ui: sans serif
      Serif vs. sans-serif fonts on dark background.

      But there’s an important reason why so many designers prefer to use serif fonts—they make the text look more elegant. It’s possible to balance the need for elegance with the requirement for good readability by using serif fonts for headlines and clean sans-serif fonts for body text.

      Limit color palette

      Since dark layouts already have depth, you need to use color with caution. To give their dark designs a clean look, designers should always opt for minimal color schemes. It’s recommended to stick to color palettes with a minimum number of colors (two or three). More colors will make a dark layout look too busy.

      dark ui: ramotion
      All colors in this example are used for a purpose. They act as visual signifiers and reinforce the information users see. This allows faster scanning. Image: Ramotion.

      Maintain sufficient contrast for good readability

      As was mentioned a couple of times before, readability is number one characteristic of good design. It is t directly connected to the usability and overall user experience of product. So, even if your UI doesn’t focus on reading text, it’s essential to achieve a proper contrast between the background and text. Make sure the contrast complies with W3C’s standards.

      dark ui: contrast
      There is insufficient contrast on some parts of the UI in this example, and this affects the usability of the interface. Image: Samuel Scalzo.

      Offer a style switcher

      A darker UI might be preferable for nighttime. But what to do when your app can be used at any time of the day? One solution for this might be to provide a style switcher. Style switching allows users to select whether they want to have light or dark scheme. Some apps available on the market do it automatically based on daytime. For example, Google Maps switches to the dark theme during the night.

      dark ui: google maps
      Google Maps has different themes depending on the time of day.

      Test rigorously

      Dark backgrounds should be rigorously tested on different types of screens and in diverse resolutions. What looks good in a studio on designer’s high-resolution monitor might not look as good on user’s mobile screen.

      "What looks good in a studio on designer’s high-resolution monitor might not look as good on user’s mobile screen."

      You might also like: UI of the Future: Conversational Interfaces.

      Tread carefully

      A decision to move to the "dark side" should be approached with care. Designers should clearly understand not only benefits and downsides of a dark layout but also whether or not it suits the content they want to deliver. Even when dark layout can be beneficial for the product, designers need to avoid common pitfalls (such as bad readability) to create a powerful and appealing solution.

      Have you worked with dark UI? Share your experience in the comments below!

      About the Author

      Nick Babich is a developer, tech enthusiast, and UX lover. He's spent the last 10 years working in the software industry, with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

      Grow your business with the Shopify Partner Program

      Learn more