1

I am working on the design part on an extension for a specific software.

There is a overview where you can see all your servers and you can add them to categories. If a server gets added to a category, the server card will display the color of the category somewhere. The server cards are generated by the software, I can only do CSS changes so generating pseudo elements with ::before is also possible.

What I want to do now is to show that a server is part of a category, shown by the indent and added category color to the server, and make it compatible with both themes.

There are two themes of this website with one of the themes having two different styles for this overview.

First Theme: Theme 1

I am pretty happy about this. You can see that the category color is on the left border. On the right is a color stripe that displays the server status. Server Test 1 & 2 are inside the Category 1 and Test 3 doesn't have a category. This works for me and doesn't need any changes. I wanted this to be my baseline. Servers with category are indented and have the category color on the left side.

Second Theme, Style 1: Theme 2, Style 1

It's pretty similar to the first theme with the exception that the server status indication stripe got moved to the left border. As you can see, the original style of just adding the category color to the left border doesn't work here anymore. What could I do to still add the color to the server card? I feel like that I don't find a place here to show the category color in a subtle way.

Second Theme, Style 2: Theme 2, Style 2

This one is pretty different. Servers will now get displayed in two rows. I don't think the indentation is in a good place here. Also, there is the problem with the category color again. This time it won't get in front of the server status indication since it moved to the top but is it just me or does it look kind of bad when the server is running (Test 1) together with the blue border on the side?

My question here is how should I display the category color on theme 2, Style 1 and what should I do with Style 2? Would it be better if I don't add the category color at all to the server card? I am open for any input on how I could display it in a better way.

3
  • Category shown by indent as well as category shown by color. There are two different colors under the same category. Do you have sub-categories? The question is not clear. What are these categories? Commented Jun 7 at 11:45
  • @Ren As I have written, the other color is the server status indication. Theme 1 has it on the right side, Theme 2 Style 1 on the left side and Theme 2 Style 2 on the top. There will be no sub-categories. Commented Jun 7 at 21:17
  • ...part of a category, shown by the indent and added category color to the server – What is category color? Commented Jun 12 at 10:47

2 Answers 2

1

It's not easy to answer this question because it's unclear what level of subtlety is intended to be achieved; only the person behind the project knows, with full knowledge of the functionality, users, etc.

This answer is only a formal analysis of the components at a graphic level.


The main problem posed is where to place a second color that refers to a functionality. What I would propose is to strip the design of all the elements that influence the decision and try to visualize its formal basis.

In essence, it's a background with holes or windows or a background with figures. See the law of figure/ground.

figure/ground

The similarity in color between both components, while it makes perception difficult, the essence remains the same: figure/ground or ground/figure (left graphic). There is a third element that attempts to clarify doubts, although it creates a double interpretation: light. If we interpret it as falling from the left, we will see figures on a plane. If it hits from the right, a plane with holes (right graphic):

figure/ground or ground/figure + light

From here on, any added element can benefit or harm this perception. For example, what is the incidence of a second light or what is the direction of the light? If we add a color to each position of the light (Second Theme, Style 2) to this change, we are clearly harming a clear and immediate perception.

second light

With this clear as a basis, we can look for solutions.


For example, use any element incorporated not arbitrarily but to favor the general perception:

new shape

1

I really like the reasoning of the previous answer by Danielillo. I think what you are refering to is a problem of grouping, which is what the Gestalt principles were invented for. You are already using the "Principle of Proximity" by arraning the servers of one category next to each other. And you are attempting to use the "Principle of Similarity" by using equal colors. But I think by using the visual channel of color twice in the design - once for the category, once for the server status. This might be confusing / make it less useful for the grouping. Maybe there is another way you could make the servers of one category similar like a common icon ?

I think especially the "Principle of Enclosure" could be leveraged for your design, by enclosing all servers of one category e.g. by adding a third level of depth: background, category card, server card with the category card spanning all the area also behind the server cards. If you want to add color here, maybe the category card can have a light blue background color, also to distinguish status colors as lines with category colors as areas maybe.

Another option if you don't want too much of a change and want to stay with the idea of using colors for the categories you might color the background area and icon of each server which would also at least make a difference between status = color of a line, category = color of an area.


As always you of course know more about the specifics of the projects and can therefore decide if my thoughts are reasonible or not, but I hope they can maybe give you a new perspective :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.