This was completely new to me! I’ve heard about the TV show Friends before, but I’d never watched any of it. I knew it was popular, and that’s about it.
My creative director (Charlotte), was very encouraging throughout this whole process. Right from the start, it seemed like we were on the same page about what the design should be, which luckily happened to coincide with my preferred visual language: solid colors and blocky shapes with sharp corners. Every time we met it felt like a casual discussion, tossing ideas back and forth, and not worrying if something didn’t work out like we originally wanted. If I had some ideas, Charlotte fully encouraged and trusted me to go for it!
My design process for this was not very linear. It was a mess. I am typically someone who works mostly analog, so the first step of making high fidelity prototypes was a disaster. I began with some really rough sketches on paper, and struggled to implement them into Figma. After the initial meeting with my creative director, I went back to analog sketching to help visualize what all the different pages might look like.
After some more sketching, I made the most bare bones website that I could. All of the pages, a navigation that only technically worked, and the colors/fonts picked out. As soon as it was time to put all the content in the website… panic ensued.
Instead of getting all the content on the site as early as possible, I worked mostly page by page, because that felt a little bit more manageable to me. Sometimes I would have an idea for a page I wasn’t currently working on, and immediately switch gears once I got excited about an idea. I did a lot of bouncing around, getting into the nitty gritty and tweaking some small things, then going back to an entire page layout. It was chaotic.
Every time I got stuck with the visual design part, I would go back to sketching in my notebook. When in doubt, sketch it out. And then I’d try my best to figure out how to make it digital. When going back to the digital world, I tried to find the simplest solutions for everything. Sometimes this meant finding a tutorial video on youtube, implementing the code, then realizing I didn’t like it and scrapping it all to do it a completely different way.
As I said, it was a mess.
The biggest challenge of this project was the unfamiliarity with my tools. Sure, we’d spent half a semester getting to know HTML and CSS, but it felt a lot more daunting now that we had this big project to do, and starting was really difficult.
For the initial design phase, I struggled a lot with using Figma, since I’d never used it before, so my “high fidelity” models were a bit lackluster.
I think it’s also important to note that for this entire process, I really struggled with the big picture. I am not naturally a big picture thinker, I much prefer to get lost in the details, which proved to be a hindrance when it came to putting all of this together. I’d jump from one section to another, not really sure what I was doing or why.
The amount of content also proved to be a big challenge. As a person who doesn't use AI, I didn’t end up summarizing any of the content on wikipedia, so I was left with big chunks of text which I did not like. Which is fine, except that I am easily overwhelmed, and I was constantly overwhelmed with this project, not sure of a clear path forward or what to prioritize.
I created a back to top button without using JavaScript! I’ve used JS before, but I didn’t want to get into the weeds with it, so I’m really pleased that I didn’t have to use JS for any of this project. Keeping it simple and clean worked in my favor for this.
There are still some ideas I would have loved to implement, but I did not have the energy: pop up quotes when hovering over the characters, a click/flip to reveal information on images, animations (in general) to make the website more lively and less static. But it’s done! And that’s a success in my book.
I did not use AI for any part of this project. I relied on other sources, such as forums, looking up what a specific tag does, and the occasional youtube video.
It is done. That’s all that matters. At the end of this all, I’m also realizing ways I could have refactored everything to be cleaner and simpler, but oh well. Also, if I answered any of these questions “incorrectly,” it’s just because I sometimes interpret things wrong.