Designing for dark mode

khushbusangoi — Thu, 14 Jul 2022 12:52:52 +0000

Play Video

We see dark user interfaces (UIs) all around us, from mobile devices to huge televisions. However, designing for dark UIs is not as easy as it may seem. We cannot simply repurpose or reverse color shades. If we were to do that, we’d risk damaging our information hierarchy as well as increasing eyestrain.

A few months ago, we as a design team were tasked with implementing dark mode for Titan. Before turning to the “dark side,” we did some digging around on the Internet to find any existing documents on standards and best practices, only to find a handful of useful learning resources in a wild sea of misleading articles.

Designing a cohesive, maintainable dark theme was a daunting task for the Titan design team, but it doesn’t have to be that way for you. With the goal of ensuring that others have an easier time designing dark mode products than we did, we want to take you through our learnings in designing a delightful dark mode experience across all devices. When Implementing dark mode into your digital product, conducting a product design sprint can be a valuable approach to gather insights, iterate quickly, and create an aesthetically pleasing and user-friendly dark mode experience.

In this post, we highlight the following:

Dark mode has a cult following, and several good reasons are behind it. Not only does it offer some health benefits, but it also boosts battery life. Prolonged exposure to blue light at night has the ability to trick our bodies into believing it’s daytime, which affects the natural circadian rhythm and hinders the ability to get a good night’s rest. Darker colors, on the other hand, can help remedy this issue by regulating the melatonin production in our bodies and supporting a healthy sleep cycle.

At Titan, we love dark mode, and so do our users, which explains why it was the number-two most requested feature on our feature request board. Since most devices now support both dark and light modes, it was crucial for Titan to conform to the device settings of the OS theme.

To begin, we needed to examine the identity of our product. Why do people use Titan?

Titan is a professional email suite created specifically for small businesses to build meaningful customer relationships. At the core of that are Titan’s features that enable users to focus on the things that matter. Of course, because this is a product that users depend on to communicate critical business information, it was vital to maintain the functionality of the platform and all its features. Throughout the dark theme design process, preservation of the way people accessed and used these features was our main priority.

Titan is spread across various platforms, so it was also important that we provided a consistent experience across all apps and devices. For instance, Titan on Android needed to look familiar to someone who also uses Titan webmail

From the beginning, we understood how cautious our approach needed to be in developing the dark UI color palette. We were focused on prioritizing accessibility, usability, and functionality.

To reserve most of the space for dark grays, we reduced the use of accent colors while designing color schemes—one accent color and a few dark gray shades. That helped us create color schemes with the required complementary contrast. To make our design accessible, we made sure every text and background color combination passed the WCAG’s AA contrast standard.

We came up with the following proposals:

Carbon colors with vibrant highlights

Plum colors with vibrant highlights

Graphite colors with emphasis on the menu sidebar

Graphite colors with emphasis on the email card list

Of these four proposals, the second one—an emphasis on the menu sidebar—was selected since it offered a consistent user experience across both modes.

The biggest challenge we faced while designing the dark theme was making sure it aligned with our existing light theme style guides and component libraries for various platforms—Webmail, Android, and iOS.

To address this, we first started with two versions of all the components—one for the light theme and one for the dark theme. We soon realized how time-consuming and unnecessarily complex it was as we found ourselves drifting away from the logic of the color scheme.

To develop an easier and scalable solution, we mapped each color of the light theme to its corresponding counterpart for the dark theme. Moreover, to make it even more convenient to choose colors in Figma, we named colors by how they were used and not by how they looked. We then split the colors for the two themes into two color libraries. That allowed us to simplify the process of changing the theme in Figma

Email List

Menu Sidebar

Reading Pane

1. Creating Choices

Users always prefer to be in control of their fate. There are advantages and disadvantages to implementing both light and dark mode. The best solution for accessibility is to have a toggle button that allows users to switch between the two themes.

2. Grey over pure black

Using subtle shades of gray over pure black can help counter the halation effect caused by astigmatism, a condition that affects more than 50% of the population. It’s also a lot easier to create depth in your designs when you are working with shades of gray.

3. Accessible contrast ratios

Using pure white(#ffffff) and pure black(#000000) together is a recipe for an accessibility disaster. Together they can render your UI illegible and ineffective. The text and background color combinations should always have a contrast ratio of 4.5:1, except in cases where the text is large, and then it can be at least 3:1.

4. Details

The smallest details can help bring your design to the next level. Icons and illustrations, for instance, need to maintain their form while being cohesive with the new theme. For illustrations, that means the tiniest color details need to be revised appropriately to support the dark environment.

In our opinion, Dark Mode should enhance and support the core intent of your product and feel familiar to a user.

Do you plan to implement dark mode for your products? We hope our learnings in creating Dark Mode for Titan will aid you in your quest to do the same.

The post Designing for dark mode appeared first on Email Service Suite for Professionals and Businesses: Try Titan Email.

Titan Design Blog - Email Service Suite for Professionals and Businesses: Try Titan Email

Designing for dark mode