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.


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 –


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.


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:

Lecture: Lance Dann


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.


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:


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.

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.


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.




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.

Landing Page Experiments

When I first started working on the landing page I knew that I wanted to use the same color palette as the one that I have experimented with and have already chosen for the Home Page. This was done in order to keep the website visually consistent and by using the same colors, I could support the flow of the narrative of the website.

Earlier in the term I discussed a website that incorporated lines in it’s visual design. This website inspired me to create a similar effect and I wanted to use this concept of lines and animate them in a way that would make the letters look like they are assembling in front of the user. I think this will go well with my aim of making the user aware of the medium which will then also pave the way for slowly making them aware of sharing data online.  This aesthetics thus simulates an almost raw/ behind-the-scenes type effect which makes it look like you’re getting a glimpse into how websites are usually created before they are shown to the public as already assembled with hight quality graphics that attract the attention of users.  Also, I think that this method will allow me to create interesting graphics that will appeal to my target users as they are a group that likes ‘‘cool graphics,’’ balks at reading large blocks of text, and is impatient and easily bored’ (Djamasbi, Siegel and Tullis, 2010, p.310). Therefore, I want to create interesting graphics while at the same time make the landing page very clear and simplistic in its use.

The most challenging part was actually starting working on this as I had to determine what program would be the best to use to accomplish this task. I started thinking about this and I thought that my options were to use Photoshop to draw out the letter and then create the animation by using photoshop again to create a gif. Another option was to create the letter in Adobe Illustrator and then animate it in Adobe Edge Animate. I started experimenting with using Photoshop for this task mainly because I wasn’t very comfortable with using Illustrator, I had used it before but I knew that I wasn’t as proficient with it as I am with Photoshop. Thus I started making the letter on Photoshop but I soon realized that it was a very difficult task to achieve as it was very hard to draw these diagonal lines and make them evenly spaced and straight. Therefore, I wasn’t happy with how the letter looked visually.

Then, I became curious and wondered if I could achieve this faster and make the process more efficient by creating the letter in Illustrator.

I knew that Illustrator is based on vector graphics which are more associated with digital visuals then Photoshop because it is based on pixels. Additionally, I knew that Illustrator is usually used in game-based illustration graphics. It also works better with animation and programs like Edge Animate. This then seemed like the most appropriate choice of program for this specific aspect of my website. I was dreading using it but decided that it was worth experimenting with. I watched a couple of youtube videos to remind myself of all the buttons and the navigations and began creating my letter. I soon realized that drawing shapes on Illustrator was way easier and actually produced better results. It took me a while to get used to using this program but after a while I actually started liking working with it. I discovered a feature that allowed me to layer a rectangle over the diagonal lines that I created and increase its lines which then created a perfectly even shape with the lines being completely accurate. The below images show the process of creating the letter H. I experimented with having the middle line in this letter as filled in or lined like the right side of the letter. I eventually decided that it looked better with the lines.

After creating the letter I then had to animate it in Adobe Edge. Since I wanted each line of the letter to move into the frame, I had to copy and paste every single line within the letter from Illustrator to Edge. This was very time consuming and had to be extremely precise as it was easy to get confused with all the lines. I think this ended up to be the most challenging part. Additionally, I initially made the lines in the pink section of the letter H quite thick and when I finished copying all the elements and then animating them, the finished result did not look and feel right. Images of working with the thick lines on Adobe Edge are below.

Because I didn’t like how the above lines looked, I had to go back into Illustrator and create new thin lines. I then had to once again copy and paste every single new line into Adobe Edge. Animating this was also quite difficult as I had to make sure that each line was coming from an opposite direction and because all the lines are so similar, I kept messing it up. However, after hours of dedication I finally managed to successfully finish animating this letter. This is what the finished part looked like:


After completing this part of the animation, I then needed to make this letter zoom out, once it completed assembling and then move to the right in order for the rest of the ‘How Digital are you?’ title to appear. This was once again challenging because I had so many individual parts within the file that I couldn’t then change the scale of the general letter by selecting all the parts. However, I decided that the best way to approach this problem was to create a second animation file that would begin playing right after the letter assembles in the first animation. Thus, I used the illustrator file of the general letter and inputed it into Edge. Then, I made sure that the letter was in the same position on the page as the first animation, changed the scale of the letter and animated it so it moved to the right. And voila! After many many hours spent working on this animation I finally managed to finish it and I also now feel comfortable with using Adobe Illustrator so it was overall a very good experience that I learned a lot from.

I now need to create the rest of the title and input that into Adobe Muse.


Djamasbi, S., Siegel, M. and Tullis, T. (2010). Generation Y, web design, and eye tracking. International Journal of Human-Computer Studies, 68(5), pp.307-323.