Dark UI Design: A step-by-step guide

With the growth of video streaming and gaming services, dark UI design has been taking off. Users and designers alike are drawn to the mesmerizing colors, sharp lines, and clear separations. Maybe you’re a designer who is sensing the popularity, and would like to add dark design to your arsenal for later. Whatever your purposes, this short guide should serve as a convenient starting point.

Before you elect to implement a dark theme, you need to consider how this will affect your users in particular. People interact with a UI in order to process and change information, so the relationship your users have with your data is crucial to determining if a dark theme is the right step. Consider these four questions to ask before making a decision:

1. Do I need to show my users a lot of data?
2. Are there many interactive elements on the screen?
3. Will the UI be viewed in bright light?
4. Would a dark UI affect accessibility for my users?

If you answered “yes” to any of these questions, you may want to SWOT your idea before moving forward. There are specific use cases where a dark UI can really add some depth and dimension to your design, however, you should always keep in mind that your UI is about your users, and every user base is unique. Make sure this is something they want.

With that said, here is a basic guide on how to start designing a dark theme:

1. Set your elevations

A dark theme can really be thought of as a “low-light” theme, and just as with a “high-light” theme, its variations are consistent with the properties of light. As a result, while high-light themes rely on shadows for elevation, low-light themes use transparencies, since depth is difficult to determine in the dark.

Start with three levels of elevation: 0, -1, and 1. You can always add more elevations, but take care not to overwhelm your users with depth.

2. Choose your primary color