things we talk about.

The latest trends and insights from our team.
design
4 August 2020

designing for dark mode.

Dark mode is one of the biggest trends in internet marketing and design with big brands like Instagram, Microsoft Office Suite and Facebook now offering it as an option.

Let’s look at what these brands are doing and how you can ensure that you are taking it into account with your designs.

What are the Benefits of Dark Mode?
  • It makes your user’s screen easier to see in low lighting such as early in the morning or late at night when scrolling in bed.
  • It puts your content first with less of the focus being on the interface itself.
  • Dark mode improves battery life.

The Benefits Explained:
  • Reducing Eye Strain. We have all had sore eyes after staring at a screen for too long. Computer Vision Syndrome (CVS) includes eye pain, blurred vision, double vision, headaches, neck/back pain and more.
  • Emotional Boost. Lots of dark mode UI users are in it for the health and energy-saving benefits rather than the aesthetic reasons. Dark mode reminds them they’re doing something a little healthier, which triggers a good feeling – kind of like that good feeling you get when you load up your reusable shopping bag or water bottle.
  • Saves Battery Life. Dark Mode uses an increased number of black pixels that actually forces the device to use less energy. Saving your user’s battery is a valuable and improved experience.

4 Top Tips for Designing Dark Mode:
  1. Avoid Pure Black. High contrast can lead to eye strain which is the opposite of why we create a dark mode option. Steer clear of pure black and look at making dark grey your primary colour and combining it with desaturated colours.
  2. Desaturated. Keep away from fully saturated colours on dark backgrounds. The shades often seem to “vibrate” when viewed on dark surfaces. Instead, use desaturated colours like pastels and muted colors – shades that have grey and white added.
  3. Have Proper Contrast. Your dark mode needs to be dark enough to show white text. Google Material Design suggests using a text-to-background contrast level of at least 15.8:1.
  4. Adjusting Your Brand Identity. Your company’s blue might read differently on black than on white. Colours in dark mode often have to be tweaked to have the same response you’d get in light mode.
attic rush logo
© 2020 attic rush | all rights reserved | cookie notice