<aside> đź“ť Design Brief
Create & design a dark mode theme for Spot, my final year major project. You can read about the full project development here.
</aside>
Dark mode has become increasingly popular over the last few years with most apps and operating systems, such as iOS, Android etc, introducing it to their users. It is one part of UI design that I haven’t had a lot of opportunity to experiment with when designing apps/websites. However, I have challenged myself to take a few screens from my major project app and create a dark mode version of the UI.
Before starting this design, I looked at the Material Design Guidelines & Apple’s Design Guidelines for designing dark mode. I found reading these guidelines really helpful.
I also found a few other helpful articles including the below. Some points to keep in mind when designing dark mode screens include:
After looking at a number of articles, including the ones above, I used Dribbble to find some inspiration images. This was helpful as it gave me the opportunity to look at example UIs and see how I can incorporate the dark mode colours into Spot’s app. I also looked at some existing apps which offer a dark mode theme to users.
https://dribbble.com/shots/14976792--Exploration-Skateboard-Video-Platform-Mobile-App
https://dribbble.com/shots/17631662-Online-Learning-Platform-Dark-Mode
https://dribbble.com/shots/17986444-Hotelyn-Dark-Mode-Hotel-Booking-App
Tripadvisor
JustEat
After completing the above research, I moved on to creating the dark mode designs. I had a clear idea in mind of how I would like the chosen screens to look. As the main brand colour doesn’t work with a dark mode UI, I will be using a colour from Spot’s secondary colour scheme to replace the green that was used in the original designs. The colour I used to replace the main brand colour works well with the darker UI and stands out to clearly indicate certain actions or functions to users.
Top row - Original UI designs, Bottom row - Dark Mode UI Designs
**Click the link to view the designs ➡️**