Various UI/UX Elements for Video Games
Dinner Defense is a tower defense game where vegetable and fruit loving rabbits defend their farm from pests! The main title banner for the game was designed with all the visual elements in mind would that belong to the theme of “rabbits defending their farm”. The custom font helps add to the light-hearted theme.
The UI elements were designed as wicker baskets carrying various fruits and vegetables to build upon this theme of rabbits defending their food farm. These bars house the icons for the turrets (below), for currency (above) and the “start wave” button (center left).
The font was custom designed to have a fun and bubbly personality to fit the light-hearted theme of the game. The focus was to create a font with rounded and soft letters while keeping legibility at a maximum.
The text banner was designed to be a top-down look at the wicker basket with a picnic cloth on top. The center of this UI element houses the text that pops up in-game that prompts players about certain milestones and tips. The design is specifically made to be a 9-piece grid that can be spliced and stretched so that the “text box” can be customized to be larger without altering the quality of the details of the design.
This tiny little animation pops up above the “berry-firing turrets” when the turret is in cooldown and is reloading the “berry ammunition” to communicate to the viewer that the turret is not currently ready to fire.
This Pause Menu was designed to fit the theme of a “dungeon crawler” game with a stone-like background attacked to chains as well as metal-framed buttons that would house the various Menu Buttons.
This pause menu belongs to a game where you control a slime character, hence the choice to design the buttons with a “slimy” appearance. I wanted the buttons to have a more interactive quality so I opted to go with a mouse-over highlight effect as well as a depression effect when the button is clicked.
This pause button has similar qualities to the previous Pause Menu as the button itself has a mouse-over highlight effect as well as a depression effect when clicked.
This rotating Slime Coin was created to communicate the current amount of currency to the player.
A simple menu design that communicates the controls of the game to the player.