Documentation
30MFF
The 30MFF webpage was a way to showcase an in-class activity, in which we shot and edited a short movie/video in 30 minutes each. As a group, we thought that one thing all of us had in common was that much like the rest of the World, each of our home countries had been going through a lockdown. So we decided to make a video on the things people do when stuck at home during lockdown/quarantine.
So, while thinking about the structure of my website and spending hours on end on AdobeXD, I decided to delete my entire wireframe and start over. My initial wireframe mimiced the interface of video publishing websites, like Youtube, and I thought that it didn't really voice the story I was trying to convey.
After a lot of brainstorming, I came up with the idea of displaying my 30MFF video on top of a background of the largest headlines of 2020. I wanted it to highlight the crude reality of the World that went beyond the pandemic and didn't even come to a halt when we were all literally bound in our homes. Thus, the placement of the video on my webpage was a metaphor such that it was bound between its 4 borders, much like we were bound by the 4 walls of our houses. Further, the video was surrounded by news article headings, showing the uncontained and never ending nature of problems in this World. To give more meaning to this metaphor and to add to the story I was trying to convey, the colour scheme I used was black and white to denote feelings of remorse, loss and fear of the unknown.
To implement this concept I had to start with short-listing some of the biggest news pieces of 2020 and make a list of those that I felt stuck with me the most. After that, I started working on the basic structure of the website and began with the navigation bar. I went through multiple Youtube and W3School tutorials to see what it took to make a navigation bar and the kind of elements I could include in there. My biggest challenge, as I had started working very early on during the course, was to get the alignment right and have each element at the exact place where I wanted to have it. As I went ahead, I discovered the hover attribute and decided to use it to add a little intervativity to my navigation bar. Then I went ahead, to place the images and video below the navigation bar and here again my biggest challenge was positioning. But, by now I knew the difference between all attributes of the position tag and was able to eventually solve my problem. I would often type faulty code, as I wouldn't understand properly the idea of hierarchy and preferance in css and html and would have to use trial and error or go back to W3Schools or use the discord server, to solve my doubts. Implementing Javascript proved to be a challenge as well, as I had limited experience with it, but I tried to include some javascript to add interactivity.
Overall, I think I did a fair job of putting my thought and creativity into code and presented a version of the website very close to what I had imagined it to be. I was able to get all my poisitioning the way I wanted it to be, for all my links to work and for me to hopefully convey the story behind the video. I do feel that I could have made the website look slightly cleaner and more interactive, if I had a little more time in hand. But having said that, I am satisfied with how my website has turned out to be.