Valentina Ali

61 Merrion Square South, 
Dublin 2, D02 EW25, Ireland

Main Nav

Why design systems are important: A single source of truth

Dark user interfaces (UI) have become very popular with users over the last few years. We have seen some of the most popular apps and services like Android, MacOS, Spotify, Instagram, Gmail and Netflix that have been designed with a Dark mode in mind. Let&#8217;s talk about what factors should be considered when choosing between a dark UI vs a light UI and what is best for your users.
As designers, we face the dilemma of whether to use a dark UI or light UI not only when creating a product but also when using an application on your phone. We can all agree that a dark UI looks cool and stylish. However, using dark interfaces can be the wrong way to go for your users.
<img loading="lazy" width="1864" height="1234" class="aligncenter size-full wp-image-10955" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/Dark-vs-Light.png" alt="" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/Dark-vs-Light.png 1864w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/Dark-vs-Light-250x166.png 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/Dark-vs-Light-700x463.png 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/Dark-vs-Light-768x508.png 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/Dark-vs-Light-1536x1017.png 1536w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/Dark-vs-Light-120x79.png 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/Dark-vs-Light-80x53.png 80w" sizes="(max-width: 1864px) 100vw, 1864px" />
<h3>Things to consider when making a decision between a dark or light UI</h3>
Quite often, the decision to opt for a darker UI is based on personal preferences rather than a solid understanding of what is right for the product. But the decision to choose between a dark UI or light UI should be <a href="https://medium.com/@CanvasFlip/dark-ui-vs-light-ui-how-to-make-the-right-choice-5ddde9baabdb/" target="_blank" rel="noopener noreferrer">well-thought-out</a>. Instead of assuming what might be good for your product, answering the following questions might be the right place to start: What is the purpose of your content? Is it going to be a more visual product or a text-heavy one?
The background you choose for your layouts will influence the readability of your product. Readability should be considered above all else, in particular, if the text is the most important part of the content on the website or the app you&#8217;re working on. Simply put, poor readability is one of the main reasons for bad usability.
<img loading="lazy" width="2048" height="1109" class="aligncenter size-full wp-image-10967" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/better-to-read-01-scaled.jpg" alt="" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/better-to-read-01-scaled.jpg 2048w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/better-to-read-01-250x135.jpg 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/better-to-read-01-700x379.jpg 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/better-to-read-01-768x416.jpg 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/better-to-read-01-1536x832.jpg 1536w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/better-to-read-01-120x65.jpg 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/better-to-read-01-80x43.jpg 80w" sizes="(max-width: 2048px) 100vw, 2048px" />
<h3>Is it harder to read on a dark UI?</h3>
The amount of text on a website is also a critical factor for your background decision. Lighter backgrounds are prefered for large bodies of text. Especially when users are likely to stay reading for a longer period of time. That&#8217;s why text-heavy news websites and blogs usually use a white background.
A dark UI can be a good option for highly visual projects that don&#8217;t involve a lot of reading. In this case, it&#8217;s preferable because such UI brings the focus to the visuals. For cases when you want users to focus on a particular area and admire its design, a dark background will allow you to create a distraction-free layout and keep user attention on the item.
<h3>Which is better for your eyes &#8211; light or dark UI?</h3>
Although dark mode can help minimize eye fatigue, the glare from your screen can still be a problem. Dark mode can be very helpful for people who are especially sensitive to light. Yet, for others, the setting can make it even more <a href="https://www.nngroup.com/articles/dark-mode/" target="_blank" rel="noopener noreferrer">difficult to manage</a>.
Everyone&#8217;s eyes are different, people with certain kind of colour blindness may find it <a href="https://www.vice.com/en_us/article/ywyqxw/apple-dark-mode-eye-strain-battery-life" target="_blank" rel="noopener noreferrer">harder to use</a>. It may also be more difficult for people with astigmatism (when your eyes do not focus light evenly, causing blurred vision from a certain distance). They may find it harder to read white text on black than the other way around, part of this has to do with the light levels.
The decision to use dark mode comes down to how it makes your eyes feel. If you feel it helps you, go for it.
<img loading="lazy" width="1200" height="600" class="aligncenter size-full wp-image-11011" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600.png" alt="" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600.png 1200w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-250x125.png 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-700x350.png 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-768x384.png 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-120x60.png 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/BlogHeader_DarkOrLightUI_1200x600-80x40.png 80w" sizes="(max-width: 1200px) 100vw, 1200px" />
<h3>User Environment</h3>
When we talk about the user environment, we&#8217;re not just talking about where the user is using the platform, but also when. As you would probably expect, dark interfaces are ideal for night-time or evening environments, whereas lighter ones are suited for the daytime. The harsh bright light of a smartphone can cause discomfort when viewed in a darkened room, and the muted aesthetic of a dark UI will not show up as well in brightly lit areas.
The vast majority of entertainment apps tend to opt for dark-themed UI designs and for a good reason. Most entertainment-related activities occur in the evening. Netflix or Amazon Prime is usually watched at night time so we can all say that a dark UI works well in dark environments. 
<h3>What style does your target audience prefer?</h3>
The first step in designing a UI for your product is to <a href="https://usabilitygeek.com/light-dark-ui-usability-perspective/" target="_blank" rel="noopener noreferrer">know your users and their preferences</a>. Different users have different tastes and different expectations. It is essential to start with researching the competition. Research of close competitors will give you an understanding of which design solutions have already been applied by other players on the market, as well as the factors influencing design solutions.
<h3 id="toggling-themes">Toggling between dark and light mode</h3>
Some companies have adopted the approach of letting the system decide for you when to turn off and on the dark mode, basically, switching between the two when it thinks is best. Another approach is to let the user make up their own mind and have control with just the click of a button based on their needs. That said as a designer, there is already plenty to be done when it comes to designing a site in normal mode, without the addition of a whole new site too. While yes, the core elements are the same, it will still need to be re-worked and altered to sufficiently adapt to dark mode.
<img loading="lazy" width="800" height="600" class="aligncenter size-full wp-image-11012" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/daily-ui-day-15-on-off-switch-large.gif" alt="" />
<h3>When a dark UI works well</h3>
So here’s a shortlist of when a darker UI should be used:
<ul>
<li style="font-weight: 400;">Whenever there are more visuals/videos to watch and little text</li>
<li style="font-weight: 400;">When there are few elements on the design and there is a good bit of white space</li>
<li style="font-weight: 400;">When you want to watch a movie or play video games</li>
<li style="font-weight: 400;">Apps that require less effort on reading</li>
</ul>
<img loading="lazy" width="2048" height="1109" class="aligncenter size-full wp-image-10961" src="https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/netflix-scaled.jpg" alt="" srcset="https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/netflix-scaled.jpg 2048w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/netflix-250x135.jpg 250w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/netflix-700x379.jpg 700w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/netflix-768x416.jpg 768w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/netflix-1536x832.jpg 1536w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/netflix-120x65.jpg 120w, https://friprod2022bak.wpengine.com/wp-content/uploads/2020/07/netflix-80x43.jpg 80w" sizes="(max-width: 2048px) 100vw, 2048px" />
<h3>When to stay away from a dark UI</h3>
<ul>
<li style="font-weight: 400;">When your website will be used mostly in the daytime (This can be informed by your analytics and user research)</li>
<li style="font-weight: 400;">Products that most of the content is based on reading a lot of text websites or apps that include a lot of elements on the screens</li>
<li style="font-weight: 400;">Whenever you need to use different colour elements throughout the website or product</li>
<li style="font-weight: 400;">B2B websites that include a lot of components, widgets and forms</li>
</ul>
<h3>Dark or light?</h3>
A simple question with a much more difficult answer. The decision to jump into the &#8216;dark side&#8217; should be approached with care. Before making a final decision, we should clearly understand not only the benefits but also the downsides of dark interfaces and whether or not it suits the content we would like to deliver. Even when we think that dark layouts can have a lot of benefits for products and websites, designers should understand their users and take them into consideration when designing.

Author: Valentina Ali

Why design systems are important: A single source of truth

Dark UI vs. Light UI – Which is best for your users?