Understanding of Topic

This topic was completely new to me, since it was a movie I have never watched before. I unfortunately haven’t had time to watch the movie, so I had to do research through a bunch of sites to learn about it. However, my roommate has watched the movie so I was able to ask her questions and have her check if my site matched the aesthetic of the movie. After doing this project, I really want to watch the movie so I am excited to watch it when I have more time during finals week.

Collaboration with Creative Director and Development Process

My first conversation with my creative director was very broad. She gave me her overall vision for the project, including how to section the site and the colors she wanted. It was really helpful to hear her description of the tones of the movie and where I should go to find more information. I ended up using the color palette she described and kept the same sections we discussed during the first meeting.
During our second meeting, we discussed the Figma prototypes I created. We both had similar opinions about the options, so it was easy to decide which one to use as the foundation for my project. We also talked about using hover states to indicate the navigation options, which I added to my final project.
In the third meeting, I showed her the basic wireframing that I had created. We discussed how the layout was and agreed that it had a lot of empty space. She also gave me helpful ideas for how to style the pages. Starting with a wireframe helped me focus on structure without getting overwhelmed by details.
After creating the overall structure, I focused on smaller details like font, style, and color. Working with Lily on these details was extremely helpful. One major suggestion she gave me was to change the font to something closer to the movie poster, which made a big impact on the overall design.
I ended up going with different ideas for some elements. One thing I wasn’t able to implement was the modal for the characters. I couldn’t find a design that worked well for displaying the information, but I would explore this further if I had more time.
After building out each page, I focused on making the site feel consistent. A friend pointed out that while each page looked good individually, they did not feel like one cohesive site, so I worked on aligning colors, layout, and structure across all pages.

Tools

Figma: I used Figma to create a mockup and try out different color palettes. Figma was helpful for creating a design much quicker than using CSS and HTML.
VS Code: I used Visual Studio Code to create the HTML and CSS for the website.
Online CSS Resources: I used a lot of different websites for tutorials and quick reference guides. A few examples include W3Schools, MDN Web Docs, and CSS-Tricks.

Challenges

One of my biggest challenges during the project was making the elements dynamic. I really struggled with figuring out at which screen size to change the layout, and often I would mess up my careful layout by trying to make it dynamic. I definitely learned that I needed to test a lot more often, because each change would create a domino effect.

Another challenge I had was filling excess blank space. I had a hard time figuring out how to best use up the space, and the balance between having the page look clean and look too empty.

Successes

I had a lot of fun making interactive elements in my pages, such as the cards that flip over when you click them. I think that my interactive elements are well done, including navigation in the header and on my themes page.

I spent a lot of time structuring the navigation elements in the header, and I really like the way they turned out. It is very clear which page the user is on, and intuitive how to get to each page.

I think my color palette and image selection turned out really well.

AI Use

I found AI the most helpful in the debugging process, especially when I could not figure out why a page didn’t look or act how I expected it. I also used AI to help me with some of the content, and to help me create the more elaborate or challenging functions on the site, like the cards that flip over.

Final Reflection

I have done a similar project in the website development class I took last year, but I found this project to be more difficult and more rewarding. I feel like this project helped me use HTML and CSS in different ways, and challenged me to focus on visual appeal. I find myself struggling a lot more with design than the coding itself, and I feel like I learned a lot about user experience and how to apply design concepts in practice.