I haven’t made too many websites, but all that I have made have been fully conceptualized and designed by me, of topics I chose. This is the first time that I didn’t choose the topic and style of my website. This topic was not new to me, as I’ve watched the show Modern Family, but it’s definitely not something I would have chosen for a website.
I got helpful feedback from Esther and it’s been useful understanding the references she makes to the characters and more. There were some characters I added on my own just based on my prior knowledge of the show, not having to do much research. At the beginning of this project I was excited to have a topic I was familiar with, however, I do think it could have been fun to make a website on something I knew nothing about, because that’s probably the more likely situation for when I am pursuing this as a career.
Esther’s notes helped me catch some details that I either wasn’t thinking about or didn’t realize at first, such as the title being covered when at a certain size in responsive mode, and the navigation bar buttons being somewhat harder to see when above 700px. I was able to take her notes and make a to-do list, and as I fixed these things and continued to work, I would add new things like more photos or changing the order of a div versus image, etc. My process was pretty linear, I kept almost every aspect from my 2nd Figma mock up (besides for one detail that I was not able to add without JavaScript). I added some photos to make some of the pages less plain, but for the most part, that is the aesthetic of modern family: simplistic and minimalist. I wanted to add some type of fun embellishment, so I wound up using the frame from the opening clip of every episode as a motif throughout the website. The repeating gold frames also add some fun texture to the website so that it doesn’t fall flat with the solid black, white, and orange. I made my best effort to find the exact same fonts as the show logo, and combined them together for a lot of my titles/subtitles. I think that I captured the essence of the show well and quite honestly don’t know what other style I could have done to make the website. I’m very content with how it turned out.
Regarding AI usage, I definitely turned to AI for some help, but didn’t use it to generate ideas– I knew exactly what I wanted to do. For most of my questions or tags I forgot about, I used google and simply searched something like ‘what’s the tag to do this in html’. For more complicated tasks, like making my photos clickable to reveal text, I ended up pasting my html and css into ChatGPT and asking what to add to do this task. Upon doing that, ChatGPT revealed some mistakes in my code (or redundant tags/css) so I did go through and fix/remove per the suggestions. I think I used AI well for this project since I got to learn how to do some new things and was also able to fix mistakes that I missed or wouldn’t have caught at all. If AI gave me a suggestion for something I didn’t recognize (but wasn’t something crazy like making pop-ups) I did make sure to look it up or read the description of what it was doing and why.
If I had more time for this project, I would have added one idea that I had on my Figma mock up that ended up being too hard to pursue. I’d make it so that when you hover over each character in each family on the characters page, that person turns orange and you’d be able to see character details from that instead of clicking on frames. This wasn’t impossible- I could have edited each character separately and perfectly placed them as if they were part of a full picture- however, this would have been really tedious work (and I would have had to do it twice- once for regular and once for orange). I was still able to achieve the pop-up text by adding frames beneath, and it ended up making the page more interesting upon first view, but I do think that the hovering and character changing color based off who you intend to read about could have been a cool interactive touch.
.