GalaCollider features icons which appear on the HUD and on the cards. They represent resources available to the player and are an important element of the game.

When designing icons there’s a lot to consider. They need to be clear. They need to represent an idea in a way that can be interpreted by a diverse range of users. They need to stand out from other elements of the game, yet still fit with the over all style. They need to work on a variety of devices. But above all, they must enhance your experience of the game.

Sometimes things are quick to create, other times you just can’t quite seem to get it right. Our icons have gone through several revisions and we are still not there yet with something that looks good, fits our design and meets all the necessary requirements.

Here are the different versions we have made over time:

Version 1:

This is the clean, zero shading version. Exact shapes would need refinement but this was the original concept:

Version 2:

Version 1 pushed in a more “primary shape” direction, with some faded edges:

The conclusion from this was that the icons were too symbolic and would get confused with other colors and shapes in the game.

Version 3:

This version goes in an iconic direction. These are just placeholders and would need to be re-drawn:





These were now potentially too complex and so we then went to:

Version 4:

Back to more symbolic but now a symbol that hints at an icon. Somewhere between flat and rendered. Note that the lighting is a little different on the left than the right as part of our experimentation.



However version 4 was lacking “punch” and the icons were too dull and lost, especially at smaller sizes.

Version 5:

So then version 5: This is the same as the previous version except now with lighting effects from the center of the icons. the first 3 on the left were also cleaned up with thicker lines so that they would retain their shapes on smaller devices (phone screens, tablets etc.)

This looks decent but the colors in particular were not entirely fitting with the artwork and the rest of the style. However this was the “most final” of the icons we had produced as part of this process.

Version 6:

In a flash of inspiration, or folly… A completely different direction was the latest “let’s think this over again” approach. This is incredibly rough, and these images are just quick “place holders”, but the idea would be to have some sort of drawn icon with the numbers on top of them:

Similar to what Duel of Champions does for their three resources:

Meaning that we would draw icons and then render them in such a way that the number can be on-top of it in white. So you have to “imagine” the rock and the gear drawn to actually look like proper icons (similar to how well the above Duel of Champion icons look).

Considerations:

What makes this complicated is that the icons need to look good not only on the screen as part of the GUI but also when viewed on the top-left edge of one of our cards. We also need to show enough of the artwork on the left-edge of the card that you can see which card it is, by its artwork, without having to always click the card to see it.

As you ca see here, version 5 has nice symbols but the values of each of the resources need to go next to the icon instead of over the top of it, and that means it eats up more horizontal space. It also means that we end up with a lot of color on our cards and this break the coherency and mood of the artwork. (which is part of the reason I threw together version 6 quickly with the rendered icon look).

Next steps?

Oh icons, how you scorn us. At this point we could go back to version 1 and just refine that simple, iconic flat look, similar to what you see in other games like:

Or we could tweak our version 5 further to make it work on the cards without eating up so much room.

Or we could develop icons like Duel of Champions did.

Or some fourth or fifth option we haven’t thought of yet?

Feedback

So we’d like your feedback, not just on our designs (as shown above) but also about games you play where you like (or even dislike) the icons. What appeals to you? What’s important to you? Did we make any versions here that you like more than others?

Thank you!

Photo credit: https://www.flickr.com/photos/generated/323388124