Any mistakes in these elements can result in a poor user experience.
The following tips should help you when designing your first dark UI.
Dont Use Pure Black
When designing a dark UI, avoid using pure black backgrounds.
Its better to use a dark shade of gray.
For example,Googles material design themerecommends the color #121212.
A black background combined with white text can have too much contrast and cause eyestrain.
Darker shades of gray instead can show shadows, depth, and elevation easily.
If youre looking for font options, dont forget there areplenty of sites that offer free fonts.
These styles make the page difficult to read as you’re able to see from the screenshot below.
Below are some appropriate styles you could use instead.
And here is the resulting page:
4.
Avoid Saturated Accent Colors
Saturated colors can be too bright and blurry on dark backgrounds.
Instead, use colors that are less intense and muted.
This way you create a user interface that has visible text.
A tool likecolorableis helpful for generating color combinations that follow accessibility guidelines.
When used properly, negative space can help you highlight important UI elements and make text easy to scan.
Sufficient spacing can also make the design cleaner and more modern.
Take, for instance,Apples landing page.
However, because of the dark backgrounds, shadows are sometimes hard to see in dark UIs.
you could achieve depth in a dark UI by using multiple shades of dark colors.
They can also minimize eye strain and conserve battery life.
Generally, dark UIs are best suited for brands that prioritize luxury, prestige, minimalism, or mystery.
They can also be a great choice for dashboards and visualization tools.
