Or things to keep in mind when designing a dark mode app or website
2018 showed that dark modes are on the way. Now that we're halfway through 2019, we can say with confidence: they're here, and they're everywhere.
To begin with, dark mode is not a new concept at all. It has been used for quite a long time. And once upon a time, in fact, for a long time only it was used: the monitors were of the βgreen-on-blackβ type, but only because the luminescent coating inside emitted a greenish glow when exposed to radiation.
But even after the introduction of color monitors, dark mode continued to live on. Why so?
There are two main motives that explain why today every second person is in a hurry to add a dark theme to their application. First of all: computers are everywhere. Wherever we look, there is a screen everywhere. We use our mobile devices from morning until late at night. The presence of a dark mode reduces eye strain when you are in bed before going to bed for the βlast timeβ scrolling through the social feed. networks. (If you're like me, "last time" could mean a 3-hour scroll . Dark mode? Yes, please! )
Another reason is new display technologies. The flagship models of large companies - Apple, Google, Samsung, Huawei - are all equipped with OLED screens, which, unlike LCD displays, do not require backlighting. And this is really good news for your battery. Imagine that you are viewing an image of a black square on your phone; with an LCD, the backlight will illuminate the entire screen even though most of it is black. But when viewing the same image on an OLED display, the pixels that make up the black square simply turn off. And that means they do not consume energy at all.
These types of displays make dark modes many times more interesting. By using the dark interface, you can greatly extend the battery life of your device. . Dark modes, of course, go hand in hand with UI changes, so let's brush up on our knowledge!
Dark Modes 101
First of all: "dark" is not the same as "black". Don't try to change the white background to black, as this will make it impossible to use shadows. A design like this would be super flat (in a bad way).
It is important to keep in mind the basic principles of shading/lighting. Objects that are more elevated should be lighter in shadow, mimicking real lighting and shading. In this way, it is easier to distinguish between the various components and their hierarchy.
Two equally gray squares with a shadow, one on a 100% black background, the other on #121212. When lifted, the object becomes a lighter shade of gray.
In a dark theme, it's still possible to work with your regular primary color if the contrast is right. Let's explain with an example.
In this interface, the main action is the big blue button in the bottom bar. There is no problem in terms of contrast when switching between light or dark mode, the button is still eye-catching, the icon is crisp, and overall everything is fine.
When the same color is used in different ways, for example in text, there will be problems. Try using a (much) less saturated shade of the base color, or look for other ways to incorporate brand colors into the interface.
Left: Red on black looks bad. Right: turn down the saturation, and everything is fine. - approx. transl.
The same goes for any other rich colors you may have used, such as warning or error colors. Google uses a 40% white overlay over the default error color in their when switching to dark mode. This is a pretty good starting point, as it will improve contrast levels to meet AA standards. Of course, you can always change the settings to your liking, but don't forget to check the contrast levels. By the way, a useful tool for this purpose is a plugin for Sketch β which shows exactly how much contrast there is between the 2 layers.
How about text?
Everything is simple here: nothing should be 100% black on 100% white and vice versa. White reflects light waves of all wavelengths, black absorbs. If you place 100% white text on a 100% black background, the letters will reflect light, smudge and become less readable, which will negatively affect readability.
The same goes for the 100% white background, which reflects too much light to fully focus on the words. Try softening the white a bit, use light gray for backgrounds and texts on black backgrounds. This will reduce eye strain, preventing
Dark Mode is here and won't go away
The amount of time we spend in front of screens is constantly growing, and every new day, new screens appear in our lives, from the moment we wake up until we fall asleep. This is a fairly new phenomenon, our eyes are not yet accustomed to such an increase in screen time late at night. This is where dark mode comes into play. After the introduction of this feature in macOS and Material Design (and most likely in iOS), we believe that sooner or later it will become the default in all applications, both mobile and desktop. And you better be ready for it!
The only reason not to implement dark mode is when you are absolutely 100% sure that your application is used exclusively in bright daylight. This, however, rarely happens.
It is worth mentioning a few things that will require special attention when implementing dark mode, in addition to the basic principles summarized earlier.
From an accessibility point of view, dark mode is not the most convenient, as the contrast is generally lower, which in turn does not improve readability at all.
But, imagine that you are getting ready for bed, you really want to sleep, but right before you fall asleep, you remember that you need to send someone a super important message that cannot wait even one night. You pick up your phone, turn it on and AAAAAAA⦠the light background of your iMessage will keep you awake for another 3 hours. While light text on a dark background is not considered the most accessible, having a dark mode right this second would increase convenience by a million. It all depends on the situation in which the user is at the moment.
That's why we think automatic dark mode such a cool idea. It turns on in the evening and turns off in the morning. The user does not even need to think about it, which is very convenient. Twitter has done a great job with the dark mode settings. Plus, they have both just a dark mode and an even darker mode for all those OLED screens, battery savers and everything. It is important to note here: give the user the ability to switch manually when he wants to: there is nothing worse than automatically changing the interface without the ability to switch it back.
Twitter has an automatic dark mode that turns on in the evening and turns off in the morning.
Also, when developing a theme, you should keep in mind that some things simply cannot be made dark.
Take a text editor like Pages. You can make the interface dark, but the sheet itself will always be white, simulating a real sheet of paper.
Pages with dark mode enabled
The same goes for all kinds of editors for creating content, such as Sketch or Illustrator. While the interface can be made dark, the artboard you work with will always be white by default.
Sketch in dark mode and still a bright white artboard.
Therefore, regardless of the application, we believe that dark modes will become native to the operating system you use, which means it is better to prepare for the future in advance, it will be dark.
If you want to learn more about dark UI development, be sure to check out the guidelines , this was our primary source of information for this article.
Source: habr.com