Final Project Documentation

Jannie Z & Justin C

Link:

https://github.com/320834/Poemsite

Description:  

Our project is a website that allows users to create poems based on the templates that users have already created and a deck of words that randomly generated. Also they can create their own templates and upload them for everyone to use. After creating their own poems, they could save and publish them so that everyone can view them.

Process:

Inspiration:

Our idea originally came from our understanding of music, and other art form. We wanted to create something related to music at first, but we were stuck in a situation where we found there weren’t much room for new ideas when it comes to music. While we were discussing, we both thought that art should be open to interpretation with no definite answer, so our project should be open to interpretation as well. Then I thought of poems. Personally, I am very passionate about poems and lyrics. Poems are short, but reveal much more and leave a bigger room for readers to reflect on their own aesthetics, experiences and feelings. So we decided to use poem as the carrier. And then we thought of MadLibs, a phrasal template word game where one player prompts others for a list of words to substitute for blanks in a story.

(MadLibs)

So we decided to do something similar, but with more sense than pure entertainment. We want to create a welcoming platform that allows people to release their inner art. 

Web Design / User Interface:

I designed the user interface. I took inspiration from moon phases. I decided to name our project “phase”. Because moon phase changes everyday, just like us. We keep on changing, in different stages of our life. And the angle we see things is different, too. The different phases reflect different aesthetics and perspectives of ours. Maybe one day you create something, and a few years/months later you go back to look at it you will fell something totally different. I think this fits our theme so named our project “phase”.

Since we named our project phase, the whole theme of the website is defined.  Main color set is black/white. I used some pictures from the Internet and edited them using photoshop. 

(I created a gif picture using photoshop for a star twinkling effect.)

I was inspired by a website called blacknegative. So I want to design something as cool as theirs.

(Blacknegative: http://blacknegative.com/#!/loader/)

Their website contains a lot of cool animations on the website, and a lot of transitions between pages and events. So I did something similar to this.

•     Hover and zoom in effect. 

When hovering on the buttons, it will zoom it slowly.  I did this by using css transform and transition property.

•  Fade in and out effect.

On the intro page, the introduction will slowly appears.

• Phase video as the background.

I created a video of moon phase and used it as the background. (Seen above)

• Handwritten title and animation.

I wrote the title “phase” on an animation generator and embedded it into our html page.

For the display page of templates, I used a phase calendar to be the background. And each icon represents a template. It will have the name of the template displayed on top of the icon. As more templates been created, more icons will appear.

I also used two bar images, which will always stay on top of the website, keep fixed.

Programming/Coding:

My partner Justin did the most part of programming. He set up a database where stores all the templates and poems that have been created and display them on the webpage. He also created a words generator function which randomly pulls some words out of dictionary at a time. 

But we received feedback from user testing that the words may be too difficult for non English speakers. So we toned down the difficulty of words a little bit. Instead directly pulling them out from a whole dictionary, we now have a set of words (eliminated the difficult ones)  to choose from.

Music:

I chose some meditation music as the background music, to avoid people being distracted by it. I chose some famous work by Dan Gibson, a famous sound-collector who spent his whole life on collecting different nature sounds.

Post-Moterm:

There’s still room for development. As the feedbacks we received said, the randomly generated words do not really represent our ideas of “release your inner art”. And there could be a function that allows people to like a template, so that there could be a rank of the templates. Also, in the creating template page, we have problems with the blanks. People have to type in exactly four underlines to make it a blank.

Future Development if Possible:

• Have a like function for the templates and poems.
• Adjust the randomly generator of words to something makes more sense. (e.g. categorize words by theme.)
• Fix the position problem on different screens. 
• Fix the problem of blanks occurred in the creating template page.

In summary, I think our final project fulfilled what we hoped to achieve. The style is consistent throughout the whole process and the interaction worked well. But more future developments could be done.

Communications Lab Final Project Proposal

Jannie Z

As the digital age approaches with exponential amount of information based on the Internet, everyone is now able to create their own content and deliver their thoughts to the world. Just as the Internet has opened up the world for each and every one of us, it has also opened up each and every one of us to the world. So, for our final project for Communications Lab, me and Justin decided to make a platform where everyone could create and share their own content.

Our final project will reflect the different aesthetics within our users. We want our project to be self-explaining, interactive and have limitless possibilities. The users could create their own poems using our project by filling in the blanks of our default template or create their own template. They will have different themes to choose at the beginning, each theme contains a deck of words that you could use to finish their own poems. After filling up the poems, they could choose to save it and share it to the Internet or not. And they can look at others’ works as well.

 Personally, I always want to create a project that has multiple possibilities, and the poem or lyrics have always been my inspiration. Poem or lyrics are relatively short and abstract, so it is open for interpretation. Everyone could have their own understanding of a poem or a song based on their inner aesthetics and personal experiences, it does not need to be uniform. So, we decided to let the poem be the carrier of our project.

During the discussion period, we came to a lot of different projects. Mad Libs is our major source of inspiration. It is a phrasal template word game where one player prompts others for a list of words to substitute for blanks in a story. Our project borrows the idea from Mad Libs, but we have slightly different goals. While Mad Libs is usually played for fun or enhancing language ability, our project aims at reflecting the different aesthetics of users. After completing the template, you can save and share your work, and read the ones that have been shared before. It will be really fascinating to see how others interpret and finish the poem. Another project we draw inspiration from is “Blacknegative”. It is a web-art project that involves a lot of animation, pictures, soothing music and great design. This project serves as the UI design inspiration. We want to make the process of our project soothing, almost like a meditation. And Blacknegative sparks a lot of design ideas for us.

Our project is going to be a website-based project. We will mainly use HTML, JavaScript, and CSS to accomplish this. JavaScript will cover most of the interaction part, from choosing themes at the very beginning and the “save&share” function in the end. The “save&share” function will be the hardest part of this project. For animation, we will mainly use Processing/P5. In order to make the website dynamic, we need to work on the transitions from pages to pages and also, the interfaces. There will engage audios to give users a soothing experience. We will also use CSS to design the interface. It requires a lot of work both on JavaScript and CSS.

Sources: Mad Libs:  https://en.wikipedia.org/wiki/Mad_Libs

       Blacknegative:  http://blacknegative.com/#!/loader/

Link: http://www.oasisinet.com/#!/home

This is the official website for a British rock band Oasis. I found it very inspirational.

First because the layout of the page is great and consistent. Black background and white words, the same font throughout the whole web.

(Music Main Page)

Also the display of the album pictures and videos are aligned perfectly. Some of them are pictures and some of them are words.

(Album Display)

The navigation bar also follows the same style.

(navigation Bar)

Secondly is the interaction of the website. It has clear instructions(all in blue color).

(Interaction)

And when you open a page there will always be some animation. Also, they way they play the video is not simply direct it to the YouTube page, but they play it on their own page and has name of the song and the information of the concert at the bottom.

(Video Play Page)

So I think this is a very sophisticated webpage and it inspired me a lot.

Link: http://imanas.shanghai.nyu.edu/~vra230/Video-Project/Video-Project/project.html

Description:

Our project is called “Our Story”. It’s a story about a couple broke up and the man is listening to music while reminiscing. It’s made up of clips of his memory, sad or happy.

(mainpage)

Process:

Inspiration:

At first we want to do a story about a man with amnesia wandering around the city and saw some particular things then trigger his memory. But then we found it less interactive. Since we are all music lovers, so we decided to do something like music videos. By picking different songs you trigger different memory. Happy songs means happy memory and vise versa.

Shooting:

Me and Val are in charge of shooting. I invited my friend to be the actor and I am the actress. At first I didn’t really know how to use the camera. The videos I shot were over-exposed. But then I adjusted the exposure and the lighting. And there’s also options where we can choose style. We used Landscape for the park scene and Portrait for the cafe scene.

Then we ran into problem when trying to focus. We used the auto-focus mode but it won’t work when it’s shooting videos. It only worked when we tried to take pictures. So when we zoom in we have to focus at the same time, which resulted some shakiness.

We use the tripod to shoot some standing scenes. It reduced some shakiness and it made it easier for us to zoom and focus at the same time.

We shot the scenes multiple times to get different perspectives.

We went to several places to shoot. We shot all the happy scenes in the daytime with a sunny sky. And the sad scenes we shot them in the nighttime.

Audio:

We picked six songs as the theme songs for our project. And we edited the video according to songs. 

(songnames)

Editing:

Thomas did most of the editing part. He switched between different perspectives. And he adjusted the colors to make it feel like memory, but different from the intro and outro. Just to create distinctions.  

Web Design & Coding:

I designed the webpage. I want the videos to lay out on some old notebook to give it a feeling of nostalgia. Originally, it is like a real notebook, with a poem and some handwriting on it. But we didn’t have enough time to make this part of the webpage.

(Original background)

I used some lines from Frank Ocean’s Thinkin’ Bout You in the heading of the webpage, also at the very last part of outro, to make this as our theme.

(Lyrics from Thinkin’ Bout You by Frank Ocean)

I used photoshop, too. I blurred the heading background for the heading to be more obvious. I also erased the original context on the notebook and added ours.

For the interaction part, we placed six divs on the places of the song names. So that we you click it it directs to the video playing page. We also have the return button to go back to the main page. 

(some part of our code)

Post-Moterm:

There’s still so much we could do to improve our project. I’m not satisfied with what we have done so far. The layout is not clear enough and the outro is not done in the right way.

Problems:

Audio:

The music works well with the memories, but for the intro and outro, we wanted to add sounds like footsteps. But we don’t have enough time to make it synchronized. So we kept the intro and outro silent.  But it is awkward and  just don’t work.

Layout:

The original background should be the picture with poems and handwriting on it. It should change after the intro is played. 

Also, the button for the outro is so awkward because we don’t have enough to fix it. 

What I Learned:

• Get more familiar with the camera.
• How to use Premiere.

Future Development if Possible:

• Add sounds to the intro and outro.
• Fix the layout problem.
• Add Speed up and Slow down button for the memory. So if you want to read the memory quicker or you want to slow it down it could all work. Also add another form of interaction.

In summary, there’s still a lot we can do to our project and we could have done that earlier. But because of poor teamwork and time management, we didn’t achieve what we expected. I also learned teamwork and cooperation is also a very important part for a project. 

In the TED Talk “The Danger of A Single Story”, Novelist Chimamanda Adichie tells her story of growing up as an African child and going the the USA to study. She shared  a lot of experiences of  “single stories”. Like when she assuming her domestic help’s whole family was nothing but poor, and how her American roommate thinks she only listen to tribe music. By presenting those examples, she emphasized the importance of not assuming everything just by one single narrow perspective but multiple angles.

I fully comprehend and acknowledge what she conveys. A person’s knowledge is very limited, and people tend to make assumptions about the things they don’t know very well based on the limited knowledge they have.  The nature of avoiding complexity of human makes us considering people as one thing, one single story. Just like what she says, “The single story creates stereotypes, and the problem with stereotypes is not that they are untrue, but that they are incomplete. They make one story become the only story.”  And the consequence of viewing people from the single story is that “it robs people of dignity. It makes our recognition of our equal humanity difficult. It emphasizes how we are different rather than how we are similar”. At the end of the day, we are just humans, we are similar to each other more than we think we could be.