Home > User Experience > Designing in Dark Mode – UX Planet

Designing in Dark Mode – UX Planet

Designing in Dark Mode - UX Planet

Getting it right, while keeping it minimal

There has been a lot of hype in the last year on Dark Mode, with the launch of Android 10 and iOS13, both offering system-wide support for it. If you are a heavy mobile user, you might have flirted with Dark mode already. Its benefits are clear and visible: less eye strain, better battery life and making the content stand out.

For our project of designing a digital magazine, we decided to focus on building a responsive site in Dark Mode. Why did we do that?

  • Reduced eye-strain: when reading a large amount of content, particularly in low light/artificial light environments, using dark backgrounds leads to less eye strain. Also, over a longer period, dark mode reduces the chances of developing myopia (https://www.nngroup.com/articles/dark-mode/)
  • Better battery life: for OLED screens in particular, using dark mode can save up to a whopping 30% battery life.
  • Focus on content: content stands out a lot sharper on dark mode, giving the UI a sharper look.
  • Stand out among the competition: use of the dark mode is a differentiator for our product, making it stand out among more traditional competitors.

But it turned out to be not as simple as flipping the background and text colours around. These are our learnings and tips from building a minimal site in dark theme.

The obvious answer of 100% white text on 100% black background is actually a complete disaster, causing more eye strain than the light mode.

Google recommends that for dark theme, a dark grey background be used (#121212 is their advice). For texts, white (#FFFFFF) be used, but not at 100% opacity.

Source link