7th November

Today I started to make the Prototype for my app. First, I made a new document and inserted the wireframes, then added blank frames next to them where I would put my prototype pages. As I did with the wireframes, I started to design my profile page first, starting with the top and bottom bars.  To go into the bars I had to make some new assets for the search bar and the navigation buttons.  In order to do this, I went into Illustrator.

I searched the ‘Neumorphism’ style on google and  brought up some reference pictures to make sure what I was making was consistent. I also looked up some icon examples in order to give me an idea of what my icons should look like.  

I first attempted the search bar. This took the longest to make, as I had to make a lot of adjustments to perfect the shading. By the end I was happy with how it looked. 

I then moved onto the icons. Because I had already done the home icon some time ago, I only had to do the other icons on each side.The first icon i designed was for the Prints section of my app. Because these Prints would be paid for, I thought making something like a shopping bag would make sense for this section. The icons for the settings and themes sections were easy to understand, as settings are always represented by a cog and the themes are usually represented by a paintbrush, as the idea of themes is to add a new coat of paint to your app design.

The icon for the explore section was more difficult to select, however, it was one of the easiest to make as it was represented by just a set of lines.  This choice was inspired by a mock icon I had made in my initial sketches.

I went back and forth on deciding what the colours should be.  First I wanted to use white, as its simple and not too distracting. However once I had made the icon, I didn’t really like how the white looked. I tried a few different options before I settled on giving them the same colour gradient as my home icon.  

I then exported the document as a transparent png image and inserted it into my Figma project file.