Designing in Dark Mode: Tips and Benefits

Photo by Sten Ritterfeld on Unsplash

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Torresburriel Estudio

Torresburriel Estudio

116 Followers

User Experience & User Research agency focused on services and digital products. Proud member of @UXalliance