Booklet

author

Lisa Martinovska

Design

Let's talk about dark UI and when to use it

design

Design

|

Let's talk about dark UI and when to use it
From creator of both dark and bright apps.

1. Between 30 - 60% people feel it harder to perceive white text on black than black text on white.
Design for users, not for trends.

2. Reduce eye strain
Dark mode is perfect for apps, that users are going to use for a long period of time, as it can reduce the annoying headaches and eye strain.
Ideal for: Entertainment-related (Netflix, HBO), Gaming platforms (Steam, Epic Games), apps for creatives (Adobe Premiere, Sketch) & developers.

3. Minimalistic content
Dark mode can help users focus and get their attention on certain things and it supports visual hierarchy and information architecture.
If your app / website requires to display too much of informations & data, dark mode can get messy for users. Avoid it and bet on bright Ul.

4. Audience
Dark interface might not be the ideal thing to use, if your target audience are older people it can get hard for them to read and orient in the content. They are more used to bright websites.
Always do user research: It will help you determinate your competition & target audience.

5. Feeling of elegance
Black color is associated with elegance, mystery, prestige, formality. That's why it will work great on luxurious websites, fee. watches & jewelry.
If you don't know what color of suit to wear, black one is always a sure shot. It looks elegant, luxurious and amazing.

6. Night time
If your interface is going to be used a lot during the night time (fee. Netflix), you might consider grabbing the dark Ul assets to save user's eyes.
We all know that moment when we wake up in the middle of the night and look at our phone. The pain of brightness!

Thank you for your time!
Let me know in the comments bellow if you enjoyed this post and if you find it useful, you can share it with others!

More booklets by Lisa Martinovska

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets