September 16, 2019 What You Should Know About Dark UI
Dark UI has become a trend and movement lately. It started with Apple, which released the macOS Mojave operating system that has dark theme features. Google, which provides dark features on several of its applications, has made more and more software development companies update their applications with new dark layouts to try to align with this new movement.
This movement certainly has a direct impact on the UI / UX Designer. As we all know, many designers prefer to stay in their comfort zones with lighter color schemes, but this is only possible because of their experience in building such products. Therefore, let’s analyze Dark UI more deeply.
What’s the Good and the Bad?
Dark UI can create a dramatic display that is striking.
Products of entertainment service providers, such as streaming movies, sports, and game consoles usually choose dark-themed UI. These product designers choose dark themes because they can blend into the environment and help important content stand out when you are away from the screen.
Reduce eye strain and make the user comfortable
Dark UI helps create an interface design that can reduce eye strain and make users comfortable for long viewing times. For example, DarkUI design is used on some IDE or Editor Code for developers. Developers work long hours a day at the computer and the dark UI not only helps them with eye strain but also creates enough contrast in different code tags, making it easier to scan code quickly.
Dark UI can create a luxurious and prestigious appearance.
Black and white is an eternal color combo that is always suitable for every age. These colors can be applied to all types of designs. Black will give a strong and masculine impression to the design, white will soften the color. The combination of the two, with the dominance of black, will make your design appear soft, luxurious and charming.
Bad for designs that use a lot of text
If the content interface created has a lot of text weight, the use of a black background is not suitable because it can make it difficult to read. The white interface is more ideal to ensure readability. But you can still implement it in Dark UI, provided it is one to host text-based content.
Tips For Implementing Dark UI
Choosing color
Dark UI does not have to be pure white text on a pure black background. In fact, high contrast can be painful to see. It’s safer to use dark gray as the main surface color for components, rather than original black (# 000000). A dark gray surface reduces eye strain – light text on a dark gray surface has less contrast than bright text on a black surface. A dark gray surface can express a wider range of colors, heights, and depth because it’s easier to see shadows in gray (not true black).
The use of saturated colors must also be considered. Saturated colors that look good on bright surfaces can vibrate visually against dark surfaces, and are difficult to read. Desaturate the primary color to make sufficient contrast to a dark surface. Use brighter tones (colors in the range of 200-50) because they have better readability on the surface of dark themes.
Lighter variants won’t make the UI less expressive but they help you maintain the right contrast without hurting the eyes. Adding a black/dark background color highlights other vivid colors better. The use of a black background can also make the display more aesthetically beautiful and give users a minimalist feel.
Color contrast standards & accessibility
You should always consider accessibility and adjust sufficient color contrast when designing. Ensure that your content remains comfortably readable in Dark Theme. The surface of the theme must be enough to display white text. Google Material Design is published to use a 15.8: 1 contrast level between text and background.
Typography
Designing for Dark UI is not just about how designers choose colors. You should also consider changing the typography style to maintain readability for users who use dark mode. Light text with a dark background appears more contrasted than when the same color is used upside down, so to make your Dark UI easier to read, you need to add more white/dark space to your text.
Allow users to switch from regular to the Dark UI
Another way that Dark UI can be well received by users is to provide a feature to switch from normal mode to dark mode. By doing that, you give control to the user. Don’t forget to use analytics and A / B testing to see if the Dark UI is good or bad for the user.
Try learning the Dark UI concept from another existing system design.
There are many Dark UI standards out there. Apple has its own set of dark colors in AppKit. Google has its own standards on material design and many other technology companies have made their version of the Dark UI concept. Try experimenting with mixing and matching Dark UI concepts. Don’t forget to adjust the color and branding of your company or client’s design.
A Few Examples of Dark UI apps/websites.
Sketch just introduced Dark Mode in its latest release. Turn on the lights, get rid of distractions, and watch your design come alive, making you focus on what matters most – your work. It also helps you work more comfortably for hours at the computer.
Apple uses Dark UI to emphasize the impression of luxury on some of its products such as the Macbook Pro or iMac Pro.
The factor that made Visual Studio Code popular was the use of Dark UI. Many developers say that coding activities depend on visual productivity; if the eyes get tired, the brain also takes you away from the screen. Some developers have even created plugins in visual studio code to provide more comfortable color schemes for more productive work.
Netflix realizes that the viewing activities of its users usually occur during the day and night, viewed from a distance of 6-10 feet, and watched in a dim room – in other words, the screen matches the environment. In addition, colorful content (e.g., art covers and promos), dramatically stands out in dark-themed UIs.
iqbalhood
Guest Blogger
