Project description

For the first assignment, I decided to develop a website for the Thirty Minute Film Festival rather than focussing on the theme of one specific film to have more freedom in the visual design choices. I aimed to create an aesthetically pleasing website that gives the vibe of a young, hip and laid-back festival. I wanted my website to be simple to navigate and minimalist in its content showing only essential information without overwhelming the visitor yet providing all relevant information. You start on a very minimalist landing page establishing the aesthetic feelings of the website through the background video and the letter logo of the festival. Then you are guided to the About page which introduces the festival and informs about date and location. Then you can use the menu to navigate to Watch page, the About page, and the Ticket page. On the Watch page you can see the “Winner” of 2020 (simply because I wanted to include the video I created with my team), and a photo carousel showing the actors appearing in the film. On the People page, you will find photos and bios of the members of my team who are given different responsibilities in the festival realisation. On the Ticket page, you will see an image of the ticket and be able to book a ticket, however, they are sold out already.

Process

I oriented the structure and information hierarchy of the website along familiar structures of websites which resulted in the simple header menu on the top with the ticket link on the right side to stand out. Also the division of content into About, Watch, People, and Tickets seemed to be a logical choice. To create the vibe I was going for, I chose a simple color palette including the colours white, black, grey (#302e26), and a light coral red (#ffa584) which are used repeatedly on the website and in the illustrations I made to create coherence. I used three typefaces including Monoton which I downloaded from Google Fonts, Helvetica, and Courier New. I used Monoton to create a letter logo for the title and illustration. I used Helvetica, which gives a very modern, young vibe, for headings, and I used the monospaced typeface Courier New to keep a sense of creativity as the typeface reminds of a typewriter and is commonly used in film scripts. I created two illustrations using the previously mentioned color schemes to give more reality to the festival and also because I did not manage to embed Google Maps with a location marker on the side - something I want to learn. All photos on the website are edited in the same way with the app Snapseed to give coherence and again an artistic feeling. The photos on the People page are round and informal to support the laid-back vibe I wanted to create. The image of an actual ticket on the Ticket page aims to make the festival seem realer.

Reflection and Evaluation

While I a proud of the overall result of my first time working with html, css and javascript, there are some things I would like to improve. I learned many things along the way looking up tutorials and examples online and taking snippets of code especially from W3 Schools. I gained confidence in using css but still need to learn and practice javascript much more which explains that it is barely used on the website. While creating the website, I focussed more on the visuals than on perfect code which resulted in an aesthetically pleasing website that works well on my screen but might not work as well on a another screen dimension. This taught me to prioritise responsiveness of the website to various screens. My goal after this project is to become more fluent in html, css, and javascript to be able to approach such projects in a more structured way as for this project, I would work simultaneously on all pages and insert new code as I learnt about it which makes the code very unclear at times. Starting a future project, I will also be able to structure my files better in terms of how many css files are actually necessary etc. After all, I can say that I am content with the result as it was my first time developing a website. I achieved my visual goals and have a better understanding of the different mark-up and coding languages used and also know what I have to practice and learn more. With more time, I would also like to improve the storytelling of the website. Focussing mainly on the visuals and learning the different languages, the text on the website serves rather as content blocks to see what it looks like. In a wholesome project, I would like to dedicate more time to write the different texts, give more information, and express the overall tone and vibe through the writing as well, but for this first project I am happy with the website I created.

Project partner: Dania Odeh

Project description

Our comic project focuses on mental health in the NYUAD student community and aims to have practical use as well through giving advice and informing about resources on campus. Overall, we wanted to create a light theme, supported through colorful illustration. Color also supports the mood of the protagonist as more background and illustrations use more positive or more negative colors depending on the content of the panel. The comic is navigated through scrolling down which allows the reader to move through time together with the protagonist, a girl who is stays at the bottom of the screen while the background changes, narrating her experience of different moods, giving background information about context (campus, beach, things piling up, self care advice) and also allow insights into the person’s personal mood through showing her diary entries which the reader has to scrolls through using sticky elements. This creates an experience where the reader is taken from the very beginning of a happy day, through the accumulation of things to do (animated images), through personal reflections of the protagonist, to eventual resolve of her issue and finally the last panel addresses the reader directly and provides information about resources on campus. This way, we hope to create something useful beyond the classroom that could be used as informative artwork for the NYUAD community.

Process

Visually, we tried to convey a peaceful vibe through soft colors. Colors were also used to create more cheerful but also sadder moments implemented in the background gradient. Collaborating on such project without using an online platform where code can literally be worked on at the same time with challenging especially because our laptops had two different solutions which pushed is to work with viewport and percentage measurements which is a positive learning experience as it raised our awareness to create content accessible on several platforms and screens. However, during the process, it also meant sending code snippets back and forth to see how they would look on either of our screens. We decided to work panel by panel and then add all code together in one html document which also meant we had to be careful with labeling so that one css setting would not overwrite css definitions on another panel. My work included panel 1, 2, 3, 4, 6 and 7. For these panels, I chose appropriate visuals from different sources and altered them with Adobe Illustrator and Photoshop software to fit into our desired color scheme. This included cropping details from larger images, tracing photographs to turn them into vector graphics, combining several images to create for example the beach on panel 1. For these panels, I used the diary text written by Dania into a diary format using sticky boxes and the typeface Courier New to give the feeling of something that took time while being written, like it would with a typewriter. Repeatedly during the process, we shared our code for the panels we worked on with each other and gave each other feedback on viewability on our prospective screens. We also met several times to create our idea, decide on the visual representation, check in on the process, and clarify technical and creative questions.

Reflection and Evaluation

I am content with the final result. Our approach and design changed throughout the process as we learned new techniques or realized that some were not working the way we wanted them to. This project allowed me to learn many new things, especially how to create sticky boxes and animate images. I enjoyed the visual creativity this project allowed and found it interesting to use scrolling as a mode to navigate a story. I am happy with the final project, however, I also realized the importance for perfect structure and organisation which was a challenging team effort as we each brought our own way of organization together. In a future project, I would like to determine the structure and organisation as much as possible before starting to fill in content. After all, again I learned a lot from this project which also took a lot of my time.

Project partner: Ivory Lee

Project description

Our sound project aims to bring attention to the little things that make us happy during a time of a global pandemic. Our website hosts a collection of happiness testimonials enhanced with sound effects that allows the listener to share the moment and context with the person giving the testimonial. The design of the website supports the light and happy vibe through bright colors and flower animations.

Process

Our first step was to meet via Zoom to brainstorm and decide what kind of project we wanted to create. In a shared Google Doc, we collected visuals and ideas to build a common ground of what we want our project to be. We both started collecting sound recordings once we decided on our question: “What makes you happy during these times?” We uploaded these recordings to a shared Google Folder. I chose ready-made illustrations, traced them with Adobe Illustrator to remove the background and made some alterations. Ivory developed the website while I edited the voice recordings that we took with our phone of ourselves and our friends. Some recordings were sent to us via Facebook messenger. The sound effects (under creative-commons license) are taken from the sound archive freesound.org. The sounds reflect directly what the person talks about in the recording, i.e. waves, birds, laughter. I used Adobe Audacity to cut, combine and layer the voice recordings with the sound effects taken from the sound archive. The soundscape, combining urban and coastal elements to represent the diverse locations of the voices, was created in a similar way using different recordings available on freesound.org. I then shared these edited mp3 files with Ivory so that she could include them on our website. In our group check-in with Sarah, we asked for clarification on how to enable sound submission on our website as we would like for the listener to not only get a sense of happy people around them but to also be able to share their own experience. In case this would not function, we considered alternatives and could for example easily simplify this aspect of our project and encourage submissions to a mail address. Eventually, we were able to allow recording and submission through establishing a secure connection with our server thanks to Sarah. Once everything was put together, Ivory and I called again to check all details and make final adjustments.

Reflection and Evaluation

I enjoyed this project as we used both our skills to work in a time-efficient way. We agreed quickly on our project aim in terms of content as well as visuals. Ivory’s experience in web development allowed her to quickly create a nice website and my experience in sound editing allowed me to use Adobe Audition confidently. We realized our initial concept and achieved our goal to create a project in relation to the current global situation that gives some positivity.

Project partner: Waad Alfatih Abrahim, Deena Abubaker, Filip Bendevski

Project description

Our video project explores one story of how sport pants go missing in the laundry room from four different perspectives, everytime revealing different hints about how they went missing. The viewer can decide the order in which to watch the videos but we highly suggest a certain order through visual hints such as the size of the buttons and numbering.

Process

As we were located in different locations, we met via Zoom call first to brainstorm, then to write a script and a list of scenes and shots we wanted together. Then Waad, Deena, and Filip who were all based on campus recorded what we had planned in advance. Then we divided the different tasks: Waad edited the videos, I created vector-based graphics and a Website layout (mockup) with Adobe Illustrator using input and feedback from my group members. As a visual background, I chose a freely available image from Unsplash. I shared all visuals with the group to then be used by Filip and Deena to put everything together as a website.

Reflection and Evaluation

This was a good experience of working in a bigger group while being in different locations. At first, it was difficult to get everyone together to meet and brainstorm together but once we started, we worked efficiently and everyone took on the tasks they felt comfortable and experienced with. At first, I wanted to propose a project where we can all contribute equally on all levels, for example a project where we can all record in our prospective locations but I accepted the group’s decision and focussed on something I enjoy and can contribute remotely - the visual design of our project. The group meetings went well and we met frequently to discuss progress and share feedback and ideas. Reflecting on the beginning of the course, I definitely feel more comfortable creating websites as I know more about possibilities which makes the brainstorming process easier but also more interesting. Overall, I am confident with the group effort and outcome of this project.