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.
- High-emphasis text has an opacity of 87%
- Medium-emphasis text and hint text have opacities of 60%
- Disabled text has an opacity of 38%
This works better than grey text, while creating a clear hierarchy among the text elements. We followed these recommendations in our design, as seen in the image.
We used the Stark plugin in Sketch to check the contrast ratios for all our elements, in both modes.
In the beginning, we used a single primary colour for both Light and Dark mode. However, we found that for many elements we did not or barely cleared the contrast requirements.
However, it was important to us that the brand has a sharp, minimal look. So we started working on building a tonal colour palette for our brand, which would look consistent, but with excellent contrast.
It is not advisable to use saturated colours in Dark theme, as they can cause eye strain for your users and typically fail WCAG’s AA contrast requirements. Using a desaturated shade of colour works better, while maintaining a consistent brand identity.
We used the Adobe colour wheel to create shade variants for our primary colour (the middle shade). The first two desaturated tones were used for the dark theme.
Using this palette, we redesigned our screens and rechecked the contrast ratios- all good!
Due to the nature of the Dark theme, it is important to be careful about using light coloured pop-ups or buttons, as they can create a very disconcerting “flashlight” effect.
Our original pop-up was #FFFFFF, with 85% opacity (as seen on the left screen). However, during user testing, the testers found it too bright and sudden. We changed it to a soft grey (85% opacity), as seen on the right, for much better results.
As designers, it is our role to offer options to the user, but leave the final controls in their hands. Similarly, it is important to leave the decision on using Dark theme with the user, in an intuitive and accessible manner.
That’s it from us today. I hope this article is useful as a checklist, when designing in dark mode.
This project was done by our team of two, Barbara Susic and I, for Ironhack Amsterdam. You can see the final prototype here- we love feedback! 🙂
With thanks to:
- https://dribbble.com/bekii for the wonderful mockup
- Various artists on Unsplash for the images
- Our wonderful users for their time, patience and honest feedback, all for free 🙂