Having done the illustrations and the icons, I can finally put together my user interface in Figma!

I also played around with different typefaces in Illustrator to find good fit for my word marks;

I chose the logo mark circled in red because I like the thick typeface, the added bonus is that it is also playful but modern at the same time. My character logo is already very detailed and eye-catching, I wanted something a bit more structured for my wordmark to contrast.

I also had to decide on a font choice font size for my app. I eventually decided on the font Nunito after reading about it in a Figma blogpost. Nunito would work well for me with its thing stroke, from my illustrations to my icons I have done them in thick lines, I feel like this typeface will give a well-needed contrast to my app ;

As for the sizing of the headlines and body text. I got the proportions off the type scale tool at materialdesign.com;

When I actually used the sizing in my app, I found that I had to twig a few measurements at times to suit my own app better, but as a general guide, the tool was a very helpful way to get started. I also, for the headlines, used the bolder versions of the typeface to help it stand out more since I find the headline was too thin for my liking.

For the rest of the blogs, I'll be showing you first my original mock design on paper, and then comparing that to the end results.

First, my loading page;

My summary page;

I decided to add in a few more details, such as telling the user the date of the trip, how long each trip is and an added bottom at the bottom of the user would like to add a new quest.

next is the travel information page, just a reminder, I had 4 pages planned. 2 for each destination;

For my quest timeline, it took a few tries to figure out the right structure and colour scheme;