I began looking at examples of pet simulator UI screens as a source of inspiration.

ui pets.png

The general approach is to use icons rather than text. This is something that I will try to implement into my designs as it is an effective way of letting the player know what the buttons represent without taking up unnecessary space. It also allows for several different options as there is that extra space available. They generally keep UI elements on the edges of the screen, which somewhat act as another border.

UI Initial Sketches

I sketched out some composition ideas for the different parts of my game that need UI:

Image from iOS (33).jpg

I also focused on UI designs for the characters close up when they are selected.

Image from iOS (34).jpg

I took the drafts that I thought were most effective and created refined prototypes using Figma.

Screenshots of Process

Figma is the perfect tool to use for mock ups of my game. It is great for mobile UI prototypes.

Untitled

Untitled

Untitled

Final UI Mock Ups

These are the revised prototypes that I made based off of the sketches that I thought were most successful.

iPhone 13 Pro Max - 1.png