Error - Could not copy link. Try again
Page link copied

Dark user interfaces are the hot new trend for web content

Legacy article: Our experience and advise on a dark mode for your website still stands true to this day and everything within this article is still relevant. However, we’ve removed our dark mode from our blog, and you can read why dark mode was removed on another article.

If you haven’t noticed, the rising trend of 2019 is to implement a ‘Dark Mode’ on your website

“We’ve been using the light mode for years?! Surely it doesn’t matter?” – whilst it’s not important, a dark mode has its benefits and enhancements over the traditional ‘light mode’. Let’s be honest first, dark modes are fantastic! They’re stylish, dramatic and elegant – Facebook has just introduced their dark mode on the Messenger app and it looks sleek.

Why make a dark version?

The simple answer is it makes your content easier to read. You want to make your website content, especially dynamic content like blog posts, as readable as possible – and having the option for visitors to enable a ‘Dark Mode’ provides a stimulating user experience. It’s elegant too, a majority of the content on the web is on white so why not shake things up a little?

  • Improved readability of text
  • Better contrast
  • Reduced eye fatigue
  • Less blue light – something that can add to eye fatigue
  • And the most important of them all… saves on phone battery life.

Leave it up to the reader

It’s important to give your visitors the option to use ‘light’ or ‘dark’. You should treat a ‘Dark Mode’ as a secondary view option, an accessibility feature more than a core part of your website. But if your branding and logo design benefits from using a dark colour palette then a dark theme as your websites primary style is what you need.

When it’s OK to use a ‘Dark Mode’:

  • To save readers battery life and, in essence, the environment.
  • When the design is minimalist.
  • When it is appropriate for the context and use – take Netflix for example where viewers are going to be watching content in the dark.
  • To reflect an emotion – for example, a feeling of intrigue and mystery.
  • To create a striking and dramatic look.
  • To create a sense of luxury and prestige – Apple iPhone XS is a great example.
Apple’s iPhone XS web page is stylish and feels high-end and luxury
Netflix benefits from a dark user interface – people watch content at night or in the dark
Facebook Messenger’s ‘Dark Mode’

Our blogs ‘Dark Reader’

Twitter’s ‘Night’ Mode

‘Dark Mode’ readers eyes don’t feel the strain

Picture this – you’re curled up on the settee, the lights are low and you are reading your favourite blog content from your favourite design + marketing agency, but nightmare, your eyes are feeling the strain. If the blog was using ‘Dark Mode’ there would be far less chance of eye strain because ‘Dark Mode’ helps reduce this when viewing at night. Supporters of ‘Dark Mode’ claim the benefits of this have been extremely good.

When it’s best to stay away from dark UIs:

  • When there is a lot of text (reading on a dark background can be difficult) – that’s why an option to switch between light and dark is good.
  • When there is a lot of mixed content on the screen – e.g. images and icons.
  • When the design calls for a wide range of colours.
  • Online stores should avoid it unless it fits the branding – it can be confusing.
  • When your brand / industry warrants a ‘light and fresh’ feel.

How do I add a ‘dark mode’ to my website?

Well, unfortunately, its not a one-click solution. But FCD may be able to help you achieve all the benefits a ‘Dark Mode’ has to offer and look at building one for you – get in touch today and let’s see if you can be turned to the dark side?

Share