Designing in Dark Mode: Tips and Benefits
Designing in dark mode is a trend that we can already come across in most of the digital products we use, in phone devices, desktop computer apps or even in smart TVs.
In this design trend the colours of the interface elements are inverted, so we then use clear colours over a dark background, and we also reduce brightness. This does not mean exclusively using black and white. It is about choosing an adequate colour combination that provides a good contrast over dark backgrounds.
At the moment it is a strongly demanded feature amongst users, and big tech companies such as Google and Apple have already incorporated this feature into their interfaces. We also cannot forget social media such as Twitter or YouTube.
Tips for designing in dark mode
- Avoid using saturated colours. We need to take into consideration that while we are designing in dark mode every kind of colour will stand out more than in any other circumstances. We should try to avoid saturated colours, since they can cause visual vibration. We also cannot overlook the realisation of the appropriate testing so we can make sure that the colours we chose are accessible.
- Do not use pure black. Even if it seems that using black we can achieve enough saturation, it is not true. Instead of using black (#000000), the use of dark greys is recommended (such as #121212).
- Do not try to express the same mood as in light mode. We must adapt the tone of our brand so it can conform into dark mode, since it is unavoidable that darker colours address a different feeling. Finding the right balance is key to properly communicating through the dark mode colour palette the emotions that align with the brand.
- Use colours to add depth. It is true that in light mode it is easier to add shadowing that will help to communicate the feeling of depth. But, even when designing for dark mode it does not mean it has to be flat. We can use some highlighting with colour to create some depth, this will help enormously users to adequately understand the visual hierarchy of the interface.
Dark mode benefits
- It is healthy for our eyes. Nowadays we spend most of our time looking at a screen, either to a computer or our phone. Although dark mode does not completely fix this issue, it does help reduce visual fatigue.
- It is easier to see in the dark. Since it is less bright than light mode it is easier and more comfortable for our sight to see dark mode, and it also prevents glaring.
- Highlights content. Usually dark mode is more minimalistic than light mode, so distractions are reduced while consuming content. This allows the user to focus on elements that are really important.
- Improves battery life. On devices with AMOLED or OLED screens the use of dark mode means a reduction of up to a 14% of battery consumption, and if brightness is set to the minimum it can mean up to a 60% reduction. Also, dark mode design contributes to the production of environmentally friendly digital products, since it helps reduce energy consumption.
- Improves accessibility. Following all the tips for designing in dark mode and making sure we use the standards of colour contrast we will achieve a more accessible and intuitive product to navigate in.
It is essential to test and try our theme, in dark mode as well as in light mode, and do testing at different times for each moment of the day. We have to make sure that both designs are appropriate for their use both at night and daytime.
As UX Designers we have to understand at what moment each mode is necessary, so we can design consequently. Also, we need to always respect accessibility and usability requirements to guarantee that we are offering the best quality possible in both modes for every user.
This article is a translation of the following one, published in our corporate website:
