Why Use Dark Mode At All?
We are on our phones almost constantly. The average person spends over four hours a day on their device and scrolls the height of mount Everest every year. These stats aren’t particularly shocking, and it only takes a walk down the high street or a journey on public transport to see almost everyone with their necks bent, staring intently at screens. We use phones for everything from phone tickets to entertainment, meaning we need them at all times. This is where dark mode can help… [pullquote]The average person…scrolls the height of mount Everest every year[/pullquote]It Can Reduce Eye Strain
Apart from the aching neck and slight cramp of the thumb, being on our phones so often is also bad for our eyes and it’s predicted 2 in 3 will experience eye strain caused by excessive phone use. Dark mode is here to help with this, making the screen easier to see in low lighting such as in the night or early morning. It can be a lot easier on the eyes, causing less strain and is better in the long run.It Can Save Battery
Dark mode has also been found to improve battery life. According to a recent test conducted by PhoneBuff, iPhone batteries can be extended by up to 30%. This is only true, however, if users have an OLED screen. This is where the pixels that are black draw no power, whereas the LCD counterparts draw the same amount of power no matter the color they are displaying.You Can Play Around More With Designs
By implementing dark mode to a site, you can have a play around with different features. It’s about a lot more than just inverting white to black. You can play around with the colors and the look side by side and see which looks better. It could mean you are inspired for certain changes with the light site too.Things to Consider
Switching to dark mode isn’t a magic fix, and it isn’t right for every project. It’s important that you consider the use of dark mode carefully.Focus on Your Content
Dark mode puts more of an emphasis on the content areas of your interface, allowing certain content to stand out, while the surrounding areas fade more to background. It’s important to remember this when designing for dark mode and ensure the content which will be at the forefront has a strong focus.Test Your Design in Both Light and Dark Mode
We’ve already established you can’t just invert your colors to make a site work in dark mode. But you can’t forget to test your sites in both modes too — after all, you don’t want the two interfaces to be so aesthetically different you can’t tell they are the same site, or that users get confused.Work Out Your Color Palette
Ensure your default color palette is defined by function and not by color — don’t be afraid to add in new colors that work better. In dark mode you will be working with a color palette that has lighter foreground colors and darker background colors. Find a soft color scheme that works well and doesn’t have too many colors to it — it’s best to keep it simple. If you need a white background, ensure it is a slightly darker and softer white, so it prevents the background from glowing against surrounding dark content. Best practices recommend using a contrast level of at least 15.8.1 between the text and background. [pullquote]Light text on a dark background can appear bolder…use a lighter weight for dark mode[/pullquote]Don’t Forget The Text
You need to ensure the text is still legible if the user turns the screen brightness to its lowest. After all, you want it to be dark, but still usable. Check if it has enough contrast and certain elements that are meant to be distinguishable from each other, are. Ensure the primary and secondary colors are separate from each other and easy to separate. Light text on a dark background can appear bolder than the other way around, so you may want to use a lighter weight for dark mode — experiment and see what looks best.Ensure Users Can Switch Between Regular and Dark Mode
Some companies have adopted the approach of letting the system decide when to turn off and on the dark and regular theme, switching between the two when it thinks is best. This can be frustrating for the user and leave them not wanting to use the site or programme anymore. While it may be designed for optimum usage at certain times, let users make up their own minds and have control. Some may prefer to use dark or light mode all the time and not want to switch around; allow users to turn the dark theme on or off easily and based on their needs. Make the switch easy to find or users may get frustrated and close the site.Ensure the Target Audience Are Kept in Mind
Before jumping straight into re-building an interface to the new dark-mode, it’s important to consider who the users are. If they are a younger and more chic audience who are on their phones more during the day and evening, dark mode is probably a good idea, however if they are older and more traditional, they will probably prefer the more “paper-like” interface. Do some research and figure out who uses the site and what for. Dark modes tend to decrease readability so is less likely to do well if the site in question is a blog or news piece. If it has simple content or is focused heavily on images or video, dark mode works well – Netflix is one of the best examples of this.Pitfalls of Dark Mode
Dark Mode Doesn’t Work Well For All Sites
If the site you are designing is a very text-heavy or data-heavy or contains a vast variety of elements such as text, images, data and dropdowns etc. it can be a challenge to design. The main reason for this is trying to maintain a sufficient contrast which works well for all elements. Generally, all colors (except the palest, which are hard to see) work on a white background, whereas a dark background greatly eliminates the amount you can use.Dark Mode Isn’t Always Better Eyes
While it can be better for those using regular mode in situations were light is softer (such as when you are going to bed or waking up), it has been found dark mode doesn’t always fix the problem. In bright light conditions the text can appear washed out which actually increases eye strain.Dark Mode Might Not Align With Existing Branding
Due to the fact you need a more restricted color palette and many logos are designed with a white background in mind, dark mode might not align with a company’s existing branding. When the platform has many elements, this can be challenging, and the site may seem very inconsistent when switching modes.Dark Mode Doubles Your Workload
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, core elements are the same, it will still need to be re-worked and altered to sufficiently adapt to dark mode. This is a whole extra segment to the job which might not have been accounted for. Featured image via Unsplash.WDD Staff
WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.
Read Next
15 Best New Fonts, October 2024
Welcome to our roundup of the best new fonts we’ve found online in the last four weeks. In this month’s selection we…
By Simon Sterne
3 Essential Design Trends, November 2024
Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…
20 Best New Websites, October 2024
Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…
Exciting New Tools for Designers, October 2024
We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…
15 Best New Fonts, September 2024
Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…
By Simon Sterne
3 Essential Design Trends, October 2024
This article is brought to you by Constantino, a renowned company offering premium and affordable website design
You…
A Beginner’s Guide to Using BlueSky for Business Success
In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…
By Louise North
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…
By Simon Sterne
20 Best New Websites, September 2024
We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…
Exciting New Tools for Designers, September 2024
This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…
3 Essential Design Trends, September 2024
September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…
Crafting Personalized Experiences with AI
Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…
By Simon Sterne