Semmie Dark Mode
Doing the research
Initially, I looked into UX and UI guidelines for implementing a dark mode. The Semmie app consists of various layers, with a fixed background on which widgets or graphs are displayed.
Various online articles revealed that the background should always be the darkest. Then, you build the design with different layers, each getting a lighter shade. This way, you create hierarchy and avoid a cluttered look.
Shadows in dark mode are always a point of discussion and can make your design look unappealing, but the solution is quite simple. Use black for the shadow of, in this case, widgets for a good result.
Using pure black and white is discouraged as it is not pleasant for the eyes. It is desirable to use dark gray shades for the background and other design elements. For text, use light gray shades.
Color palette
The current color palette no longer met the requirements to also create a dark mode variant. Therefore, I experimented with the color of several components from the design system to find pleasing color combinations that maintain readability.
Not only the white and light gray shades needed to be converted to darker variants, but the different brand colors and states also needed a dark mode variant.
After some time experimenting and carefully coordinating everything, the color palette for dark mode was ready.
Designing Dark Mode
Applying the Dark Mode colors
The first set of components I worked on to get the colors right has now been expanded to the elaboration of the full screens where these components appear. This way, the complete picture came to light, and we could investigate whether the colors were actually well-coordinated and readability was good.
Testing the design
To ensure that not only my eyes could process all the information in this setup well, it was also important to test this with other people. Therefore, I chose to present the screens to several colleagues to test readability.
Overall, everyone was pleased with the readability and the design of the current setup. Some minor adjustments were made to optimize readability in certain areas. In this case, that meant tweaking some of the gray tones or using a different gray tone for certain texts.
Semmie dark mode
Implementation
Once all stakeholders and the target audience were satisfied with the dark mode implementation, all components in the design system were also designed in a dark mode variant. This way, the elaborated screens could be easily converted.
Upon completing this process, the development team could start implementing the new designs.
Development
The new colors and shades needed to be correctly implemented by the development team. Therefore, I had several meetings with Front End to discuss this and align the naming in our Figma Design System with the components the developers were creating.
Semmie dark mode
Applying the Dark Mode colors
The first set of components I worked on to get the colors right has now been expanded to the elaboration of the full screens where these components appear. This way, the complete picture came to light, and we could investigate whether the colors were actually well-coordinated and readability was good.
Testing the design
To ensure that not only my eyes could process all the information in this setup well, it was also important to test this with other people. Therefore, I chose to present the screens to several colleagues to test readability.
Implementation
Once all stakeholders and the target audience were satisfied with the dark mode implementation, all components in the design system were also designed in a dark mode variant. This way, the elaborated screens could be easily converted.
Upon completing this process, the development team could start implementing the new designs.
Development
To ensure that not only my eyes could process all the information in this setup well, it was also important to test this with other people. Therefore, I chose to present the screens to several colleagues to test readability.
Overall, everyone was pleased with the readability and the design of the current setup. Some minor adjustments were made to optimize readability in certain areas. In this case, that meant tweaking some of the gray tones or using a different gray tone for certain texts.