Dark Mode is the Dark Horse in UI Design: Would You Agree?

Dark Mode is the Dark Horse in UI Design: Would You Agree?

What is dark mode?

The dark mode is a popular user interface (UI) theme that changes the traditional black text on a white background to light colored text on a dark background, which need not necessarily be black. This allows for an easy-to read, yet elegant appearance of texts such as file names on File Explorer/Finder, your posts on social community sites and your entire Gmail getup.

Tech stalwarts Microsoft (Windows 10), Google (through Chrome and Gmail) and Apple (iOS and Mac devices) offer this experience, which you can easily customize through the respective display settings options on your devices.

Dark Mode has become increasingly popular in recent years as more users are turning towards using phones in low light settings where staring at screens can get strenuous due to brightness interference from overhead lights or from the glare of the bright screen settings itself.

The use of dark mode is a great way to improve user interaction with your app or website. It gives the appearance that you're not just reading text on an internet page, but instead experiencing something tangible and real.

Dark Mode on Windows 10 as can be seen on its File ExplorerSource: howtofixwindows.com

Of course, you can take it up a notch further by customizing the accent color scheme through adjustments in the levels of contrast of your preference. Read this to find out how to choose a custom setting between the Light and Dark modes in Windows 10 for the perfect display setting for you.

Dark mode is more than just another theme

With the rise of dark mode, designers are creating apps and websites with a more intense visual experience. Interfaces in this category have backgrounds that go from light to dark and they can be used for any situation where you want your visitors’ eyes focused on what's being shown without any distraction or flashing colors popping out at them unexpectedly.

The use of this simple design concept has helped people while browsing in low-light environments, like night-time or early morning, to be able to see what they're doing without compromising their eyesight due to excessive brightnesses from the screen glare while still being aesthetically pleasing at first glance.

I think we can all agree that life is better when everything has its own unique tone of voice and attitude, from happy-go-lucky balmy days to stormy dark nights to when stars twinkle above us like tiny little diamonds shining enough to light up our world as if they’re right above our heads.

In all sincerity though, dark mode isn’t just some cool-looking theme that will swag up your device’s screen for instant gratification. There’s a well-thought out partnership of business and scientific logic at play here, something that should surely be intriguing for both design nerds and marketers who are reading this article.

Let’s take a look at some of the points that back up this approach:

  • It’s classy: The soothing, dark backgrounds of websites provide an edgy, modern feel that can be both elegant and unorthodox to draw curious minds to them. The dark colours are often combined with bright colors to create images for websites, making them stand out on darker screens so you won't get lost in your browsing experience.
  • It can amplify your brand identity: Your brand should have a style that is unique and memorable and dark theme can provide just that. With vibrant colors and bold graphic designs, a dark background stands out prominently against lighter hues in this type of design that complements brands with light color patterns beautifully because it makes them stand out more.
  • It hooks in onlookers, instantly: The background of your website can be an expressive medium to drive user interest. The use of a dark color scheme or image, as opposed to lighter hues, could help users focus on what you want them to see.
    These include text clarity in boldface typefaces for headlines; left aligned blocks after paragraphs so they stand out against these backgrounds without being distracted by anything else going on around it (ease-on); white space between sentences rather than tight blocking throughout.
  • It’s easy on your eyes: Dark mode UI design is supposedly the key to longer hours on your device’s screen as it may reduce eye strain and cut down blue light exposure. While not scientifically proven, many users feel dark mode is the reason behind a more comfortable viewing experience than light mode during extended hours spent working or reading online.
  • It is energy efficient: A study by Purdue University researchers revealed that switching from light mode to dark mode at 100% brightness saves an average of 39%-47% battery power on your smartphones. But, there’s a catch!
    Dark mode will work on the relatively newer OLED (organic light-emitting diode) display-based smartphones and not the older versions with LCD (liquid crystal display) screens. That’s because LCD screens depend on external backlight for pixel illumination while on OLED displays every pixel brings its own illumination without the need for external backlight.
    Another reason not to cheer so much is the apparently not so obtrusive battery life extending ability that is attributed to dark mode, not by a long shot at least.
A common discussion (debate) among design enthusiasts is the topic of “dark mode vs light mode”Source: nngroup.com

Dark mode is not actually new

The debate surrounding the benefits of dark mode and light mode when they are pitted against each other could very well never end. But, for those who quite abruptly found themselves drawn to this subject, we’d like to take you through a short but sweet trip down memory lane.

Why glance back at the past when dark mode is such a fresh UI offering you ask? Well, because you see, it’s not really a new phenomenon as you may have thought and as you will soon enough find out.

Dark mode was already very much prevalent as part of the CRT (cathode-ray tube) computer monitors as early as 1973. That’s when the very first monochrome CRT monitor was introduced as a component of the Xerox Alto, a US$32,000 price tag bearing computer from Xerox PARC, but nonetheless still a personal computer.

These monochrome CRT monitors, which would usually stay dark under normal circumstances, would spark up on being struck by electron beams traveling in lines from electron guns, as the thousands of blue, green and red phosphor dots would light up consequently and bring the screen to life.

The workings of a CRT monitor explainedSource: learnersplanet.com

With the introduction of the LCD (liquid-crystal display) computer monitors - the Eizo FlexScan L66 being one of the earliest offerings in the mid 1990s - at prices that were comparatively lesser than CRT monitors, a new wave of viewing technology rushed in. Of course, that was not the primary reason behind the rising popularity of LCD monitors.

As the world moved into a new millennium, discerning buyers began weighing the pros and cons of CRT monitors versus LCD monitors to make the right choice. What came about from these surveys was a gradual decision to step away from CRT monitors, which were way bulkier and heavier, emitted some serious heat and consumed a lot of energy too.

And even though CRT monitors did have their fair share of advantages, including immunity to dead pixels and input lag, they went out quietly into a technological horizon that promised much wonders for consumers in the future. And the cycle continued with LCD giving way to LED, which in turn gave way to OLED, and so on.

So, yes, in a way the world, or at least a sizeable population of it, is simply reverting to a dark mode that already existed so long ago, instead of what the uninitiated would assume as stepping into a new UI phenomenon.

The effect of dark mode on UX/UI design

The all-dark aesthetics that is the dark mode has lately become increasingly popular, thanks to leading tech companies adopting it into their designs. Some of the trendiest instances that can be seen sweeping through the app and UI/UX world recently include Facebook, Instagram and almost all Apple products.

The shift towards darker color palettes has been a steady progress when you look at certain innovative steps from entertainment content providers, such as Netflix's Dolby Vision initiative, which is hailed as a game changer in viewing experience. 

Yes, the dark interface is everywhere, but it’s not for everyone. I mean I do feel inclined to call it a bold step in design because there are so many ways you can play with the colors and element placement in order to produce something unique - just like how apps were made before their time.

You know what I love about dark interfaces? They're cool and trendy, but they also have their limitations. A good example would be how Instagram redesigned the app in 2019 with darker colors for night-time viewing. Click here to find out how to use Instagram’s dark mode on iOS and Android devices and how to save battery life while at it.

It's an interesting development that was well-received by users. However this design choice works only because of the platform’s strong emphasis on sharing photos and videos that are high on contrast, which makes total sense since most people take pictures outside in low light conditions anyway.

But as much fun as these innovative design ideas may be from a branding perspective, let me tell you something - it probably won't work anywhere else. For all we know, these interfaces might never replace traditional white backgrounds that users have grown so accustomed to over the years.

These dark interfaces are a perfect fit for brands and companies that want to stand out from the rest. They work well in both apps and websites, but you should be careful about how much of it is on your website because users have different expectations when they visit it, compared to other online platforms where this style might seem overbearing or too intense, especially if their monitor maxes out at something light-colored like white rather than black.

The effects of dark mode on UX/UI design is multi-pronged. Business owners and marketers, in particular, should be more careful before applying it to their products, at least when it doesn’t serve any purpose in what they have to offer to the users.

UI design ideas and user needs can be difficult to balance when developing apps. So, adding a dark mode may not always be worth it for MVPs, especially in cases where input errors could have big consequences on the functionality of the app as a whole.

Of course, it’s anyway never easy to get a balance between your users and the dark mode. But, you should consider this option if:

  • Your product has complex visuals such as photo manipulation apps or graphic design software programs.
  • The app allows for online transactions because entering data without full comprehension could lead to errors, which may have damaging consequences on user experience.
A workable dark mode design lets users toggle between dark and light modes easilySource: uxplanet.org

Different strokes for different folks

If you ask us, it’s a matter of personal taste really. What some might agree to as functional could be seen as a hindrance by others. Although, in all honesty, it all boils down to the factor of aesthetics in the end, simply because it looks different and elegant.

What marketers and business owners need to understand is that the goal of marketing is to make a product or service desirable. And, when it comes down to the decision between light and dark modes, there are many factors that go into this choice, such as what your audience prefers (light vs dark), how users interact with certain apps/services on mobile devices, etc.

But, ultimately each brand should create their own strategy for deciding which option will give them stronger results based off these needs. In today’s day and age of technological fixation, where millions of users have downloaded various apps from various stores (App Store, Google Play & Microsoft Store), keeping a close eye on download trends can help you get better acquainted with user preferences.

I have to say the “dark side” is indeed powerful and compelling, but it's not for everyone. For those that do choose to venture in the direction of either ‘Darth Vader’ or ‘Queen Amidala’ there are many benefits from optimizing your marketing with a friendly tone to incorporating design features like dark mode, which have been adopted by several companies as an option available on their apps and services. Just make sure you offer what people really want.

Crossing over from light mode to the dark side is very temptingSource: giphy.com

Tips for a desirable dark mode design

Dark mode is the new design direction for digital products and marketing materials. You might not be ready to go fully dark right now, considering the fact that a change in design of such magnitude can be a huge shift and a sudden one at that, but you'll find that it's not nearly as difficult as it seems like.

While there are still some steps in order for your business or products before implementing this new feature onto all of your marketing materials (and remember, don't get overwhelmed), here is what else you should do to make users look forward to your designs.

1. Dark mode doesn’t necessarily mean all black

You can have a dark theme without making it all black. In fact, that high contrast can be painful and overwhelming for the eyes. Using other colors to create softer contrast is much safer for your users' eyes.

One way you might want to avoid this discomfort? Choose your palette wisely; instead of using true black as an accent color or secondary layer in design projects like websites (which will make everything else look darker), use something lighter such as dark gray, which don't obscure any visual detail when they're included with other colors.

Dark gray can be a sensible alternative to black because it can be both easier on the eyes as well as aesthetically a better option than pure black.

Google desktop search in dark mode with dark gray color accentsSource: theverge.com

2. Throw in the right amount of contrast

This is a very important one - at all costs, meet legibility standards. And, one way of doing that is maintaining the right amount of contrast.

When designing dark mode / dark theme products, it's important to consider the contrast ratio. Dark enough that the light-colored text is easy to read and light enough that it can make all of your components come together as one cohesive unit without being too much or not enough in terms of color differences from their surroundings.

Not only does this help with readability but also creates an atmosphere that's easy on the eyes while reading in dimly-lit areas or at night-time when you have trouble seeing what's on screen due to low light levels. Here’s a useful guide on contrast ratio considerations that can help UX designers in accessibility design.

3. Go easy on saturation

Saturated colors are vibrant and look great on light backgrounds. When you put them in a dark setting, however, they can be difficult to see because of their saturation level, causing readers to strain their eyes trying to figure out what is being said or shown.

The more saturated a color is, the purer it will appear. Slight changes in hue can make all the difference between reading colors and making them hard for someone else to see clearly on dark backgrounds or bright lights.

For light-colored themes, use desaturated variant of your primary and secondary color to avoid over-contrast that may cause eye strain in dark theme interfaces or screens where the user needs greater contrast for reading purposes. Lighter tones will provide appropriate level of legibility without causing unnecessary discomfort from too much vibrating white space around text elements like buttons and icons, which is common when using darker hues such as black.

Using desaturated background colors improves legibility and readabilitySource: uxmovement.com

4. Pick the right colors for your brand

It’s important to choose the right colors for your background so that you don't end up sending mixed messages about your brand. The color of the background as well as the layers plays as vital a role in not just conveying your brand message but driving emotions as well.

For example, a moderately bright yellow layer on a light background could give your webpage an amiable and a livelier look, while applying the same foreground color on a dark background would sharpen up the appearance and give it a more professional look.

Consider the mood of your brand before deciding on a dark UI design. It's important to consider how different background colors might impact user experience and perception, especially if you're new in designing an app or website.

Make sure it's clear what kind of mood you want to set across your site when you’re deciding which palette works best for your brand. After all, it’s clearly about driving or evoking the right emotions in your users to make sure they can relate to your message and connect at a deeper level.

5. Create depth

Enhance your website design with a simple technique that will catch the eye of anyone that visits your app or website. Create an appealing order and visual hierarchy by making different elements stand out, such as highlighting or illuminating them for emphasis on light backgrounds.

A dark mode UI is easy to navigate when you have a clear understanding of what each element is expressing. In a light theme, shadows are used as an elevation indicator that tells users which way up something should go and how far away it is from our viewing point.

But this doesn't work in darker environments where we need other cues such as coloration or illumination instead to help us find our way around corners easily, even though both approaches will still produce beautifully lit levels.

But while these visuals may be helpful at indicating elevations (especially if there's plenty going on everywhere else), they lack contrast compared to bright modes like "Daylight Mode" offered by Apple Watch Series 3 cellular models.

An example of visual hierarchy created effectively in website designSource: speckyboy.com

6. Don’t impose the dark theme on your users

No matter how much you may be convinced that taking the dark theme path is best for your brand, your users might not think likewise. So, it would be wise that you give them the benefit of choice by not imposing the dark theme on them.

Give your users the option to revert to light mode in case they find it uncomfortable to use your app in the dark mode. A simple toggle UI control should do the trick and convince your users that the control is in their hands, which is definitely a win in user experience goals.

And finally, the most important step…

 

7. Don’t forget to test run both light & dark themes

For maximum chances of success, it’s highly recommended that you test run your design in both light and dark environments to find out which would work best for you. 

You'll want to preview your product in both daytime and night-time conditions, especially under dimly-lit settings. Setting your design under luminous lighting is best for this purpose because it has a warmer look than natural day light does (think chandeliers over an evening table).

Collect the test results and accommodate any changes on your design based on the user input if necessary. Here are 15 of the best usability testing tools that you can make use of to test your design and assure satisfied users.

Conclusion

Designers need to approach the idea of using a dark-themed UI with care; there’s more than just aesthetics involved. A poor choice can be aesthetically offensive and difficult for users on different devices due to the limitations in contrast ratio, making reading or browsing a less enjoyable experience.

However, when done right, a strong rationale behind your aesthetic choices coupled with careful consideration into how they'll look across multiple platforms will offer stunning effects while still keeping people engaged.

Great design isn’t just about how it’ll look like, but what purpose it serves and if it will work for the user. A dark UI can be stunning when used correctly in an engaging way with strong reasoning behind why you took this path.

If you’re looking for a way to make your product or website stand out with a dark-themed UI, contact us. We have precious experience in designing with dark UI themes that are guaranteed to not only appeal aesthetically but also help elevate your brand image and create trust in your customers.

0 Claps
Comments
Share
Subscribe

Recent Insights

0 Comments