8 Tips for Designing Dark (UI) Themes
8 Tips for Designing Dark (UI) Themes 🌑
Courtesy of @tomkoszyk
⠀
When done well, dark themes have many benefits 🎆
⠀
Dark UI reduces eyestrain and battery consumption (of our devices).
⠀
They make it easier to read in low light, and basically… They look so neat!
⠀
But there’s a catch ☝
⠀
Dark colour palettes are perceived differently by human eyes than the light ones.
⠀
As a result, designing dark UI is generally harder.
⠀
I decided to put together a list of tips!
⠀
I based those on Material Design Guidelines and Apple HIG for dark themes and my own experiences from designing Holo Music (btw. Holo Music comes with a light and dark theme since before it was trendy! 😁
⠀
I hope this shortlist will help you in your future design projects. You’ll learn about:
1️⃣ The contrast in Dark UI
2️⃣ Using accent colours
3️⃣ What are the psychological differences
4️⃣ How to add dimensional feel too dark UI
5️⃣ What to read next
Benefits of using dark UI
- Reduce eyestrain
- Easier to read in low light
- Reduce battery consumption
- They just look so neat!
Avoid pure black
With dark themes, we want to avoid extremes. The black colour is one of such extremes. Apart from boosting eye strain, it also limits us as designers.
Example:
Elevated elements tend to cast shadows. Shadow is always darker than the background on which it’s casted. Good luck with finding a darker colour from black!
Avoid Extremes Avoid pure white
The default #fff would visually “vibrate” against dark backgrounds. As well as boost strain on the eyes.
- Google Material Design recommends using a slightly darker white (up to 87% opacity).
Build dimension with light Light defines proximity
The closer the layer is to the user, the lighter it should be. This how the human eye perceive dimension.
This is because in the natural environment light source is cast from above. Right?
Go dark Limit the usage of colours
The majority of the space in dark UI should be dedicated to dark surfaces. In the same time, colours should be used intentionally to highlight key elements (eg. buttons). This is important for two reasons:
- Saturated, strong colours are hard to read or distinguish on a dark surface,
- While desaturated, light ones are too bright and distort perception of the dark ones.
Revise contrast
Light objects on dark backgrounds are perceived differently than dark on light.
For example, fonts may seem to be bolder.
You should always re-check the colour contrasts. There should be more contrast dark UI than in the light one.
Sometimes you may also want to change the shade of an accent colour, or the colour itself!
Take the advantage
Remember!
Dark and light themes will always evoke different emotions.
Instead of trying to fix that, it’s much better to take advantage of that for your product’s identity.
Bonus — 4 tools that may be useful in your designer way:
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Designmodo — a timesaving tool that helps create websites and email builders designed for developers, designers, marketers, and non-tech users.
Leadpages — lets you build beautiful, high-converting websites, unlimited landing pages, pop-up forms you can add to your other websites.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.
