So your game’s UI is feeling uninspired. It functions as it should, sure, but it was a second thought and it shows. Maybe you’re tired of making the same functionality over and over again. We’ve all done that.

Solution? Make “bad” UI.

But what do I mean by “bad” UI anyway. Well, a key concept many UI designers follow is that UI should not be thought about. If has to think about the UI, or the UI needs explaining in order to use it then the design wasn’t very clear.

So when I say “bad” UI I mean any UI that forced the player to think about their interactions with the UI. By challenging yourself to make UI like this you can not only begin to think differently about how UI can be made, but also can be an avenue to learn different mechanics and design choices in a stress free exercise. Additionally this is a way to learn more about the affordances, what something can and cant do, of your game engine.

To approach making “bad” UI you must first look at the affordances of your chosen game engine, for this I’m using Unity. For a quick explanation, by default Unity renders game UI on screen space. This makes the scaling of everything a lot larger than it would be in world space (where the game is rendered by default). It’s good too keep this in mind when playing around with unconventionality in your UI.

So how do you go about making something like this?

This example actually has a few layers we ‘ll break down later, but first we’ll look into how to apply physics to UI as our primary technique. Applying physics is a easy and effective way to create “bad” UI as it not only plays around with the typical conventions attached to UI but also pushes Unity’s UI systems around a bit.

Lets start with something simple to set up: physics joints. These are connections between two ridged bodies that constrain movement in certain ways. Remember: whenever using physics with UI use 2D physics components and materials. So lets make a default Unity slider on your canvas to start.

To the background and the slider handle you are going to add a ridgedbody2D, this will tell the joint what objects are getting attached too each other. Then to the background you are going to add your joint2D component, there are a few to choose from but play around and have some fun.