The Rise of Dark Mode
It's no secret that we spend most of our day looking at screens. Our eyes are frequently bouncing around emails, reading the news, watching videos and jealously liking photos from your friends vacation. But have you ever disregarded something simply because it hurt your eyes? While reading a black text on a white page in a book seems natural, but reading a lengthy document on your phone or computer can be a major strain on your eyes and even concentration.
What works on a printed page doesn't always translate to the screen. Take The New York Times app for example. As my main resource for current events, I use the service daily, but within moments I start to feel assaulted by the brightness of each article. "It's 2021, why can't I switch to a darker interface!?" I grumble to myself frequently. I understand the importance of their iconic "black and white" identity, but I would really love to read about the latest drama in Washington DC in the dark without feeling like I'm staring directly into a lightbulb.
Fortunately, more and more companies and designers are implementing an alternative to this, commonly referred to as Dark Mode. I remember how overjoyed I was when Apple finally implemented this mode into iOS and it's been activated on all of my devices since. They even give users the ability to automatically switch between light/dark modes automatically! The trend has expanded to many of the other apps we use frequently which has given users just one more way to customize their digital experience. For years I would seek out alternative apps for Twitter or Reddit that offered a dark ui option.I was an early Spotify adopter simply because it wasn't bright white like Apple's music interface. Now, almost every app I use has that option built right in.
As you can probably tell from my site, I much prefer light text on a dark background for digital content. Maybe it's because I'm obsessed with black and white heavy metal band t-shirts, but I've always found that high contrast design is more eye catching and dramatic. During my time at Flatiron School, I designed a mobile app prototype for an events app that would exclusively use a darker user interface. While I thought it would be fairly straightforward, I learned that it's not as simple as "white on black."
For example, using #121212 instead of #000000 for the background still gives the impression of white on black, but it's a bit softer on the eyes and a more natural contrast. Using bright colors on top also need to be treated a with a similar fashion, by reducing the vibrancy of saturation will still help the colors pop on the page without causing visual tension. Material Design has a great resource to check out to learn more about some best practices!
Here are some other great examples of dark UI that I've found:
Finance Dark theme UI Design by Ghulam Rasool
Mobile Payments by Filip Legierski
UI Kit_Dark by DStudio
Mobile App UI by DStudio
So how do you feel about dark mode? I'd love to see some of your favorite dark ui designs!