DEV Community

Cover image for Dark Interfaces. The Why?
Ayush Saran
Ayush Saran

Posted on

Dark Interfaces. The Why?

Continuing in my experiments in simplicity I decided to see what the Matomo analytics dashboard would look like in dark mode.

Image description

Here is the original dashboard, in it's dated color scheme:

Image description

And here is a quick draft of the dashboard in a modern dark theme:

Image description

What Works?

Every visual element requires processing and removing the shadows and colors allows for the eyes to quickly find information because of the lack of competing elements to separate out.

Reducing the color scheme to only the essentials increases the contrast and makes the page look less daunting at first glance.

The higher contrast of white text on a black background makes it easy to direct focus to the data instead of the box-backgrounds and shadows which are no longer competing against the text for attention.

What doesn't ?

Some of the branding of the original interface is lost in dark mode, it now looks like every other dark-ui dashboard.

This may not be a huge issue as the decision to prioritize readability, legibility and information clarity seems like the right trade-off in this case.

Overall I'm happy with the direction this is taking and I will continue to refine this draft and see if I can get to a finished design for the other screens also, then compare the whole set vs the original to see if it aids usability..

Top comments (0)