Experience Dark UI

Dark UI web design is becoming increasingly popular and can have an elegant and creative appeal. They are also ideal for many types of products; however, they are not compatible for all websites and should be used with careful consideration. Despite a striking visual impact that dark UIs possess, many designers are unable to execute them appropriately without making an impact on usability. With a dark color scheme comes lesser readability and less opportunity for conventional design standards. In this blog, we will discuss tips to ensure that your dark website design appeals to a wider audience, while not compromising on creativity and usability. 

Things to consider before choosing dark UI

Usually the decision to choose a dark UI is based on personal preferences, rather than a concrete understanding of what’s best for your product. The decision to create a dark UI should be well thought out and align with your brand. Instead of assuming what might be good for your product, it’s better to consider the following essential questions:

What is the nature of your content?

The background color you choose impacts the level of readability of your product. Readability should be one of the first things you consider, especially if your website or app is text based. Having poor readability is one of the main reasons for bad usability and poor user experience.

Dark UI is best for highly visual projects that don’t require a lot of reading because it encourages users to focus on the visuals. When you want users to focus on a particular item and admire its aesthetics, a dark background allows you to create a distraction free layout and contrast between the background and foreground.

Source: Breitling

Does your product have a complex interface?

Interfaces that require fast scanning is best suited for a dark UI. Dark backgrounds have the property of absorbing light from other elements, thus reinforcing the ability to scan information. That’s many analytical tools where users need to quickly understand a situation usually has a dark background. 

What emotional perception do you want to create?

Color psychology is another factor that should be considered when choosing a background and color has been found to directly impact users’ emotions. Dark designs can elicit more emotional response than lighter designs. Shades of black is associated with refinement, elegance, sophistication and power. As a result, black is often ideal for premium products:

Promotional websites

Apple uses a dark UI to convey a sense of sophistication and power
Source: Apple

Saint Laurent uses a dark background to create a sense of luxury
Source: Saint Laurent

Websites with little content

The objective of the website is to showcase images of this person’s work
Source: Paul Lapkin

The website wants users to focus on the tattoo rather than texts
Source: Tribo

In what environment will people use your product?

You should consider the environment and time of day that the interface is likely to be used in. Ideally, the background should match the usage environment (a light interface for products used during the day and dark interfaces for products used in the dark or at night). This leads to a low contrast between the screen and the environment and reduces unwanted glare. For example, most entertainment products usually have a dark UI because entertainment related activities tend to occur in the evening. 

Since movies are often watched in rooms with dim lights, a dark UI mimics a real movie theatre experience at home.
Source: Netflix

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

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

Who’s your target user? What do they prefer?

Before starting any UI design you should conduct research about your potential users and their preferences. Different users will have different tastes and expectations. In addition to that, competitor research is also essential in understanding which design solutions have been applied by other companies, as well as factors that influenced their design solutions.

Improving your dark UI

If you decided to implement a dark UI for your product, there are few things you should keep in mind. 

Use enough white space

The use of whitespace is essential for any UI, but it is even more important for products with dark backgrounds. Since a dark background can absorb light from other elements, you should add more whitespace to prevent the interface from looking too heavy.

Readability is the biggest concern for dark backgrounds, thus designers must pay extra attention to ensure that there is enough whitespace between lines. 

Avoid using pure black backgrounds

Contrary to popular beliefs, a dark background doesn’t mean black background. In reality, pure black doesn’t exist because all black objects have some light bouncing off them, making them dark grey. When you place pure black next to other colours, the black can overshadow everything else. For example, the darkest colour on Apple’s top bar isn’t #000000, but it’s #333333.

Don’t use overly bright colors

Light vs. dark color schemes are about one crucial design component: contrast. In terms of contrast, having too much or too little can cause problems. The perfect contrast is balancing the darkness of the background with the lightness of texts. Avoid using pure white fonts on a dark background, instead use pale gray to reduce stress on user’s eyes, while still being perceived as white.

Use sans serif font

Fonts have a crucial role in making a UI user friendly and should be taken into consideration, especially with dark backgrounds. Using serif fonts on a dark background decreases readability.

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.

Design a style switcher

A dark UI might be more suitable for nighttime use, but the app should still be as usable daytime. A solution is to provide a style switcher, which allows users to select whether they want a dark or light UI. Google Maps automatically switches between dark and light color schemes depending on the time of day.

Tread carefully with dark UI

The decision to move to a dark UI should be carefully considered. Designers have to not only understand the benefits of drawbacks of a dark UI, but also whether it suits with the brand and content. Despite using a dark UI to enhance the product and user experience, designers need to avoid common pitfalls to create a powerful interface. 

Visit our services page to learn more about UI design at Morphosis.