.gif)
Turn the lights off — designing App for dark mode
Overview
Turn the lights off — designing for dark mode 🌌🌒
It’s not just about flipping colors and inverting white to black
With the new launch of iOS 13, Apple introduces Dark Mode. A dark color scheme which gives the spotlight to the content as it rests on the dark background.
At Wego, we want to give you not only the best deals for your travel needs but also the best experience of doing so—we want to make it easier and better for your eyes too.
What’s up with Dark Mode?
There are various reasons why Apple decided to bring in the dark mode to iOS. Here are some benefits of the dark mode:
- It makes the screen easier to see in low-ambient lighting, for example late at night or early in the morning.
- It makes the contents shine while focusing less on the interface.
- The dark mode could help improve battery life.
Why did we do it?
Designing the dark mode version of your app takes a lot of time. But we are convinced enough that it is worth the effort to do it:
- It gives us a chance to review the whole design library
- We want to deliver the latest features to our users
- It looks cool
My contribution
Product strategy User research Product design
The team
1 × product manager 3 × UI/UX designer 3 × engineers
Year
2021
Process
1. It’s not about inverting White to Black
At the beginning of the project, we thought it would be about flipping background and text colors. It’s not, and it is more complicated than that. Steve Schroger from Refactoring UI explains it best on his design tweet series:
When implementing dark mode, don’t throw away the visual cues in the light version by naively inverting the color scheme.
🔥 Tips: Set up the foundations
As Steve said, by naively inverting the colors you will throw away the visual cues you have on your design. You can avoid this by defining the most essential colors, we call it the foundations.
It doesn’t need to have all the colors, just the colors that you will use often would be enough. What worked for us at Wego, was to come up with:
- Background Color
- Card / Foreground Color
- Primary Text Color
- Secondary Text Color
🔥 Tips: Working with components
If you have a design library, try to duplicate all the components and compare them side by side. This way you can make sure that the visual cues are not gone. It is also easier to make sure you get the right colors this way.
🔥 Tips: Working with shadows
Our initial approach is to use a light-colored shadow for dark mode. However, to no surprise, it looks really bad and does not blend well with the color themes. For shadows, you can try two things:
- Use color contrast to differentiate between the foreground and the background
- Use #000 (the darkest black) as the shadow color, don’t use it as the background color
Both of them would work fine, depending on the contrast between the background and the foreground. However, in our case, using both #000 as the shadow color and using a high contrast foreground works the best.
🔥 Tips: Get flexible. You should be able to switch to other colors that look better on dark.
As quoted by Nick Babich of UX Planet, the colors you use on dark mode does not have to follow the ones you have on the light mode. Because colors are perceived differently depending on the background color.
A dark mode does not (always) have to be derived from the existing light theme.
2. Working with 3rd Party Images
If your product has lots of 3rd party contents, you might want to check them down to every detail. As we are a travel company, we have lots of partner logos in our apps. And when you work with other companies, you realize that not every one of them would give a logo file that is easy to work with.
🔥 Tips: Use this chance to review all the partner logos and do a refresh on the outdated logos
There is no easy way to get out of this situation other than checking them one by one. Some logos are invisible on dark backgrounds, some does not blend well, and we even found some company logos that have ceased to exist.
However, it doesn’t mean that it is all that bad. It’s a good chance to do a proper check on those logos — something that we should’ve been doing for a while but kept on saving it for later!
🔥 Tips: Don’t forget to check the company’s brand guidelines
This is the one thing that you should do when working with 3rd party logos. Make sure you don’t mess with the logo and violate their guidelines.
So… Dark or Light?
In the end, it does not matter whether your app is in dark or light mode. It is all about the experience and the value that you give to your users. Just as designers we design to make a helpful and delightful product — I hope you find these tips useful for you and your team!
