The project is a website for a 30-minute film. The goal is to have a website promote it, describe it and provide all the information that a viewer would need to know about it such as description and cast. The website will also contain the film. The overall concept I wanted to make is a minimalistic one page scroll down website that has subtle animations that immerse the viewers into the website. I wanted to make a seamless experience throughout it.
I started off the concept by creating a sketch wireframe and after that a colored version of it. After having the basic idea in mind, I started off with html making a list of the navigation then sections for the home, description, reviews, cast and film. After making the sections I added everything that was contained within them whether it be text, buttons etc. I then styled everything in CSS, controlling the fonts, backgrounds, margins, padding, height and every other stylistic choice of the html code. I also added the smooth scroll to allow the seamless travel when clicking the navigation. I For the photo carousel for the cast I used the W3 slideshow example to aid in writing the html and java script. For html I displayed all of the photographs and their sizes etc. Java script made the carousel work in the sense of keeping track of the image the carousel was at. If it was the first picture and the previous button was clicked it would minus 1 on the index for the carousel and vice versa for going to the next image. As a final touch I wanted to add animations when you scroll through the website, so I managed to do that with a library called Animate on Scroll where I added the code for fading up and down in the html.
Overall, my expectations were met. I wanted to make a scrolling seamless feeling website and that is what I made. I like how the website came out even though it was not exactly like the wireframe. I had difficulty figuring out how to make HTML, CSS and JS to work together but working through the project allowed me to wrap my head around it.
The project is an interactive comic website with the overall theme of friendship and loneliness. The comic follows the story of a scientist that creates a robot companion to ease their loneliness in an underground bunker presumably as a result of some kind of apocalypse (or anything that the viewer makes out of it as we have refrained from including text). The story has two different endings a bad and good ending. Nearing the end the scientist passes away leaving the robot alone. In the bad ending, the robot gets a broken heart and shuts down while in the good ending they end up creating a friend. We were attempting to form a connection between the viewer and the story, we wanted to get the viewer to be immersed in the comic where they would feel happiness and connection to the relationship of the scientist and the robot, so they would feel it growing through their activities and a sense of time passing with the scientist getting older. When the scientist passes away we wanted the viewer to feel a sense of loss that the robot would now have. The overall experience we strived to give was a journey of happiness and sadness.
We started off coming up with a variety of ideas while looking around for things as inspirations we stumbled upon a prompt about a scientist making a robot and developed the idea from there. In the begging we were attempting to make something full of features and a lot of interactivity but we realized that less is more. We ended up deciding on choosing the interactivity aspects of it to be the two different story choices,and the mechanic of scrolling to change the images. After having a set idea I wrote a simple script then created storyboards which then I inked and colored digitally using procreate. Logaine wrote most of the code and the mechanics and I offered support here and there with obstacles we faced.
Overall my expectations were met, I like the final product it was very close to my imagination of the story, I also like the scrolling mechanic it showed me the difference this level of interactivity adds to the immersion of the story despite it not being anything too complicated. There are two things that I did not like which was the character design of the robot, I wish I had made it more of a humanoid to show the robot as a human in the end. I also would’ve liked to polish the art more, like coloring more of the line art, shading and the such which I did not get a chance to do because of the amount of panels but I still think it looks complete. Another aspect I realized too late into it was that we could have made the stories connect to each other instead of just having a different ending.
The project is a somewhat interactive audio website. The theme of the website is eerie-ness, the overall concept was the myth/conspiracy of the childrens nursery rhyme Ring Around the Rosie and how its connection to the plague. We were aiming to create a horror kind of experience where we create an eerie atmosphere by presenting the website as a positive, happy childrens website. There we wanted to show the huge contrast between it and the dark side of the website this exaggerates the shock one would feel after knowing the rhymes true meaning.
Dania and I started off by creating a rough outline of the narration, after that I sketched up an idea for the website layout and the plan for the interactivity. We decided the interactivity would be present in clicking the play button and switching between the two versions. Moreover, a second level of immersion was getting the images to change as the audio went on to link the visuals with the audio. These images weren’t that big of a difference. For the good page the image would switch to the dark version of the image for a second a few times throughout the audio to hint at the meaning. For the dark side the images switches twice, one for the image with rashes and then one with the kids deceased. After finishing our overall plan we went into more detail on the exact wording of the narration. When we finalized the narration we started looking for audio files for the happy song, eerie song as well as all the other background sounds. We then split the narration and recorded them with our phones. Dania put all of the sounds together while I finished up the visuals and the coding part of it. With the coding I implemented the plan we had prior. I put the two different versions on two different pages both with similar visuals, the switches and the play buttons. For the image switching I got the audio players current time and changed the images based on the seconds it was on.
My expectations were met at the end, the contrast between the two different versions shows. When switching between the two pages I could tell a difference. As for the audio, I personally hate the sound of my own voice and Im not even close to being a voice actor so one of the things that I feel might’ve been not so great was the way I narrated, It didn’t translate well as being creepy and conspiracy like although I kept trying to re-record. One other area was the meaningfulness of the website, if we had a website with multiple nursery rhymes that all have dark pasts where at first it looked like a kids website for nursery rhymes where it all had dark pages hidden just like the dark versions of the stories are. That however, might have been outside the scope of the project because of time-restraints.
This project is a collection of three films informing the viewer how to (not) survive quarantine. The overall theme of the website is meme-y, something light hearted and funny. The concept was to give a tutorial on how to survive quarantine but ending it on a joking note of you are not going to in the sense of productivity, exercise etc. We were aiming to create a humorous and entertaining somewhat unexpected experience.
We divided the work among us three, each one of us would work on one aspect of life in quarantine. Each person was in charge of their own part in the sense of filming and script. Majo was in charge of editing and Max and I did the coding of the website. I started off with a script that was a set of movements I wanted to make: Wake up, check laptop, go back to sleep, go to desk, clean up, attempt to start being productive with a physical to do list, go insane trying to stick it and just give up and go to sleep. I then filmed all of the shots, moved them to the laptop cut up the pieces together then sent it to Majo for finishing touches and the remaining parts like the audio. For the website I found a very simple and straight forward jQuery plugin that helps you add a youtube pop up to html files. We then put together the website like we did with our planned layout and linked three images to youtube pop ups.
Overall I really liked the result of the website, it ended up looking just like we designed. For the videos themselves I liked what each of us came up with and executed. Evaluating on my part, it could have gone more insane in the end but I feel like I captured the frustration in the annoying sticky note, its like the small things in quarantine where you are at the point mentally where one frustrating thing makes you want to just stop and give up.
