Summary of Work- Visual Design- Yali

For visual design, I have done the overall interface of main projectes and poster of exhibition.

Interface of Processing projects

Since our project is about digital platforms and  personality, I tried to design the interface to be similar to a web page, but not too much like a real one.My initial inspiration was the effect of this pixel art.


However, this pink and  pixel art were not suitable for our theme, so it was replaced with the scientific blue-green color and simply line style.


In this interface, there is an external border that looks like a web page with a inside rectangle similar to a display. On the right is a list of icon buttons representing six different projects. The overall interface is like an old-fashioned TV set.



We took pictures of each member of our team and Yinyu used Photoshop to cut and combine different part of the face from each member.


After the initial design of Ying Yu, I further processed the poster.

  • Change Colors and Enhanced Contrast

Blue, pink, and purple colors are translucently filled in different boxes,and in the middle of the screen is our theme “personality”.

The left half is uneffectal and represents the real world, while the twisted filter on the right half looks like a mechanical failure effect, which symbolizes the cyber world.


  • Futuristic Photo Manipulations

After seeing the Futuristic Photo Manipulations by Retoka, I tried to add new effects to make the right side of the poster look more impactful and layered.

Spanish digital artist Retoka created this amazing project called “Client Error 4xx” which illustrator some error images in a way I’ve never seen before.


I processed my photo into the following image according to Retoka’s method, and finally added it to the poster.


  • Final effect of poster:

The center of the picture is the main content of the poster mentioned above. I crossed the ripple effect on the right to the black background area, in order to make the picture less monotonous, and added a gradient circle on the left to balance the picture.

The text in the upper right corner is the title of our exhibition and the name of the event on Facebook. I made it more conspicuous to clarify the purpose of our poster. The gradient from purple to pink is unified with the main picture。

At the bottom is the details of the exhibition.


Final Effects of Processing & Processing Files

  • Processing Sketch Files

Below is the link to all of our 6 processing files.


  • Final Effects of Processing

I record the process by using the QuickTime Player and edited these videos by using Adobe Premiere. Additionally, I designed some introductory effects by using Adobe After Effects and link all of the separate 6 screencasts of processing files into one whole video. I keep the color the same as the dominant tone of our interface. To add more dynamic effects to the video, I also make the small triangle keep rotating.

Below is the link to the screencast of the final effects of our 6 processing files.

Summary of work – Danfeng

I am a member of visual team, and for the submission 2, my work is about visual and interactive design.

When our group decided to analyse the differences of people’s online and offline personalities, the first inspiration jumps into my mind is the film Ralph Breaks the Internet: Wreck-It Ralph 2. It matches our theme, and the inspiration of our six fragmented test scenes are also from the film.

e.g. one of our personality test-Negative comments.

For the second submission, I’ve developed the design of the personality test via Processing. In order to increase the interactivity with the tester, I tried to write code with Processing instead of just making the plan draft with Adobe Photoshop and Adobe Illustrator. and I still tried to make it into a dialogue format that will enhance the fun and increase the engagement of testers.

There are some parts of main coding project:


Additionally, I’ve found an interesting source from the OpenProcessing. It is based on the control of sound to proceed to the next step. It seems that can be applied to our personality tests, although it looks a little bit simple.

Moreover, maoqi and I designed six different start interfaces according the questions. The following are the main visual design elements:

For the exhibition day, my responsibility is to make sure that the exhibition provides users with a good sense of experience, because we have six computers, and I have to make sure that each computer can be used. Besides, due to the fact that the Processing can get stuck easily for hardware reasons, so I have to adjust it often to make sure the processing on each computer runs well.





Summary of Work-coding-Yali

For coding, I have done two of these six projects- INS qustion and pop up ads, and the  layout and interface of Processing projects and the main logic for jumping interface.



– processing of work

Firstly, I have drawing the original visual  scenes for  feedback video which connected to the INS question.This is a video of drawing proces by ipad.-process of drawing

Then, I used the Pr to edit the videos.

Finally, I used Processing to coding.

–  visual design concept

visual of ins feedback A

  • If audiences choose the option”I always put the energetic pictures on social media although I was tired actually“, they will gain the first feedback video.
  • In this video, there are  a character with curled up body is surrounded by a world of lights and hight buildings. With  the flashing lights, the soul  seems to be pulled away and the character seems to be inhaled by the black hole that represents the virtual world. The color is a dark blue with some repressive feelings.


visual of ins feedback B

  • If audiences choose the option”I would like to post real state photos on social media if I feel tired“, they will gain the second feedback video.
  • A person with a stretched body, like being held by two clouds and slowly moving away from the black hole. Then, the surrounding glamorous background began to disappear, and finally into a world of gentle and pink .The color and style will let audiences fell comfortable and relax.

– Coding process

At the beginning of this coding project, we encountered some difficulties. For example,  after inserting a video, the background music of the video plays as soon as the project is run (instead of after pressing the button). In addition,  how to jump to the different interfaces by pressing the button was the most chanllenge.

Finally, I found a solution, which is to use the conditional statement to jump to the interface. Users could jump to next interface by pressing specific button.(main logic of jump interface is below)

At the same time, users could jump to different feedback interface according to their choice of question.(main coding is below)

– Development of the project

According to the feedback from tutors and audiences, this project was  a bit monotonous,which lacks of some interesting experience. So I add  more interaction  between audiences and digital devices.

I designed a scene to tell the audience, the next step is to take a photo and post it on Ins. If you are ready, you can press the button to take a photo. The photos (screenshots) will be stored in the local folder. We can see screenshots of the audience to analyze when they take pictures,whether they are relaxed or nervous? Are they still the same as usual or  deliberately taking pose?

There are visual interface and main coding.



What if there are countless pop-up ads in real life? In the movie Ralph Breaks the Internet, the pop-up ads are anthropomorphized:

(the screenshots from the movie Ralph Breaks the Internet )

Will these pop-up ads make you irritated? Will you have no patience?Will you try to close these ads quickly and madly? If you find that these ads can’t be closed and always appear around you, will you be even more angry?

Maybe your actions and expression when you click ads are exposing your personality!

So, we designed this project to simulate pop-up ads that appear in real life and drown your world. You must always click on the pop-up ad to erase them, or you can choose to drag them to the edge of the screen.

(picture from one audience of our exhibition)


There are main coding of this project.


– Reflecting on the project

I found some interesting things by observing the performance of the testers at the exhibition.

First of all, although everyone wants to remove the pop-up ads from their faces, the methods are different. Most people want to exterminate it, so they choose to click and erase; while a few choose to drag the ads to the edge of the screen. After the interviews with the testers, I found that those who dragged the target instead of clicking were more creative and calm, and they wanted to experience the fun of this project more than to end it quickly.

In addition, although pop-up ads are annoying, testers have different moods when trying to eliminate them. Some testers think this is a stress-free game and will be happy after the ads are erased. One  tester even  enjoyed spended more than ten minutes on this elimination game.

“It’s really interesting…I can’t stop to click on them.”

——from  tester Huang.

However, some testers do feel annoyed and lose patience. Especially  the ads have not disappeared after be clicked continuously, most people will choose to give up and go directly to the next screen.

“It drives me crazy! I do fell angry and annoyed when those pop-up ads could not be eliminated.”

——from  tester Lee.


These findings do makes me reflect on whether our online life and digital devices  really affect or shape our real personality.


Summary of Work – Tristan

Being primarily part of the Sound team, my job was focused within the generation and integration of sound and music into the project. From the start we had a good theoretical idea behind the project; to raise some form of awareness into the ways in which modern digital tools influence the way individuals socialize and operate. However, while our main idea did not shift much from the initial development stages, we were not clear on what the physical interface would be. A lot of the early weeks were spent discussing and brainstorming ideas into what this could be and how it would look and sound. We made initial ideas of artwork and soundscapes, this is an example of the ideas I had:

We initially thought of an online test based on the Myers Briggs personality test. The person would take the test and an audiovisual outcome would appear based on their choices made. The questions we would ask were based on the test and therefore the underlying direction was there. However, how we would maneuver and dictate what the person was exposed to was still in question. Potentially we would show them something that has nothing to do with their relative choices, which could make them question their own expected outcomes since most people do have a preconceived notion of what their personality is. Nevertheless, we had an initial plan to work from. The audiovisual content would be based on the personality descriptions found on the website.

With this as a base idea, I designed an assortment of composition/ soundscapes that would sonically represent those personality descriptions. Most of my inspirations came from analyzing and understanding the characteristics of each personality description and trying to create fitting compositions/soundscapes. There were 4 overarching groups of personality types; Analysts, Diplomats, Sentients, and Explorers:





Most of these compositions were made using my instruments and a collection of software programs such as Max/Msp. All sequenced and mixed into Ableton live.

After submission 1, our project quickly shifted from being an online test into taking more of an exposition form. As the weeks went by we started to develop a more clear and concise direction as to where this project would go. As the visual team began to show more of what the final interfaces would be, this created a good anchor point into how the sonic narrative had to follow that. The plan turned into a series of screens or computers each showcasing a video or an interactive module, which was to showcase some of the modern behaviors, acted online as a consequence of these digital tool’s biases. All of the sound people designed their interpretations of what they thought would fit sonically to the narrative and together as a group we decided which we were going to use. Here are some examples of my compositions to video feedback:

Unlike the personality test, I did not have any strong point of reference as to what the audio material had to sound like. This was left a much more subjective exercise which is why some of my designs were used in the final exhibition and some were left out because they did not serve the visual component as well as the ones we ended up using.

In order to tie in the whole experience it was a good idea to create a drone continuously playing in the background while people were interacting with the screens:

Primary drone

Secondary drone

The role of this is to create a strong sonic carpet in which the other soundscapes and sounds can sit on. It has to still fit within the general aesthetic of the experience but not distract from what is happening on the screens, therefore, there is supposed to be a minimal little movement and shouldn’t be too rich harmonically to not interfere with the tones and rhythms of the main sounds.

Exhibition day:

The most challenging aspect of the exhibition was getting all the individual components to link up and work with each other. We had 6 computers, which had to be connected to the 6 screens and for each to be connected to the main mixer and to level them appropriately while the drone is playing from my audio interface in the background. Claudio and I procured the front and back speakers. Due to the fact that some of the sounds coming from the screens were not all at exactly the same level, my self and Adam had to continuously adjust the volumes of each in real time in order to keep a consistent sound level to give a more balanced sonic landscape for the experience. Another issue was to isolate the experience from its surrounding activity. As we were sharing the space with 3 other exhibitions, there was a lot of sound and light bleeding in from the outside. We did have wooden walls and black curtains to create separation from the outside, however since we were located in the middle of the space there still was constant background noise, which could distract from the experience itself.

Personal reflection post exhibition:

Based on the interviews we did, it seems one of the common issue people faced with our exhibition was the fact that it was hard to initially grasp what our underlying message was. This is an integral aspect of our feedback because if individuals do not understand our main message then it subtracts the experience to just a collection of fun audiovisual content without a strong ‘backbone’. It seemed evident to us what we were targeting towards; raising awareness as to how digital platforms affect and shift interactions and how as a consequence, our personalities are shaped by it. Because we were in the shoes of the ones designing the experience and not the one experiencing it, we were somewhat ignorant of how the exhibition would come across to a newcomer. What can sometimes be clear and evident to us might not be the case for someone coming in with a completely fresh mindset. In the future, it would be wiser to experiment with people who are not part of the team prior to the exhibition to see if it makes sense to them, as this is the mindset the majority of people experiencing our exhibition would have. This is potentially a byproduct of leaving too much to subjective interpretation and not having a strong enough initial impression. I think if we would have explained prior to the people going into the experience what our mission statement was, they would have been able to make a more cohesive sense of the whole experience. On the other hand, maybe the audiovisual content happening on the screens could have had more strength in displaying that message, which also contributed to some of the confusion.


Summary of work – Submission 2 – Claudio

Social media sounds library

I have created a sound library of all the music, notifications and icon sounds we come across in our daily lives and sorted them by positive, negative, reassuring or intimidating characteristics

Question 3

With this question my goal was to make the audience feel uncomfortable through personal attacks; this was achieved by using recorded samples of people making mean comments in different languages to highlight the fact that it is a worldwide phenomenon which the internet has exposed us to. These samples have been heavily distorted and their bit rate drastically reduced to fit into low-res, vintage aesthetic the group had in mind.

All these different voices blend in with electrical interferences, which are used to convey a malfunction in the device, almost as it was being hacked and our harshest critics have taken control of it.

A third layer comprises an FM synth bass pad which mixes with some radio interferences that I recorded with a pick up coil microphone; these samples have then been pitched and time stretched to create a dark atmosphere.

Question 5

The inspiration for this design came from the keygen music that hackers employ in the interfaces they design to make users install illegal versions of different softwares. Team R2R, for instance, made tracker music popular by using it in their pirate versions of music production softwares which are downloaded by million of users every year.

Here is an example:

With this question my goal was to play on that idea and incorporate all the icon sounds from different social media platforms. Unfortunately due to the limited time at my disposal, I could not get acquainted with 8 bit tracking softwares enough to be comfortable designing all of the different sounds on that alone; for this reason I chose to use a traditional DAW and try to replicate the sonic qualities of legendary sound chips like the SID, used on the Commodore 64 by using bit reduction distortion and filtering

The sound design aims at overwhelming the audience with anxiety, making them feel to be in a race against the clock as they try to get rid of these annoying pop-up windows. The music grows in intensity as time passes, almost like a ticking bomb ready to blow up at anytime.

Question 6

The third sound design came from the idea of how ratings system change the way we interact with others and make decisions on what products and services we purchase. The sound design opens with an Instagram filter sample, whose dramatic sound is often used in the Instagram stories to express surprise or shame towards other people; in doing so the audience immediately receives a warning, which will be mirrored later on by the voice of an announcer; a vocal sample from the airport scene of the Black Mirror episode called “Nosedive” from which the group took inspiration from.All these elements are accompanied by similar radio interferences as question 3, which have been stretched and pitched down by using a granular sampler built in Pure Data.

Additional work

Some additional sound design works we ended up not using.


The exhibition week presented the most challenges as the team had to suddenly change plans.Instead of running the software from a single computer we were forced to use six, drastically changing the configuration of the setup; we decided to hook all the computers up to a twelve channels mixer in order to route all the individual channels to the two pairs of speakers.I took care of all the connections, set up the levels and made the required adjustments for the different needs of each question. The background soundscapes kept playing throughout the exhibition from the speakers in the back in order to give continuity and a sense of enclosure.

Thoughts on exhibition

The sound was criticised by some for being too low but, I will argue, this was a consequence of what the rules for the venue were, especially since many other groups were competing to be heard in that same space; in addition, not having any introductory part, vital to set the tone of the experience, as I suggested in my last blog post, probably caused the exhibition to lack direction in regards to the topics and issues we wanted to address, at least at the beginning.

Thoughts on social media vs personality

In my experience social media doesn’t really affect my personality, more than anything, it just gives people a platform to show it; everyone obviously tries to hide their flaws and only  highlight their qualities but It’s all part of the reason why all these apps were made this way. We tend to forget that money is the driving force behind the social media model but artists who share their work on these platform have lots of opportunities to connect with people and present them their work. The importance of appearance to create engagement and other intrinsic constraints  are some of the issues artists have to deal with when using those platforms. I personally think social media has a very deep effect on life of creatives; artists who are trying to self promote their work on networks like Instagram or Youtube are deeply affected in their creative processes by the thought of having to make their works conform to the requirements of the same platforms. Songs with minutes long intros or blurred videos are not going to have the same level of engagement so the brain has to take into consideration all these factors during the actual creation process. All in all, the good outweighs the bad and ,in my opinion, the general public should differentiate the way they use social media from celebrities or people who make a business model out of their persona.



Nosedive, Black mirror, Joe Wright, 2016.

Black Mirror S0301 Airport scene, Youtube, 2017, link


Summary of Work – Adam

For submission 2 a lot of work was divided between members of the group.

This is an overview of my work within that.

Feedback Film

During our presentation on April 5th we took emails and names from every attendee. Our intention was to create a short feedback video that concluded the experience and perhaps gave the user pause about the way they interact online.
The video I created uses footage from April 5th of many of the users – the original intention was to create a personalised video for each person and send it out to them but with 27 emails it would have taken too much time and computational cost to personalise a video for every person.
As the aims of our project became more clear, creating personalised emails would have also strayed away from the point of personality shifting and changing based on interaction with technology. As such, a short ‘think piece’ was chosen, that brings into question and perhaps makes the user consider how they interact online.
Length was important – we want people to watch the video all the way through, and if it’s being emailed to them their attention may wane quickly.
According to Vidyard’s 2018 Video in Business Benchmark Report, 75% of the videos published in 2017-2018 were under 2 minutes, and just 46% of viewers stick around to the end of a video. I’m guilty of this myself – and with email being a slightly ‘outdated’ way to share video with things like Instagram or twitter, keeping it short and simple was my goal. While I originally aimed to be sub 1 minute, the footage of people interacting in a collage was interesting enough to hold attention. It clocks in at 1.10 which I think is a reasonable length to keep people’s attention. There’s also the consideration that people will engage more with footage of an event they attended, so the slightly truncated length is less of an issue.

Processing and Sound Integration

As we decided as a group to use processing to present our project ideas, I, alongside others in the group, helped with the integration of audio into the patches. With the sounds the audio team had created, I collected them all together and made sure they were properly organised for easy integration.
Making sure certain sounds played back when they needed to at specific points in the code, and making sure levels were somewhat consistent throughout for a smooth experience.
I also developed a small patch to ‘block’ the voice in a rather aggressive manner.  what this did was take the  audio in from a microphone (in this case, the webcam’s mic) and put it through a very quick delay before the output. The intention was something akin to the Speech Jammer apps that saw a rise in popularity around 4 years ago. These apps, with the quick playback of speech, confuse the brain’s monitoring of speech from the mouth. As it hears the feedback too quickly to process properly, the speech centre of the brain becomes confused and stuttered speech is the result. While this has varying degrees of success it’s an interesting phenomenon.
The varying degrees of success also extended to the exhibition itself with this work unfortunately. While it was fairly effective in an enclosed environment with the user speaking into it and being aware of it, using it in InSpace with a lot of outside noise and the general volume issues that unfortunately were present throughout, it was much less effective and essentially became a feedback machine. It could still create interesting sonic palettes, but had to be manually controlled so it didn’t get too loud. We also had the issue of communication to the user that this was a feature. By not giving them a reason to speak, many didn’t even notice it. But it is something that can be developed and thought about for future use, so it was an interesting addition nonetheless.

General Audio Work

The audio team worked together throughout to create audio that after development from submission 1 was worked upon in varying ways to create a cohesive sonic world for the project. It can be read about in more detail here.


Each member of the audio team tried their hand at creating audio for the first 2 interactive patches – each, after the question – plays a corresponding video.
This, coming off of submission 1, was thought of as a way to define what characteristics we wanted the audio to have as we developed it further. As you can hear in my examples, I went for a calm, eerie tone that made it’s way into much of my sound design throughout the process.

Setting Up the Space

Upon arriving in In Space, myself and the group worked together to set up our exhibition space in an aesthetically appropriate manner. While there were some issues with the space – mostly audio and light levels – we found an effective compromise to make the piece work.
Keeping all the processing files together in one patch on one computer was the original plan, but due to issues with slowdown we opted to use our own PCs and each run a patch – this meant we ended up with six of everything. While this was originally a response to an issue and an effective fix, it ended up making a strong aesthetic statement as people walked in to the piece. While some of the feedback has posited that keeping it to one PC would have been a cleaner option – and I can definitely see this as a valid point – I personally like the visual effect the six screens gave on the day, and made for a much more striking look, as well as a talking point.

Unity Project Test

In the initial development of our idea, coming off of submission 1, we looked at a much more straight forward  interpretation of our original idea. What developed into the more broad reaching final statements that were made in processing, originally one idea was to create a personality quiz – we eventually found that this became an ineffective way to get across our final point and developed it into the exhibition we presented.
I proposed working in Unity as I have some experience with it and integrating sound. So as a sort of show of ideas – much like some of my work in submission 1 – I built a small demo of a personality test.
This test stored the answers of each user and presented them with a random question out of a pre-determined bank. Upon answering this question, the players choice would be stored. The idea was to use this simple true/false system to give the user a ‘score’ – whether or not this would be visible to the user, an ending would be determined based upon what number they had at the end of the experience, giving them an ending. We also toyed with the idea of using two screens – the quiz on a touch screen, and a blank screen in front of the user. As they answered questions, the blank area would be populated with shapes or abstract interpretations as they went, creating an image for them. Again, this idea was scrapped as while visually interesting, it didn’t wrap around to the theme of personality enough to justify it’s inclusion. Perhaps this would be developed as it went on, but the group choice was made to take another direction, for the better.

Reflective Interviews

In the final stages of the project, the group decided to film small interviews with each member based around the 4 questions in the video. This was a chance to reflect on the project and each give our personal view on how we viewed the process and presentation.
The videos were filmed with a webcam due to time constraints, though it was fairly high quality so the video quality doesn’t really suffer for it. When the videos were recorded, they sat at about 15 minutes total, which we deemed too long for our video – also as we were working together throughout, some points were raised multiple times. Instead, select moments from each interview were chosen and edited together to make a cohesive video that allows each person to have their opinion but doesn’t go on too long.


Research and summary

On the topic of personality, we wanted to make a personality test at the beginning. Then, in order to make it more interesting, interactive and associate with technology, we came up with the idea of comparing personality online and offline. We want the audience to find their different personalities in the process of testing.

Technology is constantly changing our lives. We find that technology (such as mobile phones and computers), is already an inseparable part of life. According to a survey from professor Richard Wiseman, about 78% of participants said they are used to using electronic devices before going to bed. Among respondents aged 18-24, this percentage is as high as 91%.

Although technology does not have personality, it subtly changes our personality. Network and reality are two different worlds. Each has its own rules and also guides people’s thinking and behavior. Most people’s behaviors on the Internet (such as online chats, publishing articles) are quite different from real-life behaviors.

Compared with real social, young people are more likely to communicate through online social platforms. For example, some people have a lot of bold ideas but can only think about it because of the limitations of real conditions, so they release themselves on network platform. For another example, some people cannot say what they want because they are shy or lack of courage and other factors. The network would provide convenience at this time. On the social media platform, people can talk freely and reveal the other side that is usually hidden in the heart.


Reference link:


Sound Team – summary of work

In the first weeks, the sound team discussed what the initial aesthetics of the project would be. Since we did not have anything concrete, we started by creating drafts of soundscapes and drones we could use as background in the different sections of our personality test. At some point, we decided the personality test should have different outcomes, each with its own sonic qualities linked to the different traits of personalities. During this phase Tristan and I, composed a library of musical ideas to express the peculiarities of the personality types; diplomats, sentinels, analysts, and explorers. Unfortunately, these ideas and designs ended up not being used in the final project as the team took a different path from the initial one.

After submission 1 and as soon as the visual team provided visuals and images, we decided to design sounds specifically for them, even though we did not know exactly what form the project would take. As they developed more visual material we decided to design sounds for every single Processing patch to combine all these different sections into a cohesive experience. Each question had its own challenges and needed different sonic ideas to make it stand out.

Claudio started building a sound library of all the music, notifications and icon sounds we come across in our daily lives and sorted them by positive, negative, reassuring or intimidating characteristics. While Tristan and Adam worked on background drones and provided sounds for question one, two and four, Claudio took care of three, five and six.

1: Facebook is sending your personal information to someone else! Do you want to stop this? (online privacy)

A. positive Adam

B. negative Tristan

2: If there are two photos for you to select and post on Instagram, do you select the happy, energetic photo or the calm, relaxed photo? (sharing personal routine)

A. positive Tristan

B. negative Adam

3: Would you say the same negative comment you post online to someone’s face? Claudio

4: If you could use technology to cut someone from your life would you? Adam

5: If you don’t set up a firewall to block unwanted advertisements, this is what will happen. (pop-up ads) Claudio

6: Do you rate people’s life, appearance, jobs, opinions by the content they post online? Claudio

Background drone soundscapes:

Main Drone: Tristan

Secondary Drone: Tristan

Additional work

  1. Social media sounds library: Claudio

  2. Adam’s early videos.

  3. Music ideas for personality types:

Exhibition Setup:

2 x 8040 Genelec

2 x 8010 Genelec

Mackie 1642 VLZ4 Mixer

10 ¼ inch Jacks to Jack/ RCA

3 webcams

Summary of work-Maoqi

The work group I am in is visual team. There is a summary of work I have done.

There are six parts of the whole project: Facebook (the leaking of users’ privacy), Instagram (positive or real status you would like to show), YouTube (bad comments), Pop-ups, Block people’s face and Rate people. The two parts I was  responsible for are Facebook feedback video and Block face. Apart from these work, I did part of graphic design work.

Facebook Video

The Facebook feedback video was made by Photoshop and Adobe After Effects. Firstly, I used PS to make statics images and then used AE to make animation. These two feedback videos are basically similar. One is flushing all the time (sending information) and the other is stopping flowing water (stopping sending information).

Relevant news:

Block Face

This inspiration comes from that people can choose block their friends, families or other people on the net. However, would you like to be blocked by other people? And if you can block people in real life, would you like to do it?

The feedback of block face question was implemented in processing code. The idea is to call the camera and fill the ellipses to the real-time picture. Therefore, the image would be blurred. And audiences who go on camera cannot see their face clearly. It is equivalent to block people. There is the main code.


Graphic design

Our project involves technology so the style of graphic design is relevant with high-tech.

There are six question buttons and play button I made. I use the same color as main frame.

In terms of question interface, we want to make it like a chat interface. Therefore, I made a dialog box and combined it with question. There is an example.

Danfeng and I made six different start interfaces according the questions.

For Facebook part, the background is made up with code.

For Instagram part, we use the similar color with feedback video.

For YouTube part, the background is a lip which is filled with love. It is a contrast with the bad comments.

For Pop-ups part, the background is decorated with small boxes. These boxes are like many pop-up ads.

For Block Face part, there are two same face but one is distinct and the other is blurry.

For ranking part, the pattern of background is star. Because we always use star to represent grade in daily life.


Block Face (Daniel shiffman)