Designing for the Dark Side

‘You use light mode? Eugh!’ - a sentiment that has become increasingly prevalent. From judgy tech bros altering their browser and app preferences to high-end luxury brands looking to create a more chic online experience, the ‘dark mode’ feature has become a staple of ‘cool’ UX design, and something of a pseudo-badge of honour for the punks of personalisation that reject default design settings.

Many dark mode evangelists report that it improves readability, saves on battery performance and reduces eye strain - not to mention the valid arguments to be made on the topic of accessibility. But as the designers will tell you, it’s not as simple as flipping a switch to invert your UI’s colours. While still following universal principles, dark mode design poses its own unique set of challenges which platforms must take into account when offering the popular alternative setting.

Carl Feltham, experience design director at Media.Monks summarises, “It’s about providing our audiences with the choice. Not everyone uses dark mode, nor finds it easier to read. We need to enable users to determine what they find easier to navigate - based on their device, their accessibility needs, their frequency of usage and the environment they are in, and for them to choose accordingly.”

Some experts, like Cheil UK’s head of UX, Jim Banks, believe that the ‘dark side’ has gained enough momentum to where more brands and platforms will be adopting a ‘dark-first’ approach going forward. But his general message is clear: “It’s still important to consider both light and dark modes during the design process to ensure that ANY users can comfortably use the platform in any lighting condition.”

To gauge the consensus of the industry’s design leaders, LBB’s Ben Conway spoke with creatives and designers from design studios and agencies around the world. They identified the benefits and challenges of ‘dark mode’ design, as well as offering some expertise on how they are currently designing for the dark side effectively. Sharing their insight are voices from R/GA, Re (M&C Saatchi Group), Tank Design, L+R, Media.Monks, VMLY&R, Momentum Worldwide, Wunderman Thompson UK, Cheil UK and Build in Amsterdam.

Starting with the positives of using dark mode, Eloy Krioka, creative director at digital design and ad agency R/GA, highlights the key benefits succinctly: “It enhances readability and reduces eye strain while also being energy-efficient.” He continues, “Brands and platforms that adopt a ‘dark-first’ approach in their design strategy have the opportunity to create a unique user experience while also improving energy efficiency.” 

The potential health benefits aren’t lost on Carl either, who agrees that dark mode can reduce eye strain, thanks to less blue light being emitted. “For those that, like me, make the infinite scroll part of their bedtime routine, it could lead to a better night’s sleep.”

As well as the upsides on the user’s end, Soujanya Rao, associate director of experience design at VMLY&R highlights that there is also lots to gain from the brand’s perspective.  She says, “Dark mode not only helps with accessibility, but also changes the brand perception, as it appears to be more modern and more exclusive. Also, if you want to highlight information or if you want pictures to stand out, dark themes are preferable.”

That said, Eloy also points out that dark mode is a “significant shift” from traditional light background designs and poses new challenges for designers. So, what are they?

First is the issue of legibility. For some, dark mode is a solution for overbright displays and designs that may reduce readability for light-sensitive people. On the other hand, as L+R’s senior designer Joe Taylor points out, “Dark mode does create some challenges, such as how colours work within a dark design system, or achieving enough contrast so visual elements have separation and text is legible.” 

Dark design can also become especially illegible if the display is being used in a brightly-lit environment, says Harpreet Singh, senior graphic designer, XD at Momentum Worldwide. He adds, “Large paragraphs of copy can be strenuous to the eyes if there’s low contrast on the screen in high lighting conditions.” 

And this issue, explains Carl, is further compounded when people are using older devices. To achieve sufficient legibility with dark mode on older displays (especially outdoors), the brightness is often required to be turned up. He says this then “surpasses the normal usage” of energy, counteracting any battery-saving benefits that dark mode might provide at lower brightness levels.

The next challenge for designers can be described in brief as ‘time and effort’. Simply put, creating another visual option for a platform instantly adds a large amount of work to a project, and requires rounds of testing and reiterating to check for functionality, legibility and accessibility.

Tank Design’s CCO Geoff Donegan and design director Jess Maher say that the additional scale and overhead required to maintain a second design system needs to be weighed up carefully by the brand and designers, especially if there are budget or time constraints: “Does it make sense to invest in designing for multiple, distinct colour systems?” Feeling more of a responsibility to provide users with more options nowadays, Wunderman Thompson UK’s UX director, Nicola Jenkins, adds that this means creating a design or interface that performs equally well on light and dark. “So, as well as more design considerations such as colour and accessibility,” she says, “it will also mean more time in development and testing.”

The final key challenge, explains Media.Monks’ Carl Feltham, is that “light and dark mode can drastically impact a brand’s visual identity and need a lot more consideration.” Highlighting brands that heavily leverage black and white in their designs, like Apple or Guinness for instance, he says that the considered, curated content could be affected negatively. “Might Apple’s distinctive take on design be lost in a light and dark mode? Would their pages be as impactful on white? Might it feel flat or lack rhythm?”

So, dark mode may first seem like a good idea for brands looking for a sleek new look, or for users to reduce eye strain and battery usage but, as the experts have expressed, it can also make things less legible, more work-intensive on the designers, and less resonant/consistent with a platform’s visual identity. Additionally, Cheil UK’s head of UX, Jim Banks says, “Accessibility must also be taken into account, as dark mode may not be suitable for all users, such as those with visual impairments – it’s vital to test your dark mode designs against this.”

So how can dark mode be designed and implemented effectively? And in a way that provides options, while not excluding any users?

From his experience as a design director, Carl Feltham reiterates that switching between modes isn’t as simple as inverting white and black. Depending on the colour and background combinations, both readability and contrast can drastically change. “Take yellow type on a black or white background - your design can go from a AAA accessibility rating to completely illegible. As a result, each mode demands its own design, theme and colour palette.”  

Following this, Jon Hewitt, creative director at Re (M&C Saatchi Group) says that the design agency has separated colours for ‘light-use’ and ‘dark-use’ to help maintain tonal balance in either mode. “The way colour behaves in a dark context versus a light context means careful consideration when defining a palette. Pastel colours that look recessive on a light background suddenly pop like highlighters when used on a dark background.” 

And, it’s not just colour being taken into consideration. He says that different weights and line thicknesses need to be used across type, icons and other elements too. “Brands often create separate positive and negative logos with the thickness adjusted so that it's consistent, regardless of background colour. This is nothing new – as far back as 1965, Design Research Unit created separate versions of the iconic British Rail double arrow symbol.”

L+R, on the other hand, doesn’t design for dark or light mode specifically, and Joe Taylor says that the focus should be placed on whether the design is generally a suitable fit for the brand. “This can be determined by brand communications such as tone of voice, colour palette or additional material already in existence.” He continues, “Our approach to UI being in ‘dark mode’ is to work with opacities, shades of white, and to use accessibility checkers throughout our process - and as usual, put the content first. It’s not about the ‘colour mode’, it’s about the brand and the connection between digital product and user.”

Although, when a team does decide to work with dark mode in mind, Momentum Worldwide’s Harpreet Singh says it can be useful to pay extra attention to layout design - improving readability in dark mode through “large type treatment, sectioning information accordingly and character spacing”. He adds, “That zoomed-in exercise of being detail-oriented goes a long way in creating a successful user experience.”

For Peter Polacsek, designer at Build in Amsterdam, dark mode truly shines when it adapts to lighting environments and syncs with device settings. So, to avoid dark mode designs “becoming a mirror” in the sunlight or being visually jarring, he says it’s important “to adjust accent colours for accessibility, making them lighter and less saturated,” so they don’t clash with dark backgrounds. While a delicate balancing act, Soujanya Rao agrees that dark mode can be used to its fullest when following basic design principles correctly. By “meeting colour contrast standards and using the palette more appropriately”, she says a brand can avoid losing its personality while expressing more control over the product and its customisation. “Of course,” she adds, “as always, robust user testing will help us justify any design decisions we make.

Ever increasing in popularity, dark mode is something that the team at Tank Design is seeing more brands ask about recently. However, Jess and Geoff warn that established brands should ensure that they and their audiences are a suitable fit before blindly following the trend. “The last thing you want is for your brand to look like everyone else’s out there. So, if you are going dark just because it looks cool, then you’ve probably missed the point.” They add, “Ultimately, we’re designing evermore accessible and flexible systems that are capable of meeting users where they are - irrespective of device, platform or disability. So, dark mode is one consideration and an approach we may lean into if it’s appropriate.” 

This careful consideration from the brand’s perspective is a vital point for Harpreet, who says that a dark UX can have tangible effects on a user, like altering a brand’s first impression or messaging. “Websites need careful consideration,” agrees Wunderman Thompson’s Nicola Jenkins, adding, “There are some beautiful dark experiences online but they are more about the aesthetic that a dark design evokes, associated with a premium and luxury feel. [It’s] not right for every brand and shouldn’t be seen as a default design choice.”

Since 2017, Re’s Jon Hewitt says that he’s seen “a resurgence of dark mode within product UI,” observing how it’s no longer the preserve of entertainment apps like Netflix or Spotify – instead becoming a widespread user option that needs to be designed for across the board. This is something that Peter can also attest to, having designed dark modes for many e-commerce websites like Secrid, Mollie and Foam. 

The Build in Amsterdam designer says, “Sticking to brand guidelines is crucial. For Secrid, designing for a dark mode came naturally, as energy saving and sustainability are part of the brand's ethos. But instead of going full black, we designed a custom dark theme that matches the brand’s environment. Strategy is also key. With Mollie, we paired light and dark UI with the right tone of voice for each webpage. Dark mode suited technical details, while a light theme made the help centre feel welcoming. Foam also pulls off the light and dark combo, showcasing the brand's versatility. But dark mode is not a one-size-fits-all solution – Balmain's dark toggle stumbles upon content challenges due to product photography shot in well-lit studios, making it feel more like a gimmick than a useful feature.”

He continues, “We prioritise 'theming' over solely employing light or dark modes, harmonising colours and content with user interfaces for a cohesive experience. Brands like adidas, Mendo, and Foam have reaped the benefits of this organic approach. Above all, remember to give users control – after all, not everyone is a creature of the night!”

For Jon, all of this points to a broader pattern that stretches beyond simply the dark mode trend. “Users want control over their experience,” he says. Ranging from the desire to go dark to reduce motion or control the size of the fonts being used - for aesthetic or accessibility reasons - users are increasingly demanding personalisation options and agency over how they experience an online platform. 

“Brands need to loosen up and design to accommodate this,” he concludes -  a sentiment that Media.Monks’ Carl Feltham echoes when considering the wider implications of, and reasoning behind, the recent dark mode popularity wave. “Dark mode is another opportunity for us to design more responsibly – to think beyond just website interactions and aesthetics, and become more user-centric in what we create. And to think of the broader impact (like energy consumption) it may have.”