Moving my designs onto Figma, I began the process of developing my app’s prototype.
Colour Scheme
Firstly, I wanted to create a colour scheme for my app. I wanted the colours to represent space, but also be bright and child-friendly. Because space is deep and mysterious, I thought purple would be the best way to portray, because it is still mysterious but it is also quite bright and can be used in different tones to create pinks. I also included a pale orange in my colour scheme, to contrast against the dark purples and accent everything. I would then use white for most of my text, as it makes the text easy to read and stands out against the colours.
Typefaces
Next, I also wanted to consider what typefaces I wanted to use. For this project, I needed typefaces that appealed to children, so I needed something round and bubbly, but easy to read. Roboto is a good font for these needs, as it is both easy to read and universally stylistic. Nunito Sans is a font I discovered on Google Fonts, and found that it went really well with Roboto, but added a bit of variety for elements such as titles and headers.
Monogram
I needed to create a monogram for the app. This would be something that could be used in the app logo, as well as the home screen and to sell the brand of the game. I wanted to use the spaceship that the user would fly around in as my monogram, as I felt this defined the app pretty well, as well as being a rather simple object.
I began this process by creating a few sketches of spaceship designs. My favourite was the one on the top right, as it was very simplistic but stylistic. It has a definitive look, and I feel with colour I could really make it into something good. So, I switched to Figma to further develop this design.
This was the design I came up with. I really loved how this came out. I like how the pink is accented throughout the design, while also making use of the white and darker purple.
Building the App
I then used my wireframe sketches, my colour scheme, my chosen typefaces and my monogram to begin building up my designs of each page on Figma.
Home:
Exploration:
Element Page:
Elements Illustrations
I then needed to create a series of illustrations based around different elements that will be collected during the game.
The elements I chose to illustrate were, in the order shown below:
- Hydrogen
- Helium
- Iron
- Oxygen
- Magnesium
Prototyping
With all of my pages fully developed, I wanted to begin prototyping as soon as possible, as this was something I had never done before. I would still be using Figma to build all the interactions between the elements on my pages, but it was something new that I would be discovering as I went along.
I found a few useful tutorials on YouTube about beginning to use Figma for prototypes.
Here are a link to a few videos that I watched:
The prototyping part of this project was something I didn’t expect to enjoy, but surprisingly, I really liked it. It was like a puzzle to me, having to figure out where each item lead to, what each interaction meant, and how it would move around or fade into the screen.
My Figma screen ended up looking something like this:
I would call it organised chaos. It was fun experimenting with this new process, and I can’t wait to expand my experience in prototyping further in the future.