I've been tasked with a design challenge, which apparently seemed so simple for me, but I've almost come to a dead end.

There are states for an object that need to be represented visually on a page. For instance, the object ( a network group ) need to be modelled first. This is the stage where an admin creates a model of his network. The model then would be queued for the top-brass to approve. Once this is approved, it would move to a synchronized state. At this stage the model and the network are in sync with each other. If the user makes a change to the synchronized state, it would push itself to an updated state, which from there would follow the cycle of Queued and Synchronized again. Phew!..

So essentially, the states starts with MODELLED, once modeling is done, moves to QUEUED, once the queued model has been approved, it moves to SYNCRONIZED. Any changes on a synchronized state would immediately push it to UPDATED, and this when ready to be evaluated to again be moved to QUEUED...

I have to design visual representations for each of these states. The state of an object in its initial state (MODELLED) has already been defined earlier.

Modelled Object

The task is to show the rest of the states with minimal pixel changes, should be clear ( since we would have about 3-4000 of these on the canvas at any given point in time .. it is an infinite canvas).. and they should not be dependent on just the color since accessibility is an issue.

The stake holders do not want too many icons also involved because that makes the screen look too complex with too many variations.

  • If you can show what you already have designed, that would be a great help too to get answers. Apr 18, 2019 at 8:54

2 Answers 2


I'm wondering if this is the right approach. Minimal pixel changes means people will not really notice the difference either, and states are one of those things that need to be communicated very clearly.

You could opt for a tags and icons instead, clustered in different columns similar to what JIRA, Trello and other management tools do in Kanban Boards. This way you can clearly tell in which stage the object is, and any irregularities can be highlighted with tags and icons.

enter image description here


I see several possibilities:

Sub Icons

If your main object icon is large enough, you could render smaller sub-icons in one of the corners on top of it to indicate state. In normal ready-to-use state it would show no sub-icon.

enter image description here enter image description here enter image description here enter image description here

The advantages are:

  • you can combine it with any main icon
  • no need to design several versions of your main icon
  • you can covey a larger number of state this way (more than two or three)

Use Saturation

To indicate that your object is not ready for general use you could retain its general design but render it de-saturated or hollowed out (invert your icon color scheme and draw an outline in icon main color). However, it's probably difficult to convey more than two or three states that way and it requires that many designs of your icon.

Health bar

Borrowing from game UI design: use a "health bar" or "promotion icons" above or below the main object ion. This is mainly useful if there is a linear progression of state towards "fully complete".

However, given that you display network nodes, a health bar could easily be mistaken with the health of the network node itself, rather than its model - so probably not the best choice here.


Generally, you can combine any of these with a tooltip indicating the state in text ("QUEUED") if user hovers the mouse over the icon. This helps familiarize new or casual users with the meaning of your graphical design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.