< Back to portfolio

UI for a mobile party game

A friend asked me if I would be interested in designing an interface for their mobile party game. User interfaces for games are usually more vibrant and allow for more expression, so I agreed to do it.

Initial concept

I was sent a brief, which gave me an idea of the actions each screen should support, and the theme of the game.

I wanted to first design the screen where players would spend most of their time: the Action screen. I listed what this screen should show, and some adjectives describing the feelings it should communicate.

Notes on the screen contents, and adjectives

You can see a colour hex code in the bottom right - I had asked my friend if they had any colour preferences, and they chose this particular blue. It ended up being the background colour.

I was also sent screenshots of the early prototypes of the game, built in Unity.

Action screen early prototype

I used all of this as a basis for a sketching out the action screen, and where elements should be.

A sketch of the Action screen

Setting a visual direction

Next, I wanted to explore the visual design. I started by designing the buttons - if I could settle on a button style, which were a common interface element, it would inform the style of the rest of the game.

First button concepts

Since this is a party game, I wanted an interface that invited people to pick it up and use it. I felt the best style for this was that of a plastic children's toy. This led to a matte plastic appearance, with an emphasis on chunkiness and bold colours.

I decided on a layout grid, for consistency, and in doing so dropped the button "surround", so that they were more space efficient.

I had been desinging for the iPhone 8's screen size, but I was told that the minimum requirement was the iPhone SE, so I lowered the resolution and made sure the buttons still fit the grid.

Buttons on the grid

Finishing the screen

With the button design finalised, I put together the full design for the screen, from my earlier sketch.

The first Action screen mockup

I wasn't happy with the "track" style timer at the top of the screen, so I did some research into other ways to physically measure time. This led to an "egg timer" style.

Action screen mockup with egg timer

The dark area in the middle is a screen on which cards would display, giving instructions to the player.

I sent these over to the creator of the game, followed by a sprite sheet so that they could use it in Unity, and got good feedback. Currently the game is still in development.

< Back to portfolio