Website powered by

Bunny Munch - UI Design

Bunny Munch is a game idea I wrote a design document after a game jam during my course.
It's been sitting in limbo for a long time, but I decided it would be a good subject for me to work on for my UI elements.

Everything here has been drawn using vectors with clipping masks for shading and a small amount of hand drawn elements. This allows for quick editing and reuse of elements to speed up workflow.

I have added some mock up animations to give an idea of what the elements would look like in motion, and included my original sketches to give an idea of how I design.

Title Screen

Title Screen

Animated Title Screen mock up.

Animated Title Screen mock up.

Page of icons. 
These are primarily done using vectors with clipping masks for hand-painted shading.

Page of icons.
These are primarily done using vectors with clipping masks for hand-painted shading.

Options Screen

Options Screen

Animated Options Screen mock up.

Animated Options Screen mock up.

Character Select Screen
As this would be a 2.5d game, the bunny would be an animated  3d model.
Vector image is a placeholder.

Character Select Screen
As this would be a 2.5d game, the bunny would be an animated 3d model.
Vector image is a placeholder.

Animated Character Select Screen mock up.

Animated Character Select Screen mock up.

Character Select Screen.
Silhouettes are used when a character is yet to be unlocked.

Character Select Screen.
Silhouettes are used when a character is yet to be unlocked.

New character screen.
A reward for completing a certain amount of levels/points.

New character screen.
A reward for completing a certain amount of levels/points.

Animated New Character Reveal Screen mock

Animated New Character Reveal Screen mock

Loading Screen

Loading Screen

Animated Loading Screen mock up.

Animated Loading Screen mock up.

Game play screen.

The in-game image is a mock up as the game would be 2.5d.

Game play screen.

The in-game image is a mock up as the game would be 2.5d.

Animated game play screen mock up.

This gives an idea of how some of the UI elements would animate. Other things such as particles could be used when crops are eaten.

Animated game play screen mock up.

This gives an idea of how some of the UI elements would animate. Other things such as particles could be used when crops are eaten.

Score Screen.
Score numbers would animate as a count up, stars would pulse and carrots would pop from a silhouette to colour depending on score.

Score Screen.
Score numbers would animate as a count up, stars would pulse and carrots would pop from a silhouette to colour depending on score.

Animated Score Screen mock up.

Animated Score Screen mock up.

Retry Screen
The tag adds a little humour to the game!
Button options are to retry or quit.

Retry Screen
The tag adds a little humour to the game!
Button options are to retry or quit.

Animated Retry Screen mock up.

Animated Retry Screen mock up.

Settings.
Simple toggle buttons and a slider for difficulty. Toggle icons are greyed out when disabled.

Settings.
Simple toggle buttons and a slider for difficulty. Toggle icons are greyed out when disabled.

Animated Settings Screen mock up.

Animated Settings Screen mock up.

Design sketches for the logo, characters, and colour designs for buttons and crops.

Design sketches for the logo, characters, and colour designs for buttons and crops.

Design sketches for the UI screens, all based around the same template.

I wanted the title/logo to really pop so sketched it in full colour.

Design sketches for the UI screens, all based around the same template.

I wanted the title/logo to really pop so sketched it in full colour.

Character Vector Art with shading by hand.

Character Vector Art with shading by hand.