My video project is an attempt at a tribute for the class of 2020. It is also an attempt at highlighting a big pet peeve of mine, people being on their phones all the time. I think that in our modern-day society, we tend to care more about our online presence rather than focusing on what’s in front of us and because of this, we miss out on so much.
I think everyone at some point in their lives have been either an Emma or a Keziah, the two characters in the production, and can relate to the story from both sides. We have all been Keziah, been annoyed and somewhat disappointed and hurt that her friend is not giving her the attention that she deserves. We have also been Emma, where our attention is not directed at what is in front of us.
My project focuses on one side of the story, Emma’s. The experience that I wanted to create was to allow the user to be in Emma’s shoes. Her roommate and close friend is leaving, but she’s on her phone the whole day because she’s planning a surprise. Being on the phone is for a good cause, but it still takes her away from the present. Users are able to decide Emma’s actions that ultimately lead to the same outcome, but it is my hope that throughout the decision-making process, users are able to reflect on their own experiences of being in the same/similar situation. With the story, I hope to showcase the love and friendship that individuals have built with others throughout their university career.
I knew from the beginning that I wanted a linear story that follows the day of two people, one of the main reasons why I didn’t design a button that goes back to a previous option (to mimic the choices that you make in real life). I also knew that I wanted the interactions to essentially lead the story to the same outcome because I wanted to be the one to tell the story and for the user to discover the story.
I decided to come up with a story about two of my senior-year friends, both of whom I have been spending a lot of extra time with since quarantine. For the script, I thought of everyday activities that we were still able to do. Originally, I had planned for some of the shots to be outdoors, however, because we have to wear masks outside, I thought it would be harder for the audience/user to follow the dialogue since we can’t see and read the lips of the characters. Because of this, I had to change the script a couple of times. I wanted to use this project as an opportunity for me to share my appreciation of both of them, though the video ultimately has only Keziah receiving the surprise.
In terms of the creative non-video aspects, I chose a font that is reminiscent of somebody’s handwriting. As for the colours, I chose ones that were simple and easy to read.
Instead of having multiple pages, I made the decision for the video source on the same html page to change once a button is clicked. I thought that this would be the best option because I wanted my video to autoplay, and to do so the video would have to start with being muted. At the beginning of the video I had already set an alert for the user to toggle the sound on, but I thought that if I had to do that for every new scene it would be very annoying for the user. I, therefore, just switched out videos.
I also chose to have two html pages, one landing page and one that ran the actual video interaction. In between both of them, I added a video of the chat between Emma and her friend with whom she is communicating with in the video. I thought that this would give a better context as to why Emma is on her phone the whole time in the actual video and thought it would be a better option than placing the chat video within the actual video when Emma is on the phone because the user’s attention is directed at only one thing and so I know that the context is clear.
The whole project took me probably 30 hours. After finalising the script and allowing my amazing actresses to have time to read it, we shot the video. However, it wasn’t until I got to the editing part that I realised that I could have benefitted from having another take. I originally thought of shooting some of the clips again, but I thought it would be too much of a discrepancy in the lighting, in the location, clothing, furniture placement, etc. that would also decrease the overall cohesion of the story. Despite not having extra footage to work with, I made do with the footage that I had.
Because of equipment limitations, I filmed the whole thing on my phone so the quality of some of the shots (especially at night) and sound weren’t the best.
In the coding process, I ran into quite a lot of problems. I had trouble with coding different ways of advancing the story (button with different options to move forward would pop up) such as when the video reaches a certain time interval, or when the video source is something, or when the video ends. I then had to make sure that each button led to the right video and then to the right video, to the right video, etc. The process was long.
Overall, I am satisfied with how the video turned out! Though on the domain, it seems that the videos don’t load as fast as I would want them to but nevertheless, I did the best that I could with the time that I had! I think that my initial goals were met, and I hope that users have the experience that I wanted to create.
Coming up with an idea for the sound project was a pretty easy experience for Susanne and me. The goal of our sound project was to create something positive in current hard and trying times during the current Covid-19 pandemic. We wanted to spread some happiness with everyone through some sound recordings and/or soundscapes.
When brainstorming different ideas on how to create this environment and experience, we decided that we wanted to gather different testimonials from different people around the world – taking inspiration from the fact that Susanne is currently in Berlin and I in Abu Dhabi. We thought that while the coronavirus is a pandemic, happiness is and should be something that is present all over the world as well. In terms of the webpage to host the sound recordings/soundscapes that we wanted to create, we of course planned to create a layout that gave off the impression of love, calmness, and happiness.
Susanne worked more on the sound recording and I more so on the coding of the actual webpage – this is not to say that we did both independently, we contributed to each other’s work and gave each other feedback and helped with the process. In terms of the webpage, we went with a pastel colour scheme called “Adapt and Live”, which is pretty fitting in spite of the current situation. It was also a colour scheme that oozed calmness and love. In terms of the font, we went with something that was not harsh, was smooth, and flowed. We wanted it to be very inviting to the user and audience member. In terms of the overall layout of the page, we wanted to have four main sections: 1) the title section, 2) the “About the Project” section, 3) the recording and testimonials from different people, and 4) the option for the user to record their own happiness testimonials.
For the recordings themselves, we simply asked our peers to answer the question of: “what makes you happy?”. The question is very open-ended, we didn’t give them any direction as to how long the answer needs to be, what they need to talk about, or what language they needed to answer the question in. We simply wanted genuine answers. After getting the recordings, editing and the addition of sound effects to certain recordings was done on Adobe Audition. The idea was to have 12 different images of individuals and if the user were to hover over the images of the individuals, the testimonials would play. The user could go through the testimonials on their own and in any order they want, moving to another and coming back to one whenever they wanted.
We also thought that it would be cool to have a soundscape that accompanies the website that the user to listen to on its own, to have a cool calming music in the background. Or simply have it as a background music when the user listens to the testimonials.
Lastly, we included a section that allows the user to join in on our happiness project by recording a happiness piece of their own. In the case of our project, the recording would not be transferred onto the website in any way; however, it does allow the user to interact and participate if they wanted to share something and get something off their mind or chest.
I ran into a few coding problems during the process of building the webpage, including trying to use animate on scroll and the snap function. Most problems I was able to ask Sarah for help on or I was able to resolve, despite that, I still couldn’t figure out how to allow animate on scroll to work in conjunction with snapping my sections to the top of the page when a user scrolls. I think, however, that the webpage still has the same experience and message without the snap.
I really think that the experience that Susanne and I wanted to create was made through our project. Susanne and I are geographically very far apart, but we were able to come together and build something that we think is very topical and address something that is very important to have and remember, especially in current times. We hope that our project is able to connect people around the world and bring some sort of happiness to whoever comes across our project. I think the elements, colours, words, illustrations, really bring out and portray what we had imagined, and so for that I am very happy and proud of what we have created.
Although this project was hard in the sense that we both had to work very independently on our parts because of the current situation and that we were far apart, we got our elements to come together and work in sync with one another. I am very happy that (almost) everything worked out!
For the comic project, Jude and I decided to work on creating a comic that is aimed at showcasing and providing resources for refugee education. We came to this idea after combining both of our ideas that we had in mind – about bullying and refugees. Refugee integration into education (especially in new host countries) is a big issue in many places across the world because schools and education systems may not be well-equipped to provide refugees with the learning environment that they need to succeed in the most.
We thought it would be a good idea to, instead of having a comic just explaining about what to do, have an example that showcases what many refugee children experience in schools because of the lack of inclusion and understanding from their peers and/or teachers and other staff. The best way to do so, in our opinion, was to create a first-person view of being in a school environment that is not conducive to a refugee child’s story. Our hope was that through navigating through the school day, the audience member can get a sense of how the refugee’s experience is different to that of “normal” school life. Of course, bullying is ubiquitous in schools across the world. It is, therefore, our hope that our story can inform about bullying in school in general as well.
The first part of the project was to decide the flow of our comic – what scenes did we want to include? What sort of school settings? How should we make it informative? One of the first things that we decided on was to have a character that has no gender and race, making it so that the first-person control of the character would make it easier to relate to. We then decided that the classroom and cafeteria scenes are musts in the school setting and so wanted some form of bullying and/or exclusion to happen in those places.
The second part of the project was harder than we had expected. With our ideas in mind, Jude and I attempted to find background photos that we could use in our comic. We could barely find any, let along good quality pictures. ALL of them had watermarks across them as well. The next few hours were a lot of photoshopping pictures. At first we thought that vertical scrolling of the comic would be the easiest, but realised that it’s hard to incorporate a background that would flow smoothly if that were the case, so we changed to horizontal scrolling, which after thinking about it more made more sense to us; the scrolling mimics that passing of time and the child walking through the school. We also realised that to have the “feel” of walking, we would need at least three different images of the child character to make it seem like the legs and arms were moving. Jude and I both worked on getting the resources (i.e. images that we needed).
After having our resources, it was a matter of deciding how we wanted the interactions of the audience members to go. We thought that horizontal scrolling was already kind of weird in that it’s not something someone on the computer usually does for a long time. We, therefore, wanted to incorporate some sort of clicking into our comic as it is something more familiar. We also had trouble deciding how we wanted the interactions/dialogue in the comic to flow as well. After having some ideas and receiving help and advice from Filip and Sarah, however, we had an idea of how we wanted the interactions to flow.
My role in the team was essentially to figure out the code and how everything would run. Originally, we wanted there to be only one page (the index page) and have the background super long and for the buttons (when clicked) to reveal a larger portion of the background. However, it was hard to incorporate what we wanted to do with the clicking interactions and so decided against that idea. We ended up with five different html pages, each with its own (sometimes very similar css and js files), of course.
To showcase the bullying and exclusion in the school from the classmates, we thought that the most obvious way was to have some sort of speech. To distinguish between speech and narration, speech and dialogue between characters happens in speech bubbles while the narration comes out at the top.
We had never anticipated the amount of time that we ended up spending on this project. Our ideas kept changing throughout the process and we had to scrap ideas and make up many new ones along the way. Initially, we had wanted to essentially have two stories side-by-side – one of bullying and one ideal situation. However, we thought that there would be no point to having the idea situation because we would have a page dedicated to explaining the situation and sharing further resources anyways. I really thank Jude for being very flexible with my different ideas and changing thoughts.
Overall, I think Jude and I both did the best that we could, given the restrictions and skills that we both had/have. We’re both not very art-abled and are still beginners at HTML/CSS, but I think that we combined our skills and knowledge and did well! Although the graphics may not look the best, we ended up being pretty happy with the result of our comic!
The objective of this assignment was to create a website to house the short video that we made in our first Comm Lab class or one for the whole 30-min film festival itself. I decided to go for the latter option, thinking that there would be more creativity involved as it is broader and more open-ended.
When wireframing and brainstorming ideas of what I wanted the site to look like, I researched website examples for other (real) film festivals that exist around the world. In this process, I found that the Sundance Film Festival’s site really appealed to me. It was clean, simple and easy to follow. I, therefore, based my design and some of the initial layout of my wireframe on that.
When actually coming to style the website, the CSS, I wanted to use colours that are vaguely familiar with NYU(AD)’s purple colour scheme but still have its own feel to it. I chose a pastel purple colour set to give my website a more subtle, inviting feel. I wanted to website to be easy to use and navigate for all users, such as having responsive elements to them that they are most likely familiar with from using other forms of technology or the web.
I think having the wireframes made the whole HTML/CSS writing process a lot easier, just because I knew exactly what I wanted to make, where I wanted to place certain objects/media, etc. With my layout set up and drawn out, I tried to make the whole website as intuitive and simple as possible, with the most basic of layouts that both makes the website interesting and easier understandable at the same time.
In terms of the order in which I went about the coding process, I followed my wireframe basically from top to bottom, left to right. This was especially useful because my pages have columns in them and having them already split up on my wireframe made the forming of each element and the contents within them a lot easier. Standardising the layout elements was easy after completing the first style for the first item as I could just use the same CSS style for the other same elements. I implemented the Javascript element last on the pages that I had used them just because I thought that it was the hardest to implement and work out.
Apart from trying to implement the Javascript interactive elements, the other obvious problem that hindered my ability to finish this project quickly was that I had no idea how to code in HTML/CSS. I quickly realised that even though we went through examples in class and that there were examples online of how to make certain things in HTML, I still didn’t know how to implement some things that I had originally wanted to. This lack of knowledge and skill meant that I had to change ideas throughout various stages along the way.
I had already expected that making the website and the pages would take me a long time to do and so had allocated a significant portion of my time to working on this assignment, especially working out what types of interactivity I wanted and how to implement them. I was very happy I did so because I ran into a several roadblocks along the way.
Of the roadblocks, the most significant was found on the last page that I worked on, the Audience page. The last item that I wanted to add in for that project was the collapsible dropdown boxes. I searched up how to do it online, but for some reason it would not work for me when I typed the exact same thing in my script. I went through all my files trying to figure out what exactly is wrong with the code that makes it not work out and after many hours of just trying out different things, I still could not figure it out. I resorted to asking a friend to look at my code to see if he could see something that was wrong. After a while, he too confirmed that everything looked alright.
We then attempted to isolate that bit of code and to just write a completely new (test) Javascript and CSS file with just the collapsible dropdown as the sole element. Long and behold, the dropdown worked. This meant that the code worked and was just a matter of understanding why it didn’t work out when placed among the other functions in the main files. I tried to put the code back into the mail files again, but they still didn’t work out. My option was just to, therefore, link two different CSS and Javascript files to the same html file, which is working out.
One other thing I have learned to be extra careful with is the spelling of variables. Many times, some bits of code would not work simply because I typed them different when declaring them and/or making functions with them. Frequently, I try to change the code and try to “fix” the functions without noticing that it’s the name that is spelled wrong – using up a lot of time and energy.
Overall, I am satisfied with the website I have made. Of course, I can not compare mine to the Sundance Film Festival’s website, but I am proud that everything worked out quick well for the majority of the site. I was able to utilise my creative juices in not only coming up with a theme/layout for the pages, but also for the little bits of information that go on the pages themselves. The site currently is still very simple, perhaps even maybe too simple, but I still think that it does the purpose of the assignment. The layout of my pages matches the wireframes that I worked on, and for that I am also happy. I really think that this assignment made me learn HTML/CSS and Javascript in a very fun and creative way.