An open-use web application created for easy access, collaboration, and sharing of datasets through rich metadata search, filter, sort, and direct viewing in common industry applications or in our web-based 3D Volume Viewer.
For list selection, I think the spacing needs a little love. The background highlight and border is crowding the text and it needs a little more bumper space.
I did not include this visually, but might you want to add alternating rows with a subtle color difference for better readability?
I think a 4px border radius on controls is subtle but add a nice refinement to the square corners. You can see this on the toggles at the top, etc.
I’m not fully committed to the “pill” shaped buttons yet, but you can see the adjustments I would suggest regardless of the border radius. They should have a max-width.
Question: does fluent have a slightly heavier weight icons? I found some in a plugin someone created of Fluent icons to use, but not sure if there are 2 dedicated weight versions available across the board or not. The carets and plus sign, etc all seem a bit too fine for optimal contrast.
The size toggle meaning is not quite right. You are switching size, not lower/uppercase.
The toggles need to clearly show what is currently active. I also didn’t show this visually, but giving a 1px margin between the toggle buttons I think will help them stand out individually better but still feel like a grouping.
BE mindful of equal lef-right spacing. If they are equal, it will look much more refined.
Also I am almost certain I’ll recomment #000 with ~85% opacity for all popups and menus that overlay the UI. That has worked well and looks nice on other dark themed apps I’ve designed.
I’m still hashing out exactly what 2 dark background colors I want to use, but when I’ve experimented in the browser it’s not going to be far from what you have and the way you have it applied. I think the primary will be slightly lighter and secondary will be the darker one (as you currently have).
From Lyndsay:
I’m still hashing out exactly what 2 dark background colors I want to use, but when I’ve experimented in the browser it’s not going to be far from what you have and the way you have it applied. I think the primary will be slightly lighter and secondary will be the darker one (as you currently have).