UI graphics are essential for providing information to the player that would be impractical to provide through the game’s environment. It would be difficult to inform the player of which weapons they can equip and how to equip them without a weapon wheel, for instance.
On the other hand, we don’t want our UI to intrude on the atmosphere of the game’s environment. While it’s almost impossible to make a UI that is entirely unintrusive, we can take some measures to limit that intrusiveness.
This is where it helps to know what effect the basic shapes give off, and what their strengths are.
In creating the skillbar for The Book of Invasions, we want it to be as unintrusive as possible. A lot of games do skillbars with a row of squares. While this approach has its place, we want to avoid doing our own skillbar like that.
Squares like this intrude on the composition more than other shapes, – that is, they take up more space than they actually take up. This is because of the ‘implied space’ they create.
Here is a picture of a circle:
It’s not actually a circle, but that doesn’t matter; your mind fills in the gaps and makes it a circle. What this means in terms of UI design is that this collection of tiny lines takes up as much space as the large circle they imply.
Back to our rows of squares
When looking at the below row of squares, your mind also fills in the gaps. The tops of each square can be extended into one continuous line, implying a long rectangle.
Thus, many little elements form one large element which helps them dominate not only the space they inhabit, but also the space they don’t inhabit. And these large elements have a tendency to sit on top of a composition rather than into it.
This suits Dragon Age: Origins, which is played through its UI. It’s also how we’ve set up the battle system in The Book of Invasions, which is also played through its UI.
For the more atmospheric sections though, we don’t want our UIs to sit on top of the game’s environment. To this end, we can look at some of the other basic shapes.
The space implied by this row of diamonds and circles is much smaller than the space implied by the squares we had previously. None of the lines that make up the individual elements run into other elements, and so they all remain individual.
Remaining small, they don’t sit on top of the environment, but rather, sit into it.