8

Learn to Design Dark Mode from Spotify, TikTok, Robinhood, Dropbox, Medium, etc.

 3 years ago
source link: https://uxplanet.org/learn-to-design-dark-mode-from-spotify-tiktok-robinhood-dropbox-medium-etc-ea1d68c6c30
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Learn to Design Dark Mode from Spotify, TikTok, Robinhood, Dropbox, Medium, etc.

Learn to design better Dark Mode UI from Big Apps.

Dark Mode or Theme whatever you say, I love it. I love dark mode because it saves some of the precious battery that I used in doing something great, Watching another youtube video, etc. Anyways besides the Dark Mode makes the app look cooler and more beautiful, it also helps in better UX just like by saving battery and reducing eye strain. But, A BIG But..

If you ever mistakenly did something up or down it’ll make your app look like some bad piece of design. and I hope you didn’t want that therefore it would be great to read some points for better designing dark mode.

1. Consider your brand

Dark backgrounds aren’t for every brand, therefore just think about it for a sec and ask yourself do I really need a dark mode, does our audience use it too long or is it good to be a light mode app. I think being a light mode app is not bad when it saves you some bucks and time.

as well as there are also some apps like Spotify which don’t have a light mode you can think like that too, there is nothing bad in being all black or dark.

2. Avoid Pure White

1*z9_S8n8gJmsGMvsm5QB1sQ.png?q=20
learn-to-design-dark-mode-from-spotify-tiktok-robinhood-dropbox-medium-etc-ea1d68c6c30

Don’t use pure white for god sake or for your user's eye's sake because it’ll hurt their eyes so bad that they will sleep with the text showing right there in the dark even when the eyes are closed. The best way is to reduce the contrast a little bit both with black and white.

The more black or the white it’ll hurt as it’ll become hard to focus. This is one of the important points you have to notice while designing dark.

3. Avoid Heavily Saturated Colors

1*oaFi-Im6GY8p2_S8Mnrx0A.png?q=20
learn-to-design-dark-mode-from-spotify-tiktok-robinhood-dropbox-medium-etc-ea1d68c6c30

Saturation is good as well as bad at the same time inside the dark world of UI design, just because both high or low saturated colors will hurt the eyes so for your user’s sake keep the saturation in the medium, not the Medium but medium. I’m sorry, my bad.

4. Use Elevation as Shadow

1*45H2iJi5itKRgcu-atLemA.png?q=20
learn-to-design-dark-mode-from-spotify-tiktok-robinhood-dropbox-medium-etc-ea1d68c6c30

Just like in the dark night we can’t see our shadow, we can’t actually see the shadow inside the dark theme ui design. To overcome this use elevation as a shadow, just make the element elevated or color it a big greyish.

5. Allow Users to Switch Between Dark to Light Mode

1*dVD8jQ3_lD5lXnLC5n0Acw.png?q=20
learn-to-design-dark-mode-from-spotify-tiktok-robinhood-dropbox-medium-etc-ea1d68c6c30

Allow users to switch between dark and light mode, many apps with high content and graphics and imagery and text allow users to switch between dark and night mode just for their ease. some people don’t like dark mode and some don’t like light mode. OMG did I just said that.. are there some people who don’t like dark mode who are they exactly? anyways, make that optional.

Little Bonus: Use the something called system dark theme which enables the dark theme when the battery is running low it helps not a lot but yes it works.

Thanks for reading my friend, I wanted to share some of the quick tips that I’ve noticed that big apps are doing I know I missed out on many things but don’t worry I’ll write it sooner. thanks


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK