Dark mode UI is not a new user interface philosophy, but it’s gained significant popularity recently due to out-of-the-box inclusion in products like Windows, macOS, iOS, and Google services.
For years, black text on a white background was standard practice in much of the digital realm. Coders and anybody who knows their way around command prompts have long enjoyed dark-colored backgrounds. But many others who spend their working hours in front of a screen learn to live with harsh whitespace and brutal contrasts.
Many websites and apps are making the switch to a dark mode UI or offering users an option between dark mode and light mode. What are the benefits? And how can designers make the best dark mode UI possible?
1. Make It Optional
A commonly cited statistic claims that 70% of professional programmers use dark mode in their coding environments. As we mentioned above, coders and operating system “power users” have known about the benefits of dark work environments for a while. But what about the rest of us?
Evidence suggests that the blue light given off by computer screens impacts human circadian rhythms and sleep quality. Offering a muted dark mode may reduce this effect. Dark mode may even improve the battery life of our devices.
That said, dark mode still isn’t for everybody. A traditional black-on-white design scheme may make the most sense in brightly lit work environments. It may also be a matter of personal preference.
As you roll out your dark mode UI, don’t throw away everything that came before. Continue to refine both versions of your website, web app, or application – and give the user a toggle they can find easily in the settings menu to switch at will between the two.
2. Dark Mode UI - Learn About Major Design Guidelines
User interface design is, rightfully, considered an art. There are many opportunities to exercise creative control and create something unique. That said, some of the biggest companies in consumer technology – Apple, Google, and Microsoft – offer guidelines to help their developers’ products look right at home on their respective platforms.
- Apple iOS guidelines
- Apple macOS guidelines
- Google material design guidelines
- Microsoft color and theme guidelines
This is a great starting point for designers and other decision-makers involved in launching a dark mode UI. Users want to see and interact with apps, websites, and services that look and feel like the operating systems they’re already familiar with.
Tying your dark mode implementation to system-level dark mode standards has other benefits for developers and users alike. For example, modern devices with internet connectivity and light sensors can switch automatically between light and dark mode based on the time of day or the ambient light in the room. Using the available guidelines and APIs from major tech companies ensures your product operates in harmony with all of the powerful hardware features of modern devices.
3. Mute the Color Palette
There can be a temptation to go bold with the chosen color scheme – and there are times when that instinct will serve you well. However, when designing a visually appealing dark mode that doesn’t offend the eye, muted colors should win out over vibrant hues.
A deep and vibrant blue would look great up against whitespace, but think about the effect it would have on a true-black background. A more muted pastel blue or purple would be much more readable.
4. Use Colors, Not Shadows, to Create Hierarchy
There must be a sense of visual hierarchy when it comes to webpage elements and open windows. However, shadows do not function as intended on a black or even dark-gray background. Shadows give a sense of space and depth when the background is white or another light shade, but they’ll make things look indistinct and murky with dark mode engaged.
Any app or website designed to be touched, clicked, and swiped must create a sense of space, elevation, and hierarchy. If shadows aren’t a good way to accomplish this in dark mode, what else is there?
Use color to your advantage. Visual elements that overlay one another, or that are designed to move or be manipulated should use color to distinguish themselves in the visual hierarchy. If your background is true-black, then make popovers an attractive shade of gray, for example. Or if you have lots of tappable or movable elements, choose a series of complimentary colors to communicate silently to the user how the product should be interacted with.
5. Dial in the Contrast of the Text
Just like using color to create a sense of depth and hierarchy, color also plays a role in the legibility and readability of your app or website contents. Color contrast is one of the prime considerations for accessible graphic design – but it’s important even if your audience doesn’t have visual impairments.
A lack of contrast might cause titles, clickable text, or important headings to get lost in the background. It might also cause the user to overlook an element of the design they’re meant to interact with, such as links and buttons.
With this in mind, carefully survey each webpage and button design to ensure its colors work with the darker aesthetic of dark mode. When you think of your website as a product, you’ll find all kinds of opportunities for incremental improvements.
The Benefits of Dark Mode UI
It’s been observed that reducing one’s exposure to the harsh light of screens helps eliminate or reduce the effects of eye strain. As many as 70% of digital professionals may suffer from this condition, which ranges from mildly irritating to debilitating.
Dark mode may even improve the battery life of our devices. OLED screens (organic light-emitting diode) – common on all flagship and mid-range smartphones – “turn off” the pixels anywhere true black is used in the visual design. Deliberate trial and error has revealed that the more widespread the use of true black on OLED screens, the better the battery savings. One test claimed a difference of 30% after switching to OLED and true-black dark mode.
If you want to bring these benefits to your users and show off your design team’s interpretation of one of the hottest modern UI trends today, make sure you investigate dark mode. And when you do, don’t just turn out the lights – use these design principles to get the best results and the most memorable design possible.
Eleanor is the editor-in-chief at Designerly Magazine. She’s also a freelance web designer with a focus on customer experience. Eleanor lives in Philadelphia with her husband and dog, Bear.