The JTBD method was used to develop the dark design . It helps to understand what the value of the product is for people. The team analyzed in which cases users of the corporate messenger use the dark theme. This allowed them to determine how exactly to build the interface of the new mode. Using the JTBD method, Roman developed the first versions of the interface. Then the team identified 5 key points that affect the final result.
Established depth rules All elements
The application have their own level, the so-called “depth”. The new zealand phone number library depth effect allows you to give the interface realism and focus the user’s attention on certain elements. In light mode, shadows are used for this. When creating a dark theme, it is more difficult to achieve a sense of depth. To implement depth in a dark theme, you need to adjust the colors. The darker the interface element, the more distant it will seem.
By choosing the right shades
The dark theme manages to convey a system of elevation levels. This makes the interface easier for users to perceive. The rule works equally for applications, websites, and email. 2. Reduced the contrast between black and white colors Users may find it difficult to read solid text if bright white letters are placed on a black background. This solution looks too contrasting, creating additional stress for the reader.
Therefore, designers reduced the contrast of
The background and text to reduce eye strain for users. For many, a dark theme seems like a simple solution: make white letters on a dark background, and you’re creating a content plan step by Step with examples done. But it’s not that simple. 3. Reduced the brightness of some elements For example, there is a green button in the messenger. If you use the same color as in the light theme, in the dark mode this shade of green will seem too bright. Because of this, people’s eyes may get tired more.
Therefore, for some elements
We used calmer shades. To do this, we changed the settings in the HSL parameter: brightness L (Lightness). For example, for one of the buttons, we made it 6 values cg leads lower. Here’s what we got: Changed the settings, decreased the value of L (Lightness). The image shows the button for light and dark themes The main rule: you need to check how this affects the entire interface. For example, so that when changing the shade of a button, the dialog box does not look worse.