Dark UI, Bright Future: Designing Health-Conscious Websites

Dark UI, Bright Future: Designing Health-Conscious Websites

This is a bit of a tangent from what I normally post, but it’s an important consideration for companies—and for us creatives and entrepreneurs who spend so much of our time in front of screens. Let’s talk about dark UI, blue and red light exposure, and why more businesses need to prioritise their users' health when designing their websites.

The Science of Blue Light and Red Light

Blue light is ubiquitous, emanating from our phones, laptops, televisions, and LED lighting. Its impact on health is significant and often overlooked. Blue light disrupts natural circadian rhythms by suppressing melatonin production, making it harder to sleep (NIH study). Prolonged exposure also contributes to digital eye strain, fatigue, and even hormonal imbalances.

Studies also reveal that blue light affects dopamine and testosterone levels, crucial for motivation, energy, and overall health. According to Dr. Roger Seheult from MedCram, the absence of red or UV light, coupled with the dominance of artificial blue light, exacerbates these issues (Dr. Seheult on red light therapy).

Traditional light sources, such as incandescent bulbs, candles, and natural sunlight, emit a broader spectrum of light, including UV and red wavelengths, which play a restorative role in human biology. These wavelengths counteract the effects of blue light by supporting mitochondrial function and boosting dopamine levels (Science Direct).

In contrast, LED and crystal lighting often lack these beneficial frequencies, further compounding the problem. This imbalance leaves us more susceptible to the negative effects of artificial lighting (Frontiers in Neurology). It’s time we addressed these impacts by taking proactive steps with our digital design and use choices.

How Companies Can Do Their Bit

  1. Introduce Dark UI Options
    Allow users to switch to dark mode on your website or app. While this doesn’t eliminate blue light entirely, it reduces overall exposure and is particularly effective in low-light environments. Additionally, consider integrating red tones where appropriate, though this might require creativity to align with your brand’s palette.
  2. Utilise Warm Tones in Design
    Replace stark whites and blues with warmer hues. Warm tones are less straining on the eyes and emulate some of the calming effects of red light, promoting a healthier and more comfortable browsing experience (Eye comfort and screen design).
  3. Incorporate Red Light Filters
    Introduce software or tools that adjust screen colours based on the time of day. Applications like f.lux and Night Shift (macOS) reduce blue light exposure during evening hours. Websites could adopt similar features, ensuring users aren’t overstimulated late into the night (f.lux research).
  4. Educate Users
    A well-informed user is an engaged user. Share insights through banners, blog posts, or updates explaining why these features are offered. Highlighting the benefits shows your commitment to customer well-being and builds trust (User engagement case studies).
  5. Minimise Eye Fatigue Through Design
    Simplify your UI by avoiding excessive animations, flashing elements, or high-contrast patterns that can strain the eyes. Clean, thoughtful design not only improves usability but also contributes to a more pleasant experience (Smashing Magazine on UI principles).

Why It Matters

Taking steps to reduce blue light exposure isn’t just an ethical decision—it’s a smart business move. Customers increasingly value brands that prioritise their health and well-being. Implementing these changes signals your commitment to innovation and care, fostering loyalty in an ever-competitive market.

There’s an even bigger picture: we need to spend less time on screens altogether. Encouraging users to step away and seek natural sunlight can have profound effects on their health. Sunlight exposure provides a spectrum of light, including UV and red, that restores balance, supports energy levels, and promotes overall vitality (NIH on sunlight exposure).

So, while dark UI and health-conscious web design might seem niche, they represent a meaningful shift toward a healthier digital environment. Let’s not just create visually appealing websites—let’s create spaces that genuinely work for the people using them so we all have a bit of work to do. We are reviewing the simplest way to do this across our assets.

 

Managing blue light exposure is crucial for eye health and sleep quality. Here are some applications across various platforms that can help reduce or eliminate blue light:

Desktop Apps

f.lux: Automatically adjusts your screen's colour temperature based on the time of day, reducing blue light exposure in the evenings.

Windows/macOS/Linux
Iris: Offers extensive control over your screen's colour temperature and brightness to protect your eyes.

 

iPhone Apps:

Night Shift: Built-in feature that shifts your display to warmer tones during evening hours.
Activate via Settings > Display & Brightness > Night Shift.

Night Shift Mode: Adjusts your screen's colour temperature to reduce blue light emission.

Android Apps:

Twilight: Filters blue light from your device screen, adapting to the time of day.

Blue Light Filter – Night Mode: Reduces blue light by adjusting the screen to natural colours.

Night Light: Built-in feature that reduces blue light emission by adjusting screen colours to warmer tones.

Activate via Settings > Display > Night Light.

Implementing these tools can help mitigate the adverse effects of blue light exposure, promoting better eye health and sleep quality.

 

FOR MORE SCIENCE ON RED LIGHT
Associations of Outdoor Temperature, Bright Sunlight, and Cardiometabolic Traits in Two European Population-Based Cohorts (Journal of clinical endocrinology and metabolism) | https://pubmed.ncbi.nlm.nih.gov/30759...
Signatures of Mitochondrial Dysfunction and Impaired Fatty Acid Metabolism in Plasma of Patients with Post-Acute Sequelae of COVID-19 (Metabolites) | https://www.mdpi.com/2218-1989/12/11/...
Optical stimulation of mitochondria reduces blood glucose levels (ResearchGate) | https://www.researchgate.net/publicat...