Moving onto Figma, I began to build my screens starting with the beginning and log in screens. To create the logo I used Procreate after I complied my colour palette, with green being the main colour, as it represents sustainability.

Colour Palette.png

Logo.png

Before moving forward in terms of screens, there was a number of elements I had to create so that I could build the home page and levels. Again moving back to Procreate, I created the islands first which was very time consuming. A main focus for this game was that there would be a reward system to encourage the pupils to keep going, so I also had to create a number of star combinations which would be positioned below the islands. With the profile page I needed to create a number of avatars, so I decided to use the main leaf shape again, but added some facial expressions and extra colour to add more pop and fun to the app.

<aside> 🌸 Islands:

Screenshot 2023-01-04 at 12.37.15.png

Screenshot 2023-01-04 at 12.37.18.png

Screenshot 2023-01-04 at 12.37.21.png

Screenshot 2023-01-04 at 12.37.25.png

Screenshot 2023-01-04 at 12.37.29.png

Screenshot 2023-01-04 at 12.37.32.png

</aside>

Stars:

Stars.png

Avatars:

Untitled_Artwork 6.png

Untitled_Artwork 7.png

Untitled_Artwork 8.png

Untitled_Artwork 9.png

Once I had created all of these I moved to building my home page first. I looked at the positioning of icons like settings, icons and coins, as well as personalising the screen with using the users names and avatars. It was trial and error with the positioning of the islands trying to get them all to fit in, but as they are floating I felt there didn’t need to be alot of straight structure across the page.

Home Page Tommy.png

Home Page Tommy 2.png

An idea I had at the very beginning of this project was to use cards as a way of presenting information, particularly for the introduction of each level. So when you choose your level, it would pop up with the option to begin the level and a small bit of information. So my next step was to create these before I could add them on to the screens.

Cards.png

Next was the actual game screens. I decided to follow a rule of three, where each round would have a question based on the goal and then three possible answers, which would be visually linked to the sport I had given to that level. I found this easier for some sports than others, in particular the screens for swimming I’m not very happy with, but I struggled to come up with another sport or another way to clearly show what sport it is.