Author: Cecilia Cai

http://imanas.shanghai.nyu.edu/~zc1151/commLab/finalProject/index.html

The above is the link to our final project(Internet art) — Social Media’s rebellion.

For this project, I worked with Vivian Zhu, and we designed a social media webpage that breaks itself in the end. We intend to convey the message that people nowadays are spending too much time indulging in social media platforms, where many of the posts are over exaggerated and distorted. Many are constructing some fake identities on social media, showing off some particular lifestyles, which are highly likely to be inconsistent with their real lives. We construct this website criticizing such phenomena, and let the website breaks down by itself as a warning to people, raising the questions of “What if the social media websites that you live on breaks down one day? Where is the true reality? How would you rearrange for your life?”

For the production of this project, I did the coding for the entire program, and Vivian did all the photoshop and video&audio editing.  All the material we used in this project (except for one picture of the website error)  is either edited or originally constructed, including the intro video at the beginning. We designed for the text contents for the posts, and use photoshop collaged pictures for the images. The background of the webpage is also photoshopped to be overlapped, indicating the “breaking down” of the website. As for background music playing during the second part of the project, where several windows pop up, it is recorded by Vivian of my playing the piano, and collaged the piano sound with the sound of computers, such as clicking on the keyboard, and computer’s opening and closing. For the coding part, I wrote 4 HTML pages, 2 CSS files, and 3 javascript files. I also made use of the P5 Canvas. I designed for the layout and functions of the website, including the effect of the pop-up windows and the canvas. Our cooperation was very smooth, and both of us contribute actively. Although it took us a hard time to come up with a good idea for this project, we managed to finalized our intention by several discussions and browsing for net artworks online.

The project begins with an intro video with the effect of website loading problematically. It then jumps to a webpage with the layout of the common social media’s style.  There are three posts displaying in total, respectively three bloggers showing their “ideal life”. The first one is a girl wearing exaggerated make-ups and emerged in fancy brands, showing off her sickly “beauty”. The second one is a filtered picture of a piece of pizza, which is oversaturated with colors. But the piece of pizza is collaged with catch-ups, oils, and butter, indicating that it is actually very unhealthy to people, and photoshopped photos of food on social media has little to do with “perfect life”. The last one is a selfie with a burning cake, representing the habits of people always taking pictures for social media uses regardless of conditions in reality. Even if the cake is burning and is like to cause a fire, what the blogger did is not to put out the fire, but rather showing off on the social media of this scene. The content of this last post is inspired by a MV we watched, in which the singer criticized the publics’ indulgement in the “fakeness” of social media by showing a couple of iconic scenes. The three posts are shown in the following screenshots.

    

There are several functions embedded on this page. All the buttons can trigger corresponding effects. It is different from normal social media website though, as before you successfully “like” or “favorite” a post, or “subscribe” to a blogger, the website will pop up some confirmation messages, telling people about its perspectives towards the posts, and warning people not to indulge in them. The color of the buttons will change to orange if people persist to “like” or “favorite” a post or “subscribe” to a blogger, as shown in the following screenshots. There are also functions of the search bar and go-to-top button. 

At the bottom of the webpage, there is a “click to load more” button, which will generate a pop-up window on click. The window is an audio container, and when clicking on the close button, it will play a piece of music, which is based on the rhythm of “the Beethoven virus”, and at the same time generates the continuous pop-up of windows displaying error messages, indicating that the website is broken. The effect is shown in the following screenshot. It will also open up a canvas, where a 45-second count-down is set up, and several lines of messages will display when the floating count-down item touches the border of the window. The words will also flicker after a while, and when the user clicks in the dashed corner, the canvas will be triggered, and colorful “x” shapes will be drawn along the movement of the mouse. 

 

I learned a lot from designing and coding for this project. We did some researches in the average uses of social media websites, and also in the “fashion internet styles”. I didn’t realize many of the shocking facts before actually searching for related data. For the coding, I not only explored many new functions such as generating pop-up windows and closing them, but also learn more about p5 canvas and are able to create some simple animations with it. I  gained lots of thinkings in the process of designing for the project, learning about how to change concrete messages to abstract ideas, and display them in the form of net art. I also thought a lot about the usability and features of the web as the medium and benefitted from it in creating the project.

Reflection

In the presentation for our final project, we got several critiques from our classmates, professors, and fellows. Some of them are shown below.

• Unsure of message -> thought it was meant to show how social media is shallow
  • Doesn’t get the relationship between the art/interactivity and the message
  • Some conflict between art and message
• Sequence works, just need to change content

The main problem we got was the unclarity of the message. As we are trying to show too much message, some of them conflict with each other, leading to confusion. 

Therefore I edited our project, removing the initial title page, for the title — “social media’s rebellion” is likely to mislead people. In addition, to make it more clear for our intention, I edited the content of the initial alert message, telling explicitly to the users that “I” (the alert messages) am speaking from the social media’s perspective, and am trying to warn people not to indulge in the virtual world on social media platforms, where the contents of the posts can be faked and deceiving. 

It reminds me that it is essential to think from the users’ perspectives and consider in depth about the way to convey the message. Although we discussed and revised our ideas and the flow of our project for several times, it still encounters the problem of not giving the message clear enough. Sometimes, it might be better to cut something from the project and stick to only one perspective, and make that specific message stronger. We did do lots of users’ tests and asked our friends to play with the project before the presentation, but most of them only gave good feedbacks about the pop-up window effect. I guess it is also because the way of using alert messages to express ideas is not that effective, as people normally tend to close the alert/confirm windows without carefully reading the contents. This also inspired me to explore other ways of presenting ideas and text content.

In this project, I’ll be working with Vivian.  We decided to focus on exploring the effects of social media on people’s lives in our project. For our work division, Vivian will focus more on the works related to photoshop and picture editing while I do more on the coding part. We will also gather the elements together and explore.

1. Concept

Is social media a sincere outlet to express oneself and link among friends, or a veritable battleground boasting and gloating to get appreciation from others?  While the answer could be subtle, it is undeniable that people are increasingly fascinated by the idea of “a perfect life” portrayed by Kim-Kardashian-like KOLs through social media posts. At the same time, people also indulge in hopping onto social media platforms like Facebook and Instagram, in order to read posts, check notifications, share interesting stuff, etc. A report by GWI reports internet users are now spending an average of 2 hours and 22 minutes per day on social networking and messaging platforms. We cannot live without them.

Therefore, a critical examination among relationships of social media, branding and the definition of a “good life” is a timely topic. What constitutes a perfect life at present? When you’re choosing brands online, what you are actually choosing?… And, what if all the good things are distorted? By adopting a critical, sarcastic perspective, we hope our project not just reflects a layer of the phenomena happening in the virtual world, but also leads the audience to have a deeper reflection upon how humans get interconnected and impacted via online engagement with the public.

2. Sources 

Amalia Ulman, Excellences & Perfections 2014-2015

Amalia used her social media profiles to stage a five-month scripted performance inspired by extreme makeover culture. She established herself to be an encouraging role through Instagram, profiling herself as what social media seemingly demands her to be. After repeating a lie for three months, she created a truth that she was unable to dismantle. We found this artist inspires us as she “boycotts” her online persona and criticizes the impact of social media. Our project is also about criticizing. However, instead of constructing a perfect figure, we take a sarcastic perspective by making everything imperfect and ugly on social media, reflecting the topic from another extreme angle.

Victoria Siemer “Human Error,”2014

Victoria is a graphic designer who imagines a world where everyday actions and scenes get a computer error message. She updates the photos of this series on her blog Witchoria every week. The photos look like Polaroid pictures, ranging from flowers to people to abstract nature scenes. On top of the scene is a modified error message. We get inspired in terms of the art of error conveying via her work. We had a difficult time thinking about how to express the theme of our project, and we found exaggerations and sarcasm would be effective ways, and error art helps our project stand out.

3. Production

We will construct a “fake” social media webpage, mimicking the style of Weibo. When the users open the page, all the posts appear to be normal, with beautifully edited contents (such as pictures, texts, and videos). However, when users interact with the page, the contents will gradually break and become disordered. For example, when clicking on the pictures to enlarge them, a window will pop up showing the pictures, which, instead of applied with pretty filters, are intentionally made uglier. As for the videos, they would appear as a pretty frame, but on playing, their contents are actually messed up. As more interactions are generated, the webpage itself becomes disordered, with texts displaying randomly and contents not showing orderly. If the user tries to exit the page, an alert will be generated and the users would be unable to quit.

The production of our project will make use of pictures, videos, and audios. The coding part will mainly be based on JavaScript, HTML, and CSS, and we will also use P5 for some part of the web page.

This reading refreshes some of my understandings of the Net art, and it is quite interesting to learn the historical development of this current trend. 

To me, I have always associated the Web with the concept of “new media”, and considered web art as something of current times. I failed to realize that the era of “contemporary” or “modern” has actually started quite early, and there are many concepts related to the social context of the past. Web art is not only about new digital technology or cool interactive effects, but also has something to do with revealing influential social ideas or phenomena of a certain period of time. As Rachel Greene introduced in the first paragraph, Net.art was artists, enthusiasts, and technoculture critics trading ideas, sustaining one another’s interest through ongoing dialogue” (162). In this sense, the “artists” that participated in the Net.art broke the strict category of fine artists, and, with the use of the new media — the web, expressed their thoughts and ideas in a more performative but still quite abstract way. Since many of the initial intentions of the earliest net arts were related to social activism or anonymity, they were not designed specifically for artistic expression. Greene stated that “the term ‘NET.ART’ is less a coinage than an accident. This implies that it was not started as an artistic behavior, but rather, the artistic value was spotted and attached to it later. 

The net arts are in a way a tool for social campaigns. As mentioned by Greene, some heated topics such as feminism are widely spread on the web. However, the virtual community created online do not reflect the actual reality and tend more to go to an extreme. As the interpersonal relationship is shallower, and there is usually a gap between one’s true identity in real life and his identity online, prevailing words and comments on the web only represent some certain groups of people. Greene also states that, despite many female artists who seem to gain their voices and recognition on the web, the topic of feminism only appeals to a few in reality.

It is also interesting to notice that, with the communicative feature of the web, web arts are naturally used in some promotional events or advertising activities, arousing the sense of community. As the Internet creates a virtual public space where users create and decide for its contents, the net arts cannot popularize without being understood and spread by the users. They are usually interactive, contradictive, and playful. However, the better viewability and perceptibility of net art pieces do not necessarily lead to the reduction of their conceptual meaning, which actually contradicts my previous beliefs. Many of the net art pieces are academic and specialized, not easy to fully comprehend. 

Finally, reflecting back to what we’ve read about McLuhan’s “the medium is the message”, I believe that the web, or more generally, digital technology, is a form of new media, which brings challenges as well as new possibilities to artists in current society. For us to better understand net art pieces, it is also essential to understand what message the medium web implies and how the cyber culture influence these art works.

https://anthology.rhizome.org/reabracadabra

For internet art project, I read about this artwork called REABRACADABRA created by EDUARDO KAC in 1985. It presents an animation of letters on the digital screen of a Videotexto, which, according to the introduction, is “a pre-internet telecommunications network in Brazil that was implemented in 1982”, and is “text-driven”.

The name “abracadabra” is itself a poem, and the artist Eduardo Kac played around letters in this line, choosing the letter A as the main letter, and displaying others in different font-size moving around A. The letter A itself is gradually drawn, tuning with the pace that the smaller letters move and change.  Kac was trying to explore the limits of  Videotexto platform for its ability to generate and present texts. Below are some screenshots of his project.

It started with drawing the shape of A, which is a bit abstract and hard to recognize at the very beginning. But as it moves on and reshapes the lines, it became much more obvious that what it draws is a letter A. Also, for the small shiny dots surrounding the 3-D letter A, I originally didn’t recognize them as letters, but instead seeing them as starts. It was not until I reread the description of the project did I realize that these animations of the letters are composing a beautiful poem. 

The concept of this web art is rather abstract, and it takes time to understand. But it does successfully convey the idea that the letters themselves are beautiful, and can be as attractive as a poem.

http://imanas.shanghai.nyu.edu/~zc1151/commLab/VideoProject/index.html

This is the link to our interactive video website. In this project, I worked with Angel, Lily, and Kat.

I have to confess that group work is a lot more frustrating than partners work, and our cooperation is not that enjoyable from the beginning. We changed our ideas for the project a couple of times, for the reason that it was hard for us to get together and discuss. I’ve been trying to push forward a meetup, but there were always one or two of us missing, without notifying us. We had our basic idea during a discussion in class, but it was very vague and a lot of the detail storylines were missing. I discussed with Angel about it later during one class, when Kat and Lily were missing, and we settled some plots of our story. I drafted a transcript for our shooting and shared it with our group mates, but did not get much feedback. I also did the storyboard since only me and Angel were familiar with our later idea about the story. It was not until we started shooting the video did I realize that Kat and Lily were not very familiar with our idea. We invited some of our friends to be the actresses, and four of us were all there working on the shooting. The shooting was actually an efficient process since our actresses were very talented and gave us many solid suggestions. It was also the most enjoyable part since all four of us participated in it.

As for the video editing, we had four scenes and four people, so each one of us chose a scene to edit. Angel was the most devoted person in editing the videos tho, and only me and she managed to finish our parts before the presentation for rough cuts. Angel also made great efforts in searching for suitable music for our clips, although we eventually decided to use different parts from the same music for the background music for all of the clips, which is suggested by Kat. It was hard since all of us use different video editing tools, and the settings are not consistent. I used Premier for my part and played around with the special effects and editing functions it offers. However, since I am busy building the entire webpage, I could not do much about other clips except for putting all of them into Premier and re-export them, so that I would get the ideal file size for displaying on the webpage. For the four scenes, Angel did the editing for the first one (Monday’s diary), I did the second scene (Tuesday’s diary), Kat did the third one (Wednesday’s) and Lily did the last one (Thursday’s). Angel also helped with me with adding music to my part.

For the webpage, I built it entirely on my own. For our initial work distribution, Kat was suggesting that she could help part of the coding work. But she was not available for the whole weekends, which is the time I worked on most part of it. I found it really inefficient to discuss on WeChat, where nothing could be done except for bringing up more confusions and misunderstandings. Therefore I decided to work as much as I can by myself. To my frustration, when I explained what I did for the webpage to my groupmates, they were not that responsive, and Kat questioned many of the ideas without offering valuable help or suggestions on the work. We finally come to an agreement after discussing more after class, and I continued my work on finishing up the webpage. 

For the website content, I decided to mimic the context of a “diary book”, and embedded the video clips as scenes in lines of texts. I drew the background pictures on an IPad, intentionally making it seems girlish so as to fit in with our story setting.

These are my drawings.

   

I also chose a font family that seems more like handwritten. For the background pictures, I originally drew them smaller, which did not make much sense since the page turning effect I used only functions in the corner of the webpage, which is separate from the diary book corner. Professor Ann suggested me to enlarge the page to make the two corners meet. In addition, I originally put the video clip on one single page above the diary book, which seems a bit off the context, and Ann challenged me to think of another way to display the video. Therefore I later made it smaller as a picture you can stick on your diary book, and added some colorful frames to them. The videos would not be played until the users click on it. To suggest how this effect works, I wrote another function to make the frames of the videos blinking when not being enlarged, and thus the users would intuitively try clicking on them to explore the effect. The blinking stops when the videos are enlarged and began to play. The two screenshots below are the display of the webpage before and after the users click on the video.

 

And the front page looks like this.

For the coding, I studied and made use of the turn.js library(jquery) myself, for its effect of flipping pages. I also learned from the class notes of the functions to resize the videos for better displaying. Although the code file seems to be quite long, a lot of the functions are similar, because they are just for different content on different pages. It was time-consuming to decide for and adjust the layout though, which took me lots of time. I also used the rotating CSS variable for the first time, making the look of the contents more cute and stylish, making the webpage more obvious as a diary book. 

I ran into some problems when displaying the videos, as some clips just do not show up on the website. Dave helped me look into it and suggested that it was because the files were too large. I re-exported them by Premier and it worked. Also for the flickering effect of the frames, I originally set the frames to be none during the small time period that they disappear, and this turned out to move the positions of the videos, for the frames themselves take up places. So I figured it is more efficient if I just set the color to be white.

I am not as satisfied with this project as with my previous ones. I originally wanted to focus more on the videos, exploring how different variables such as the exposure, paces, colors, and background music can do to video contents, making the same content into different genres. But this idea was denied by Kat and we were not able to do it. Moreover, I would expect our edits of the videos to be more delicate, tuning the lights and the fadings. But I really can’t decide for others’ choice, and do not have enough time to polish all the video clips while writing the website. It seems like we did not have an efficient division of our work in the beginning, but it was really hard since we were all quite busy, and people are not responsive to meet up. For most of the time, it was just me and Angel to meet and decide for the detail settings. This is a potential problem since Kat is always offering new ideas when we’ve already finished up most of the works, but before, when we were actually working on it, she was either not available or missing. She always shows up on WeChat to ask about the progress, but it was really hard to explain and display everything on WeChat, and even harder for decision making. I feel like I am personally more familiar with webpage and coding, and were determined to challenge myself more with video shooting and editing. I did learn much from the process, but I would certainly find it more meaningful if I can have more time exploring this field instead of working on the website.