Smashing Donuts – Game UI and Graphics

This is a casual game where you’re disposing of donuts.

smashingdonuts-logo

It’s supposed to be a simple light-hearted mobile game. I had an idea to create a whole wide scene and have all the game’s screens in it.

smashingdonuts-scene

Here are most of the user interface’s elements and their relative positions. The camera just has to go from one area to the next inside the game. If we consider the buttons to actually be plastic donuts, the interface could be fully diegetic, haha.

smashingdonuts-menu

So we start at the main menu. The main action for the user here is to play the game, so that button is differentiated from the rest with a different color and larger text. Clicking the Start button takes the player to the actual game screen. The idea was for the game to be set inside a pinball-esque device, but the pinball-button and spring would take needless space during the game, so I decided to place them just out of the frame, and have the screen zoom-out automatically every turn so that the player could launch another donut into the others.

smashingdonuts-ingame

Zooming out the screen also gives us room for a few special donuts that the player can pay to unlock. Every donut the player smashes adds its weight to the total at the top. When zoomed out, there’s enough room on the top bar to display the amount of premium currency the player owns, if that approach is used.

smashingdonuts-donuticons

By default, the game always supplies one of the three basic donuts every turn. But they don’t cause a lot of damage to the existing ones, so they end up just piling there. The player can sacrifice some of the weight already accumulated to buy one of the unlocked special donuts. Each of the six has a special quality, which we can see on the Donuts screen:

smashingdonuts-donuts

Here, the player can find out more about the special donuts and unlock them.

smashingdonuts-progress

Every donut smashed during the game increases the game timer. At the end of the time, the level is over and the total weight of smashed donuts is added to the player’s progress. There are six milestones. Smashing 3kg worth of donuts allows the player to go from the starting level of Small Donut Box to the Large Donut Bag level, for instance. Then there’s Donut Stand, Donut Cart, Donut Shop and Donut Factory. After the player smashes a whole factory worth of donuts, I can only imagine they’d go to donut heaven, hehe.

smashingdonuts-settings

There’s also a settings screen, for any so inclined.

That’s the animation of the several game screens.

The UI was made completely in Adobe Illustrator and the animation in Adobe After Effects.

One comment on “Smashing Donuts – Game UI and Graphics

  • MartimOnFire

    Wowww incredible design and very creative idea.
    Always making excellent UIs :)
    Keep it up and good luck for the next ones
    I’ll be waiting for them :D

Leave a Reply

.