Home Page Animation- Font

fancy-font
gif

So far, throughout the visual and conceptual development of the website, I was playing around with various different fonts but I haven’t really made a consistent final choice. I mostly discussed what the text will say rather then what it will look like.  I thus decided to make a separate post where I explore the two prevalent fonts that I have considered including in my website. Initially I used a font that I have previously downloaded online called basic title font. I have used it throughout all the experimentations of my website because I liked how it looked visually and I think it complemented the vintage-like aesthetics of my website. However, when I started thinking about the significance of this font, I realized that I should use a font that has a more conceptual significance in relation to my theme. Thus, I started doing research and found out that the font Arial is ranked as font number one as it is used the most online. Additionally, according to the statistic below, this font is used on 604,158 sites! This means that it is the font that my target audience is used to seeing the most online. I thought that using this font could act as a reinforcement of the persuasion quality of my website because it will simulate their experience on a ‘trusted’ site such as google.

Screen Shot 2016-12-05 at 11.53.42 PM.png

Source of Statistic and Information:

https://www.fontreach.com/

 

Advertisements

Home Page Animation

My initial plan for the animation was that the two figures will come into the website as soon as the user goes on the page. Then I wanted to create buttons that would appear and the user could click on in order to make the figures in the page ‘speak’ to the user. I thought that having the user click on buttons will make the website more interactive. Thus I started experimenting with creating responsive buttons on Adobe Edge. I decided to use Adobe Edge Animate as it has more interactive possibilities. The hardest and the most interesting part of this whole process was learning  Javascript coding in order to make my buttons responsive. I watched multiple tutorials on youtube and it was really complicated at first because it was hard insert a code on the buttons that would make the text visible one at a time, depending on what button was clicked. I couldn’t get the animation right at first but after a while I started to finally understand how it all works and I managed to create the animation that I thought I wanted to include in my website.

The below images are screenshots of my process of creating the animations for this page.

click-1

click

I wanted to play with the code in order to make responsive buttons that would appear one by one in order to display different part of the conversation between the user and the figures. Another complicated part was that I had to make sure that the ‘click’ buttons become visible one at a time and that two buttons would not be visible at the same time as I thought that will confuse the users. I thus, had to input various ‘Click’ buttons on the circle around the figures and make sure that a button goes invisible once clicked and then another button would appear, revealing more of the story. Despite the fact that I managed to achieve that in the end and I was very happy that I got to play around with the code which allowed me to get more familiar with the capabilities of Adobe Edge, I didnt end up liking the effect that was created. I mentioned earlier that next term I would like to also allow the users to animate parts of the figures themselves by displaying ‘click me’ buttons. Separately these two effects might look interesting, but together they look too messy and confusing and I think they would disrupt the flow of the website and make the users loose their interest.

Thus, I decided to just make a simple gif animation for the conversation part of this page. This will allow me to add interactive movement of the figures next term, which will appear as ‘click me’ buttons after the gif text finishes playing.

screen-shot-2016-12-04-at-2-41-00-am

I was overall very pleased with the result of this page and Im happy that I experimented with new features of Adobe Edge. Even though I didn’t end up using the coding that I learned, I still feel like I could apply this knowledge next term if I decide to create responsive buttons to any of the pages. I could also apply these skills that I have gained in my career in the future. If I ever need to create an animation for a company that I’m working for, I could use my existent knowledge to produce something even better.

Additionally, in the lecture with John Marchant, he highlighted that not following conventions could create an interesting effect. I thought that my website will not have a menu which in a way relates to his point of not following conventions because typically, websites have a navigation menu. Thus, by making the choice not to include a menu, I am forcing the user to follow a specific path and because the user cant go back and forth between the pages, he/she will have to stick to my navigation plan. Additionally, not including a menu was done in order to  make sure that the user follows a specific journey because if the user had the option to choose which section of the quiz he could go on, then the narration would be ruined. Thus, the order of everything within the website is extremely crucial for the desired effect.

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.

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.