My plan for the development of the project was to first design and build the Home, Influence, Project, and Settings pages as these would all essentially be on the same level and use similar components.
I started the home page by sketching out some layout options for it. I wanted to use a similar tile design from my style tile so I kept this in mind by sketching. After sketching a few variations, I decided on my preferred version and re-sketched it more accurately.
After sketching I moved into Figma, and began by creating a wireframe which established the grid I was going to work on. I then started layering up, using the same colours, gradients, and grains from my style tile. I also began adding in some of the illustrations I had done previously, and added some images that were relevant to the sections they would lead in to.
This was my finished home page for the prototype. While I was pleased with the aesthetic, I did feel that it felt somewhat flat which was what I was told when I got feedback on it. Rather than push on more now, I decided to leave it as it was now and develop other screens, as I felt that would help me develop the style more which would allow me to improve the home page.
One thing I was really pleased with in the first attempt of the home page was the components used.
The first component I was really pleased with was the buttons that lead to the Influence and Project pages. I had initially hit the issue of not being able to fit the titles on one line due to the width of the buttons, but I found a solution to this. Using masks and smart animate, I figured out how to have the labels slide out when hovered over. Then, using a similar mask, did the same for each image, allowing for the crop to expand and reveal more of the image. This was a really nice interaction and worked well at managing the buttons and what was being shown.
The other component I was pleased with was the “To the Moon” button. While it initally used the masking method to reveal the label, it also utilised an overlay, which appeared when hovering and turned the static image into a brief video that panned over the rocket. I really liked this way of revealing more through hovering and felt it worked really well.
With an intial attempt at the home screen created, I now moved onto the Influence page.