Visit to Tate Modern Museum

This weekend we decided to go to London and visit the Tate Modern Museum in hopes that we will find some inspiration for our project in order to make it more critical both visually and theoretically. The pictures below are some of the pictures that I took at the museum. I was specifically interested in the ‘media networks’ section at the museum which looked at some of the ways in which artists responded to the impact of mass media and the changing technologies that shape our world.

img_8520img_8525img_8505

Work that related to my project:

Sue Williamson –

The above images were created by Sue Williamson. Each central image was photo-etched with additional elements rendered in hard-ground etching, aquatint or hand-drawing. Additionally, a decorative colored border surrounds each portrait. These images reminded me aesthetically of my project as they have a collage-like look. They also incorporate a similar color palette to the one that I have been experimenting with a myself which is something that I was happy about as I really liked how these colors worked together.  Williamson used old photographs along with colored elements around the images, these elements gave them a completely new appeal which I think worked successfully in this context. Rather then just evoking nostalgic feelings of the past, she managed to make them look modern and relevant once again. I am very happy that I saw these collaged images and I think these will be beneficial when i’m finalizing all the elements on my website. Maybe ill even try and incorporate some of the above colors that I haven’t used yet?

Hito Steyerl –

mu_hito-steyerl-how-not-to-be-seen

This installation is titled – How Not to Be Seen: A Fucking Didactic Educational .MOV File 2013 which according to the description, borrows the format of an instructional video. It explores today’s ‘world made of pictures’ and how and why we might hide within it. Additionally, the narration of this installation gives strategic advice on how to become invisible. Her work addresses recent developments in the way digital images are created, shared and archived. Even though her work mainly refers to the disappearance of political radicals, I think that it could relate to my website as the concept of not being seen could be applied to a way to avoid oversharing data online. Just like her project, my own project in the future could also have educational qualities that teach people how to avoid sharing data online and thus, how to avoid being targeted by advertising agencies.This will then help people feel liberated in an oppressive environment. Additionally, the description said that her work balances criticism and humour which correlates exactly with the approach that I have been wanting to implement into my websitete. I think humor is a good tool to implement as it captures the attention of the users to a greater extent. Thus, just like there were people watching this video who’s attention was captured by the humour factor, my website will use a similar tactic to achieve a similar goal.

Advertisements

Final Page- Experiments and Mock-ups

For my Final Page, I knew that I wanted to use the same color palette as the rest of the website and I ended up creating this background:

Screen Shot 2016-12-04 at 12.06.55 PM.png

I previouslyI explained that when the user gets to the last page, there will be a visual animation of data being dispersed all around the page. I thought that this will serve as a reality check  because the user will realize that they have just shared personal information on an unverified website and now they have no knowledge of where their information has gone or who has access to it. I have experimented with trying to visualize this loss of data with the inspiration website that I mentioned earlier. My plan was that as soon as the user enters this page, there will be a visualization of data followed by an animation of a person coming into the picture with the text ‘Oops, something went wrong. Please try again’. I wanted to also input a button that would appear later which the users could click and a statistic would appear which will reveal the educational quality of this website as it will make them aware of the concept of data sharing and how easily they give away data and information.

Screen Shot 2016-12-04 at 2.34.48 AM.png

However, after a couple of experiments with the visualization of data, I realized that I wasn’t happy with the way it turned out. I then talked to a couple of my friends who are basically my target users as they are also millennials, and asked them what their impression of the last page was. Sadly, none of them understood the concept of data being displayed and they mentioned that it didn’t really leave any impression on them. Thus, I needed to come up with something else that would convey my desired effect better.

I also discussed this issue that I was having, in class, and realized that instead of visualizing data I could include a loading bar animation which will initially load fast and then stop at the very end and make the audience wait for their results. This will be a play on their frustration on the Internet and simulate the fears and annoyances of online content.

loadingbar.png

I fond a tutorial on how to create a loading bar gif in Photoshop so I will use these instructions to customize my own next term. Here is a link to the tutorial:

After the loading bar finally loads, the bar would disappear and the man with a message will appear. I also ended up changing the brown square to an error message that I found online:

IC725763.png I edited the message in it and simulated the font that is usually used in these error messages and wrote ‘Error: Something went wrong. Please try again’. I think this works better and creates a more dramatic impact on the audience. Additionally, I animated this file on Adobe Edge and made the ‘okay’ button only appear a couple seconds after the man with the message was displayed. Once the button is clicked by the audience, a statistic will be displayed. I searched for various statistics online and found this one: 68% of people share their information online to give or get a better sense of who they are and what they care about. This is an interesting statistic and its relevant to what I have been wanting to display, however, I think next term I will do a more extensive research and try to find a more impactful statistic.

Screen Shot 2016-12-04 at 2.33.01 AM.png

This page is the final mock-up of the last page. Next term I will work on realizing my plans for the animation on this page.

Statistic Source:

http://www.business2community.com/infographics/people-share-social-media-infographic-0975231#loVAj9VoFQOv6qvV.97

Lecture: Lance Dann

blood_in_water-300x156.jpg

Lance Dann is a writer, radio producer, sound designer and academic. During his lecture he was talking about a commissioned, transmedia project that he has been working on called Bleeding Edge. It will be a thriller concerned with the commodification of blood, an examination of how blood is a product that bought and sold and subject to market forces across the world. It is also going to address a range of experimental developments in blood science, including research synthetic blood.

The part that stood out to me the most in this lecture was when Dann was talking about tactics on how to stay focused and create a successful project. He said that the first key to success is to be realistic and positive. This is something that I can resonate with as throughout this term I have been going through so many different emotions in relation to my project. Throughout the first few weeks I was panicking and I was constantly worried about how what research to look at and what aesthetics would inspire my project as well as whether I have the skills to realize my plans. However, throughout this process I realized that it is important to stay positive, and that doing research and experimentation will eventually get me to the desired path. At the same time, I have learned that being realistic is also important as in the beginning, I was planning on using sound in my website. However, I didn’t have the skills or the timeframe to learn how to use sound-related programs and I eventually understood that instead of learning something completely new, it will be more beneficial to use the skill that I already have and improve them. Thus, I decided to use more, and higher quality animation in my project instead of implementing sound.

Additionally, Dann highlighted the importance of having a personal focus and stated that it is important to work in 50 minute sessions, while taking short breaks in between each session. Moreover, he stressed that there shouldn’t be any distractions around you such as phones. Thus, in order to be productive, it is important to shut out the world while you work. This advise couldn’t have come at a better time as we have been approaching the deadline and I have been working extra hard to make sure my project is heading in the right direction in order to meet these deadlines and submit my project. I think this next few weeks are the most important as I will be creating and finalizing all the elements for the submission and I think that using his tactic of working in 50 minute intervals will help me be the most productive that I can be and I hope that this will also keep me sane during these next few weeks. I think the lecture was beneficial as it allowed me to reflect on my working process so far which I think will help me be more productive.

Quiz Page Mock-Up

 

For the quiz page, I experimented with inputting the square from the figures in the home page and using that to create a space for typing answers. I think this is a good way to keep similar elements that were used previously on the website but in a different way. This keeps the individual pages within a similar aesthetic without making them look boring. I wanted to use the same color scheme as the one that I have been using throughout the website,this already made the possibilities of creating variations for this page quite narrow. Thus, despite the limited number of colors that I could use for this page, I still managed to experiment with a couple of different colors. I really didn’t like the first image, it seemed overly bright and distracting, the second one was better but I still didn’t feel like it was interesting enough visually to attract the audience. However, when I used the dark colors for the page, I felt like the page felt right. I think that a dark background adds contrast to the question as well as the answer and makes them appear more significant. I think this works well at bringing the attention of the user to answering the question.

screen-shot-2016-12-08-at-15-55-05

Thus, after the Landing Page and the Home Page, my website will also have a series of quiz questions. I wanted to make the quiz seem like it is initially asking for very trivial information, something that people don’t mind sharing as it isn’t anything personal or seemingly harmful. However, as the user progresses through the quiz, the questions will become more personal and will require the user to think more critically about the medium while simultaneously giving away a little more information with each following step.Thus, since the user already answered many questions, he/she will be compelled to continue as they will want to find out what the result of the quiz is. This will make them give away personal information/data and reveal the fact that people’s identity online is constantly being controlled and governed using similar persuasion techniques. We are thus, constantly being coerced into sharing data, both with our permission and without.

This page will have animated lines coming into the page as the user goes on the page which will follow the previous structure of assembling pages. This will once again make the user more aware of the medium that he is using. I will use a contact form widget for the square in the middle, which will allow the users to type their answers to my questions and pressing a ‘submit’ or ‘next’ button  will take them to the next question.

This is the full list of potential questions for other pages that will be created next term:

  • Question 1: What is your nickname?
  • Question 2: What is your gender?
  • Question 3: Have your friends ever shared embarrassing photos of you online?
  • Question 4: Do you allow people to tag you in their photos?
  • Question 5: How many apps do you use?
  • Question 6: How many hours do you spend online?
  • Question 7: Do you think spending this many hours online makes you digital?
  • Question 8: Do you know how your smartphone operates?
  • Question 9: Are you aware of how much coding is firing up on your computer just to have this sentence appear?
  • Question 10: What kind of security do you use to protect yourself online?

The first two questions of the quiz are there to establish a connection with the user while requiring little amount of information. The fact that the user will share their nickname with the website instantly makes the user develop a personal relationship with the quiz as he/she gave away something trivial yet personal. This will serve as a hook- in order to attract the audience enough so they don’t loose interest in the quiz. The important thing is to keep them interested for the first couple of questions so that they answer the rest based on the fact that they have already spent some time answering the first ones. The next two questions are still fun but they become more critical as they will make the user think of the time their data (through the photograph) was shared without their permission. This will make their mind start the reflection process. Following this, the questions will get more centered on generating their awareness towards their use of the digital. Additionally, making them aware of the coding will further reinforce their reflection towards the potential for critiquing and becoming aware of the medium. Finally, the last question asks about the user’s security online. This will make them question their privacy and security tools that they use while they are online and will make them aware of the fact that they might not be well protected. I think these questions makes the audience to think more critical about their digital use and also prepares them for the educational part that follows the final page.

I am not sure whether I will use all of the above questions for my final pages. Thus, I think as the project develops they might be altered. I would need to get more feedback from my target audience in order to be able to edit and adjust the questions to create a desired effect. The rest of the quiz pages will have the similar aesthetic to the mock-up above, I will just have different questions. Additionally, the answers to these questions will sometimes be multiple choice and other times they will have a space to write an answer.  Next term I would also like to experiment more with using Muse Widgets to create various animated pages of the quiz. I think I could experiment next term using widgets like:

  1. https://musefree.com/particles-lines-effects/
  2. https://musefree.com/sound-waves/
  3. https://musefree.com/jelly-button/

These widgets might be used to enhance my aesthetic as the website will be more visually interesting and be more interactive. The first two widgets will allow me to use animated lines in my pages which goes well with my general aesthetics and matched my already developed pages. The third widget could improve the aesthetics and interactivity of my buttons.

Visual Inspiration for Last Page

In the ‘website plan and structure’ post I explained that when the user gets to the last page, there will be a visual animation of data being dispersed all around the page. I thought that this will serve as a reality check  because the user will realize that they have just shared personal information on an unverified website and now they have no knowledge of where their information has gone or who has access to it. Thus, I decided to find some inspiration in hope that one of these examples could help me visualize this loss of data.

Inspiration 1: http://www.core77.com/posts/19584/beautiful-beautiful-data-19584#more

This is work created by Tatiana Plakhova, who has created  works of art centered around data visualization. The images seem like the boundary where technology crosses over into fantasy and science into magic. They’re not quite fractals, yet they are characterized by a similar kind of repetition and patterning. At first the data points appear as noise, but this noise is the origin of the patterns in the first place. I thought it was interesting to look at data visualization for realizing this aspect of the website. I think her work is relevant in terms of aesthetics as I could implement something similar into my website.

Inspiration 2: http://www.awwwards.com/sites/do-you-still-believe

screen-shot-2016-11-27-at-9-40-42-pm

This example portrays data in a completely different way. I really liked the fact that the data appears to be visualized through lines. This could be relevant aesthetically because I have been working on implementing lines into the general aesthetic of my website. Thus, I think that this was a good example and I will definitely try experimenting with this type of aesthetics.

Inspiration 3: http://www.awwwards.com/sites/the-boom-the-arty

Screen Shot 2016-11-27 at 9.43.27 PM.png

This website has a similar aesthetic to the website above which was mentioned earlier. However, instead of lines, this website portrays flakes that could also be used in relation to data visualization. This could also be an interesting visual method to experiment with. I could use the same method of creating a visual effect of data being dispersed.

Inspiration 4: http://decade.elegantseagulls.com/

Screen Shot 2016-11-27 at 9.44.11 PM.png

This website has a section  with circles in which these little particles are constantly moving. I think this could also be useful for the creation of data visualization. I think I could even create this is Photoshop as a gif in order for it to play on a loop, thus simulating constant movement and therefore, constant stream of information being lost or being sent somewhere.

Landing Page Experiments Continued

Once I finished the main animation on the landing page, I then needed to create a button that the users could click on in order to proceed to the Home Page. I was wondering what the text on the button should be, I was thinking maybe using words like ‘Start’ ‘Click Here’ ‘Begin’…etc, however luckily on this day I noticed a Suggested Post on my Facebook which promoted taking a ‘What’s Your Travel Style’ Test. Interestingly enough, this post was probably suggested to me because I have been researching various personality quizzes on google. After the test, the website also suggested that I could buy various travel accessories. This shows that the data that we share on one platform on the internet is used to target us individually on another platform. This serves as an exact demonstration of the themes that I have been researching in relation to how our data is being used to then target our identity as a consumer and persuade us to purchase something.

One thing that I thought was useful from this quiz was when I clicked on it, it took me to their main website and in order to take the test I had to click the ‘Lets Play’ button. I really liked how that sounded and I thought that it goes perfectly well with my game inspired website. I thus decided to incorporate that into my website.

I then began playing around with different fonts in order to see how each would look in relation to the overall aesthetics of the page. I played around with having a cream colored rectangle around the letters. In the end though, I decided to make the button fairly simple and also decided to leave out the rectangle shape. I also decided that the best way to create this button was to make it a gif on photoshop and set it to appear after 4 seconds in order to make sure that it appears after the animation is assembled and the whole title is revealed. Another reason for using a gif over making a timed animation on Adobe Edge was due to the fact that a gif could be imported into Muse and in Muse, I could add interactivity to it by making it clickable, which also allowed me to set its path to the Home Page when clicked. Muse doesn’t allow Adobe Edge animations to be given a link to other pages when clicked so I think it was good that I managed to find away to make a simple gif and still achieve my aesthetic goals.

screen-shot-2016-12-03-at-16-44-28

This is what the final page is going to look like. I am very happy with the way it turned out overall. It took a while to get to this stage but I think it was all worth it because I can definitely say that I learned a lot and I can now use these Adobe Programs with more efficiency and more confidence.

Screen Shot 2016-12-04 at 2.00.04 AM.png

Landing Page Experiments

Screen Shot 2016-12-04 at 1.32.08 AM.pngAfter creating the previous animations for this page, I then created the rest of the letters needed for this page on Illustrator. Creating these new letters took significantly less time then it did with the letter H because I had already previously developed a method on how to create them and I also knew how to use all the tools. After this, I then added all of these letters into Photoshop and created the title. I added text to the letters and got the finished design of the page. I then individually saved each word as a png file and inputed that into the second animation on Adobe Edge.

screen-shot-2016-12-03-at-11-35-44-pm

screen-shot-2016-12-04-at-1-44-05-am

screen-shot-2016-12-04-at-1-46-39-am

I experimented with different ways of displaying the text on the page but I think the first one looks the best so I decided to use this as my final structure of the text on the landing page.

Additionally, I was also curious to see whether animating the letter D instead of the letter H could be better as the main emphasis of this quiz is on the word ‘Digital’. Thus I repeated the same process, which took faster this time!

Screen Shot 2016-12-04 at 12.28.22 AM.png

I animated the letter D in Adobe Edge and made it look like it assembles in front of the user. Animating this was successful however, when I combined that with the other text, I realized that it looked too distracting and it made the animation look as if its assembling from all over the place because I had the assembling D animation first and then the word ‘How’ appeared after with the rest of the text. This looked very confusing and hectic and I decided that it will be better to animate the latter H instead. I will thus proceed with implementing that into Muse.