Author: Winny Wang

link: http://imanas.shanghai.nyu.edu/~pw1101/onlinecomics/comics.html

Description of the project:

Kat and I came up with the idea of telling the story of coffee. First of all, we did some search online and created a storyline of the process to produce coffee, including: planting, nurturing, picking, etc. To tell a good story, we individually created two characters with different personalities: a girl who likes coffee is always enthusiastic and energetic; a boy who never tastes coffee before is afraid of stepping out his comfort zone. An encounter between the girl and the boy is the start of this adventure of coffee production. We want this project to be educational and interesting. People who were unaware how coffee is produced can have a short journey with our characters and get to this daily drink.

Process:

The first process is preparation. We went through many websites and looked for information, images that we want to pass on to our users. It turned out the process of producing coffee is more complex than we thought. After discussion, we selected some simple but possibly unknown information. We organized them and create a storyline.

The storyline is basically for delivering the information and also keeping the audience’s attentions. For that, Kat and I individually created two characters, through who the story of coffee will be told. To make it funny, we decided on a boy who has never drank coffee before and a girl who is passionate about coffee. In the set of meeting in a café, two extremely different types of people bring up the mystery behind coffee production.

Next we decided on the format of delivering the coffee adventure. Since there is still lots of information we need to squeeze in our webpage, we created both narration text (for general storyline) and pop-up information text (for detail information). And we collaged our comic drawing inside or at the edge of the images, showing that these two characters are actually interacting in this imagined world of “coffee adventure”.

Last we added more elements inside our page: dialogue bubbles, gifs, etc. But there were few pictures that weren’t showing in our presentation.

Reflections:

This project is more difficult and time-consuming than I thought.  First difficulty is the information our project contains is a lot, and the efforts we spend on organizing information, decorating are a lot. Second difficulty is the forms of interaction, at first we planned to create interaction through the actions and dialogues between two characters. But the space and time are limited, we couldn’t get to create interaction of various kinds. The third difficulty is the work distribution. At first, we planned to divide this project into half so that both of us can have equal amount of coding, drawing and text organizing. But through the process, we found that one of us is better at coding and the other is better at drawing. It was a bit of late for us to change our original plan, while at the same time we draw/code in our individual style, which also makes the finalizing part more difficulty.

Generally, the project meets my goal in terms of format and the purpose of being educational. We have useful and selected information; we create interesting scenarios and dialogues between two original characters; and we have a nice idea how boring information can be presented.

Link: http://http//imanas.shanghai.nyu.edu/~pw1101/week4

I had a little trouble doing this exercise and I couldn’t solve it. I was able to run the process of walking from pic1 to pic2, but when I added pic3 the variable was not working. The code I have for changing from pic1 to pic2 is like this:

I thought I could use a similar code for changing from pic2 to pic3 but it doesn’t work. I can’t really figure out why this logic doesn’t work. So I will just wait till Monday to find out the solution.

Link: Click here to view cat website.

For this exercise, I learned that html page provides all the resources, css page controls the styling and designing, java script page is for changes. I am also now clear about using <id> <flex> <function>, which took me some time but it’s pretty useful.

Link to my website: http://imanas.shanghai.nyu.edu/~pw1101/week3/hw3.html

I enriched my profile website using css for adding background color, changing fonts and layout. I applied links to the pictures so that when people click the picture they can directly go to another page. I also created another link for additional information. 

The problem I have is that I didn’t make a good decision about how to combine texts and pictures. Only the pictures on the left leading to others links because I don’t think the pictures on the right need additional information. I don’t want to simplify my website by putting all elements at the same place. So I add a note under the text section, hope it makes it clear for users. 

Another problem I have is using flex property. Sometimes I can’t achieve what I do using flex (probably because I’m not familiar with it…), so I would use position or float to help me. But then my codes seem to be messed up. My solution for now is to keep my goals and use only one property each time to make things simply.

For this photoshop assignment, I choose three pictures of a famous singer Rihanna, and combine them to make a brand new poster for her cosmetic product! 

First of all, I selected and made new layer using the “fenty beauty by Rihanna” caption: (like picture below)

Second, I again used select tool and made layers of two of Rihanna’s shots. (like below)

Last, I downloaded a black background and combine all these 3 elements together, played with the layout a little bit and also used filter. Here is the final poster I created:

The process of making this poster wasn’t too hard, but I had problem with layering at this moment and I didn’t understand why I can’t edit all these three pictures all together (still don’t know but I will ask learning assistant about it). Generally, it’s pretty useful to know how to edit and combine pictures.