The concept of the website was a guide to the Letterboxd platform that displays it not just as another tracker app, but a social space for film enthusiasts. The website is meant to be a resource for new users and interested people to understand the platform and its features, as well as a way to highlight the social experience and film culture.
The website has a dark theme inspired by the visual style of Letterboxd, with a minimal but slightly playful use of the orange, green, and blue circular motifs of the logo.
I vaguely knew about Letterboxd before this project, hearing from my friends, but since I'm not a big movie fan, I wasn't very interested. However, as I was looking around the website, I got more interested in the tracking aspect of the platform, and made an account. I got really invested in adding in all the movies/dramas I've ever watched and trying to rate them (which is so hard for me). Coincidentally, my friends took me to watch two new movies in the theater a few weeks later, which fed my new addiction. At this point, I also really liked the social aspect of Letterboxd, following my friends and seeing their watch history, but I also loved reading other people's clever reviews of the new movies I watched.
Long story short, I myself personally experienced what we wanted the website to do, and that helped me understand the platform much better. And now I might have become a film enthusiast...?
My creative director wanted a minimal, clean design that took inspiration from the Letterboxd UI and logo. She gave the idea of using the logo's circular motifs for the website design, and I took that and gave my own twist of making each section a circle, along with the logo as a navigation bar.
She also emphasized visuals > long text, having clean typography (but different from what Letterboxd uses), and a grid-based layout.
The feedback I got from the creative director was clear and helpful. She gave design suggestions about the structure of the circular sections and adding more images/visuals, and she was also clear about what she liked about my iterations. A lot of the suggestions were things I had already been thinking about improving, so it was nice to have that confirmation and more ideas to work with.
Using the initial concept outline and creative brief from my creative director, I first developed two design directions for the mockup: 1. a "letterboxed" website and 2. the circular motifs. I used Figma to make those mockups. From the mockup review, we decided that the circular motifs were a fun idea to develop further. Originally, I intended for the website to be horizontal scrolling to follow the logo, but due to the difficulty of fitting all content within the circle, we agreed that a vertical scroll with cropped circles would make it easier to extend each section.
For the features, I took the creative director's idea of a movie poster-like grid layout to list out each feature, and added in icons for my second iteration after her call for more visuals.
From the first iteration, I had the idea of using the logo for the navigation bar in some way. After conversations, this developed so that each colored circle corresponded to the same colored section. I finalized this interaction at the very end, and it is the highlight of the website design.
An initial challenge, as mentioned before, was figuring out a system for keeping the circular section idea while still fitting all the content for each section. The creative director gave the idea of making each section bigger for the desktop so that it's cropped like I did for the mobile mockup, and making it a vertical scroll. This allowed for each section to be longer while still keeping the circular motif.
Another challenge was figuring out the interactivity of the logo navigation bar. I was using the svg of the logo from the Letterboxd website, so I didn't have separate circles to use as links that led to each section. I also felt that the section names needed to pop up when you hovered over each to make it more clear, but the positioning of those was difficult too. I worked around this by creating a link for each circle and having a span inside that was invisible unless hovered. Using absolute positioning, it didn't mess with each other's positions, and I also added a box shadow to highlight each circle as it was hovered over.
A success while coding this was my use of CSS Grid for the features and the image grid. I was more familiar and comfortable with Flex before this, but I challenged myself to use Grid for those as it allowed for cleaner layouts, and I was able to understand how it works.
I hand coded almost all of the website, and mostly used AI on Google for debugging or asking how to do something (interactivity or CSS design). The only thing AI (GitHub Copilot on VS Code) fully coded was the back to top button. Another really helpful thing that AI did was figuring out how to make the logo navigation bar work, though I had to adjust the sizing and positioning to keep my design intent.