- Dark Theme: A Modern UI Design
- Umair Feroze
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: zenblo
- Proofreader: zhuzilin, regon-cao
Brief introduction to the dark themes of modern UI design
User experience and user interface are fundamental considerations for any successful software application. As a result, developers have decided to use a dark themed interface (as an optional theme) for users to reduce eye strain (especially in low light or darkness).
Dim lighting mainly reduces stress and saves energy. A dark theme is a low-light interface that uses a darker color (usually black or grey shadows) as its main background color. This is a reversal of the default white UI that designers have used for years.
Night mode and dark themes have become an emerging form of modern UI design, and many big companies (such as WhatsApp, Instagram, Google, Facebook and Apple) have adopted this new trend.
Why dark themes
As software engineers, one of our main goals is to satisfy the customer, and that depends on the end user experience. This means that the UI should be designed and implemented in an easy-to-use way.
Why people prefer Dark mode:
- Screen usage increases
- Relieve eye strain in low light or dark conditions
- Increases lighting visibility in low light environments
- Less eye strain means fewer headaches and a better work experience
While high color contrast improves readability, pure black and white contrast makes reading more difficult for users.
Choose a color palette
Pure black and pure white are not suitable. Because white is 100 percent and black is 0 percent. As a result, this difference can produce a strong light effect, which can overstimulate the eyes. This kind of eye discomfort can cause eye strain and make many people feel sick. Here are some tips for filling out your palette:
Avoid pure black
No book is in pure black or white. This is because the contrast between black and white is so sharp that the reader has to squint. This ultimately leads to headaches and a bad experience for the reader. Therefore, avoid using pure black as a background color.
Use appropriate contrast
The dark mode background must be dark enough to show white text. Otherwise, the text is not very readable to the user. Google Materials design recommends using a text-background contrast ratio of at least 15.8:1. Therefore, it is best to adjust the contrast of your palette wisely.
Use desaturated colors
Fully saturated colors “vibrate” when viewed on a dark surface, hindering readability and making people very uncomfortable. Therefore, avoid completely saturated colors. Replace it with unsaturated colors such as white and gray in muted tones.
Do not invert colors directly
Getting a dark theme is not about simply inverting the colors. Some of the colors in the UI have psychological significance, and reversing them would be meaningless and absurd. Therefore, be careful when choosing colors for your palette.
Visual hierarchy
Using the same color for all layers hampers good UI design practices and can lead to poor readability. Therefore, it is recommended to use a lighter hue for the higher floors and a darker hue for the lower floors. This creates a visual hierarchy from the most commonly used elements in your interface to the least commonly used elements.
White text background color is suggested
A survey by the American Society of Optometrists (AOA) found that 58 percent of adults in the United States have eye strain from computer use. Rushabh Kulkarni from UX Bucket has some tips for designing dark themes:
I recommend viewing these colors in dark mode on the mid-sized mobile app (beta) for better visual sharpness. Sadly, dark mode is not available on the web. However, you can do this by installing a Chrome extension.
# 303030
HEX color #303030, Color name: Night Rider, RGB(48,48,48), Windows: 3158064
#2B2B2B
HEX color #2B2B2B, color name: Night Rider, RGB(50, 50, 50), Windows: 2829099
#1F1F1F
HEX color #1F1F1F, color: RGB(50, 50, 50), Windows: 2039583
#1B1C1E
HEX color #1B1C1E, Color name: Black Russian, RGB(27,28,30), Windows: 1973275
As you can see, these colors are not pure black and white and are very readable. And if you scroll down from #303030 to #1B1C1E, you can visually see the background getting darker and darker as you scroll down.
Dark mode is not the same as black mode
The above recommendations are mainly for the use of pure black and white solutions. However, when it comes to dark mode, there are other schemes that use other color combinations. Any dark color can be used as the background in the scheme.
I’ll take a look at my favorite and most used apps and their dark mode features. Let’s take a quick look at them, as follows:
Whatsapp uses a dark green theme that blends perfectly with the usual green theme. In the figure above, you can see how they prioritize components on the screen according to their importance and level of control.
Twitter uses a wonderful blend of dark blue and lighter black. Also, notice that the component’s priority has been split from a lighter shade to a deeper shade.
Instagram uses darker themes than other apps. Black compromises with darker shades of gray, pushing the master to a higher level, pushing the content to a deeper level.
As I mentioned above, there are other big companies like Google, Facebook, Apple, etc. They introduced dark mode into the product and provided their recommended color scheme.
Therefore, dark mode is not always black and white. It can be customized differently depending on the color combination preferred by the business, organization, or customer.
conclusion
Technology is growing exponentially, and if you look around, everyone is either using a computer or a mobile device. This confirms our responsibility as software engineers to provide the best user experience for the end user.
The era of dark themes is just emerging, and this is the perfect time for dark themes and creative UI design! Introduce creativity and let the results speak for themselves.
Hopefully, this article gives you something to consider when doing the dark subject of modern UI design. Wish you happy study and smooth work!
If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.