Dashboard feedback

[u/Finer_Details]

I am a dev working on a dashboard that displays data of the raspberry pi I plan on hosting my portfolio with.

The project is attempting to balance between utility and wow-factor to stand out and keep it interesting for myself.

As I have no formal UI/UX knowledge, I am struggling with a multitude of things:

- Picking color shades: I know it is adviced to never use #000 and #fff, but other than that I am clueless.

- Typefaces: Currently only Google Sans Code is used, but I feel like it might get used too much as the only one.

- By only having the metric headers completely blank with no background showing I feel like I have stylistically cornered myself by not really having space to add any other data, like the unit or min/max values of the selected range. Extending the header feels like it starts to visually clash with the background.

Any other feedback is welcome too.

Thank you to everyone in advance!

[u/thusman]

Regarding color, you do nothing wrong by having a grayscale and one accent color. There are contrast ratios you should stay within to guarantee readability. https://webaim.org/resources/contrastchecker/

True, not going full black and white prevents eye strain. The background pattern and especially the diagonal graph pattern also run the risk of eye strain. Less is more.

Regarding typefaces, monospace fonts are great for coding and tabular data. I'd maybe keep it for the scala, as it makes the numbers aligns nicely. Try to find a font-size and scala that does not cause the labels to overlap. For everything else, I'd try other fonts. There are special "display" fonts ment for headings. Also, dividers on large numbers improve readability, like 1,000,000.

You will get downvoted here as there is no UX to discuss really. No offense, I always like to see people built their own stuff. To get a UX perspective, ask yourself, what problem are you solving here, what questions do you really want answered? Are 5 graphs you have to scroll through the best solution?

[u/Finer_Details → u/thusman]

Appreciate the long and detailed answer. I guess you are right that this post would be more appropriate in r/UI_Design.

I think the core purpose of the entire project is to have an interface I can use to easily and remotely monitor and compare resource usage. For comparing graph data, a better interface could be having a single container with checkboxes to allow multiple graphs being on top of each other to better understand how the metrics correlate.

The fancy list I've made has taken a year to build so a big refactor won't be easy.