Mastering the Art of Dark UI Design: 9 Essential Principles and Techniques
Dark UI design often called Dark Mode or simply lights out mode, is a user interface with a color scheme that resembles a negative in photography. There is a huge emphasis on dark background colors and a light foreground. It often entails using light text colors set on a dark or black background.
It became popular in 2018 following the release of Dark Mode on macOS Mojave. While it has become popular recently, it is an old design. The first monitors used a dark theme, which only changed with the creation of the color monitor. Today, all modern devices with a display offer a dark mode. Whether it is a phone, TV screen, or application, they offer a dark mode.
However, as with any product, design is what sets companies apart. Here are 9 takeaways to help you get dark mode right.
1. Avoid Pure Colors
A pure color is one without any gray in the mix. A good example is pure white (#FFFFFF) and pure black (#000000). It is a common rooky mistake. Beginner designers may believe dark mode is about placing a black background on white text. However, if the contrast is too high, users will strain their eyes, negatively affecting their experience.
It is recommended to use varying levels of dark gray instead of black. When using white, it is recommended to use light gray. There are numerous variations of gray, and you can pick one that gives your brand identity, even in dark mode.
2. Avoid Pure White Text
In dark mode, there is little room to maneuver when it comes to the background. As such, the text is what defines your success in dark mode. It is recommended to never use pure white for text. At this stage, opacity is your best friend. Besides causing eye strain, pure white letters often appear blurry on most screens. This is due to an optical illusion where the white light from the font tries to fill in the dark space. When it comes to fonts, opt for dim white and light gray.
3. Leverage Negative Space
An important design element of good dark mode design is to leverage negative space. A dark theme can seem overbearing to users if not properly put together. A good designer will make full use of the negative space. Embrace minimalist design with dark UI. It helps to make the page scannable and allows people more time to absorb information. The result is a better UX.
4. Be Careful of Color Saturation
Things like icons, button accessibility, and text visibility are considered when using the light mode. It is harder to calibrate colors against a dark background with dark mode. When creating a color palette, avoid neon colors.
High-contrast colors do not improve visibility; they make it harder to read text. When they are too high contrast, they will vibrate and irritate visitors. Designing in dark mode entails redesigning all aspects of the site, especially icons, text, and buttons.
5. Seek to Preserve Your Brand Identity
Creating a brand identity is a process that takes years and huge amounts of resources. Switching to dark mode does not mean you have to lose your brand identity. However, it does not mean you must use the exact colors in light mode. For instance, it could mean you preserve the logo’s original color while desaturating other UX elements. This way, you still preserve the soul of your brand.
In dark mode, the difference in colors could bring about different feelings in users, which could affect your brand identity. Finding a balance between transmitting the brand’s emotions even with new colors is crucial. Strive to mimic the same effect of your brand even in dark mode.
“2" is the brand color. Source: Material Design
OpenSea Dark and Light theme
Let’s take a small example to understand this better. OpenSea uses both dark and light themes while maintaining its brand identity and consistency.
- They do not change the primary brand color of their logo.
- They use similar gradients on the top part that is adapted to the dark and light themes but give a consistent look throughout.
6. Avoid Shadows in Dark Mode
Shadows are used to create an elevation effect to define what is the background and what is content. This works great in light mode. However, it can be confusing in dark mode. If you opt to use a shadow, do not make it darker than the background. While this can be tempting, it will serve no purpose. Most people will not recognize it anyway. Secondly, do not use a shadow that is lighter than the object. Doing this will create a strange interface that will distract users from your core message.
7. Strive To Meet Website Accessibility Standards
Web Content Accessibility Guidelines (WCAG 2.0) are voluntary standards that a UX designer should consider implementing on their site. Doing so in dark mode helps ensure that your site can net an even larger audience. Using this standard is also useful in helping you understand which color values provide you with optimal contrast.
8. Adjust Your Images
Besides the background, website elements, and text, also adjust your images. Work to ensure that the images on your site blend in with the dark mode. For instance, you could use a general filter that adjusts the contrast and brightness of the images.
9. Give Users a Choice
When using dark mode, allow users to switch between dark and light mode. On some sites, there is even the option to choose when to switch to dark mode at certain times. However, the best option is to let users switch between modes on their own.
A major reason for this is that most users often prefer customizability. It gives them a sense of freedom, which improves the UX. It makes the user feel appreciated, which increases the chances that they will pick your product over others.
When adding this option, ensure the button to switch between modes is easy to access. Users should have easy access to the ability to customize their dark mode in seconds. Any longer, and it will lower the UX.
Summary
Across all digital products, simplicity is what defines success with dark mode. It is excellent for minimalist content, social media sites, and entertainment sites. However, the dark mode does not work on data-heavy or text-heavy sites with varied content types. Before deploying any product, UX designers must test and analyze the feedback.
👋 Let’s Connect!
I’m a product designer and a UX design consultant in the Web3 and Fintech space. I love designing user experiences that convert and impact people’s lives positively.
Feel free to get in touch: https://www.linkedin.com/in/dhananjay-mukerji/
Schedule a call: https://calendly.com/theuxdj
