Design Iterations – Evaluation

As a consequence of all my testing I have drawn some conclusions on the highlights and flaws of my installation and the overall design iterations unit. The aim of this unit was to create an understanding of the iterative design process and how it can be implemented when designing and creating a product or service.  The process includes; requirements gathering, analysis, design and prototyping, testing and evaluating. I believe the design iteration process helped me create a better design for the public displays brief, as it allowed my to test and improve my work numerous times.

The first iteration included the examination of the environment and considering the given problem and requirements. In order to examine the space, we created “Independant Dorset” posters, according to what we believed would appeal to the target audience, and work well in the space. Our aim was to create a poster that would encourage the engagement of the audience, in order to understand what the audience in the space were participating in, and how to grab their attention. In order to create this poster itself, we used the iterative design process; initially we started by understanding Independent Dorset campaign, and how we could communicate the message in poster form, we then proceeded to brainstorming rough initial ideas, from which we gathered feedback and chose to develop the most effective idea as a prototype. After testing our initial idea as a prototype we discovered a lot of information about the audience of the space, and how they interacted with the space.

The information I gathered on how the audience interacted with the space, it became clear that the use of posters was not very effective.  It was obvious that there was a large flow of staff and students in the area at either 10-5 to or 10-5 past every hour, when people were rushing to get to their destinations, however at times in between, and after 5pm, the area is quite empty. We noticed that the people going through the area would not pay attention to their surroundings at all, however people waiting in the queue for Costa or sitting in the chairs were almost always in groups, and were preoccupied in conversation with each other.

We also noticed the surrounding itself was extremely busy, with already a lot of posters and activity on the walls. The walls themselves were coloured orange and white, so next time posters created could be made to contrast the colour of the walls. The posters on the wall were very brightly coloured, and due to the extensive amount, very distracting.  Our main findings showed that the space was very fast moving and heavily text based installations to not work very well. We also found the people using the space were not very interested in the visuals of the space, however did pay more attention to the digital screens.  For this reason it became clear that the use of the screens would be most effective, as they received more attention that the posters in the area.

I then began to experiment using processing, and researching previous interactive installations. It became clear to me that I would choose to create something simple, yet effective, as I found coming to grasps with the processing language quite difficult. The concept I chose was based on the social constructing of identities using social networking websites, such as Facebook. For this reason I chose to use the facebook default photo as it is easily recognisable, and will encourage engagement.

I stumbled across an existing installation where a persons image was replaced by a block coloured silhouette of their body, this influenced my idea to use Blob Detection, in order to create a blob of the persons body int eh same colours of the Facebook default photo, however after testing my Blob Detection prototype I found that it was not very effective, as instead of tracing the image, the code traced the light in the area. This created random blobs on the screen, which did not apply to my idea, as it did not create the image of the default picture like I desired.

As a consequence to Blob Detection not working, I proceeded to use Face Detection, as I found that it recognized the faces more accurately.  I chose to create an installation where a persons image would be replaced by the default Facebook photo, instead of recreating the photo itself. 

After testing the Face Detection on some classmates I found that my initial code did not fit the screen well, and also did not mirror the video feed, however flipped the image.  After this was improved I retested in the Foyer, and found that the code worked reasonable well. I found that as people walked by they paid attention to the installation, due to the fact that they saw a familiar image.

Based on my user testing I feel I was definitely able to achieve my goal of creating a familiar image that the audience could relate to and engage with. The use of a camera based installation made people passing either stop, or slow down at least, as they noticed that the image was mirroring them as they passed by. Although it wasn’t a great response, the fact that a number of people altered their usual performance in such a busy environment showed some interest.

My idea was intended to reflect the concept of online identity construction, and the unreliability of forming relationships online. The intention of replacing a persons face with Facebooks default profile picture, was to communicate the idea that self-representations online may be deceiving. I researched htese ocncepts by looking at the MTV show Catfish, where the misuse of online personas are exposed, highlighting the flaws of constructing identities online. I also looked at the work of Benjamin Gaulon, where the blurring of boundaries of online and offline are explored, and the issue of privacy online. The use of a camera based installation in such a busy space, like the foyer, challenges the notions of privacy itself, and highlights how the increase of digital media platforms is blurring the public and private spheres.

If I was to repeat this process I would definitely choose to display my work at a busier time, therefore receiving a larger amount of engagement. Researching the space led to the conclusion that the busiest times were between lessons, as people passed by to get ot their destinations, therefore I would like to display my work at an earlier time, and leave it over a few days in order to record the reactions received over time. Another aspect I would improve is the use of the whole body, as using Face Detection allowed me to only detect the face, and create an image over the face of the viewer. I would like to experiment with different libraries in order to create a full silhouette as I originally intended. Overall I was pleased with the outcome of this project, as I managed to successfully create an interactive installation, which did produce a small reaction of the audience.

Testing in foyer

While testing in the foyer, as seen in this video, the project did not fill the display fully, this was due to the small size I used in order to make the installation compatible to my laptop camera. For this reason I decided to use a macbook instead, using this code;

sizecapture

This allowed the code to fit the whole screen, filling the whole display instead of just a section.

After amending the code I was pleased with the outcome, the installation used face detection to swap the audiences face with the Facebook default picture, therefore taking away their personal identity and constructing a chosen online identity. It was formulated by Giddens (1990), the present day individual is constantly working on forming his own subjectivity by processing and interacting with masses of symbols and information. With the rapid increase of online social media websites, it is increasingly common to share and present an idealized-self online, in order to generate a response or to simply feel accepted, it is evident that “we are  becoming habituated to a culture in which we are all expected to monitor one another” (Andrejevic, 2007). I believe this message is being communicated in my installation by the removal of peoples faces, as the face is used to identify a person in day to day life, however in social media users create their own persona, all beginning with the same default image.

Andrejevic, M., 2007. iSpy Surveillance and Power in the Interactive Era. University of Kansas, 212-240.

DiMicco, J. M., & Millen, D. R., 2007. Identity management: multiple presentations of self in facebook. In Proceedings of the 2007 international ACM conference on Supporting group work (pp. 383-386). ACM.

Giddens, A., 1990. The Consequences of Modernity. Cambridge: Polity Press.

Testing in the foyer- the environment

IMG_20150121_113040229_HDR

After conducting the first test in Weymouth house, it was obvious that these screens were a much more effective display. From previous research it was highlighted that there was a large flow of staff and students in the area at either 10-5 to or 10-5 past every hour, when people were rushing to get to their destinations, however at times in between, and after 5pm, the area is quite empty. We noticed that the people going through the area would not pay attention to their surroundings at all, however people waiting in the queue for Costa or sitting in the chairs were almost always in groups, and were preoccupied in conversation with each other. This came to our benefit as the screens we were displaying our work on, were placed in plain sight from the queue, and also placed very close to the sofas, therefore would grab a lot of attention.

We also noticed the surrounding itself was extremely busy, with a lot of posters and activity on the walls. The walls themselves were coloured orange and white and the posters on the wall were very brightly coloured, and due to the extensive amount, very distracting. This helped redirected the audiences attention to the screens, as they were animated and did not blend in with the vast colours already cluttering the walls.

Overall I found that the screens were situated in a place where they received a large audience, therefore more people interacted with my work. Although the space was quite fast moving, I found that the screens were placed in eye catching areas, such as when you first entered the building, and when you were queueing at Costa. People in the space were not interested in visuals such as posters, however paid more attention to the digital screens.

Test one – processing final piece

Consequent to creating my first final draft, I tested the code on a few class mates using the camera on my laptop, in order to see the different aspects of the face detection in use, and to highlight any problems.

 

In this video you will see my initial draft in action. I asked three friends to interact with the work by walking past the camera, in order to see how the code reacts to multiple faces.

This video shows how the face detection reacts when the user moves further and closer to the camera. The image placed over the face resizes according to the closeness of the user.

I believe the interaction of the face detection works well as it is specific to the users face, whereas blob detection traced the light in the room. The way the face detection interacts while the user is active is also a positive, as it picks up their distance from the camera, and the direction they are moving in. The interaction also works well as it mirrors the users actions, making the experience more personal.

I noticed that the code was only displaying in a small window, due to the small size used, however I found that using a larger screen size was not compatible with the resolution of my laptops (HP Pavillion) built in camera. I will look for a way to make the work fill the whole display.

Creating my final piece using Processing

The original code for Face Detection uses an image, however I altered this to work on a live video feed, as my installation is to be interactive. It came to my attention that the image on the screen was flipped instead of a mirror, however I desired a mirror effect as people passed by.

facemirror

After changing the width of the box in relation to the screen, and altering the code, I managed to have the face detection box mirroring the audiences positions, however the actual video feed was not. Resolving this was simple, as my initial idea concerned a block colour background the same colour as the facebook default profile picture, as it is my opinion that this colour is easily recognised by those who use facebook.

I then proceeded to upload the default facebook image in place of the rectangle which surrounds the face when detected.

fbpic

http://walyou.com/wp-content/uploads//2010/12/facebook-profile-picture-no-pic-avatar.jpg.

fbpicimage

The addition of the image created the look I desired, replacing peoples faces with the default photo, this portrays my theme of online identities using social media. I believe as people pass by they will easily recognise this as a symbol for facebook, and will question why it is covering their face. The installation should provoke thoughts of how we represent ourselves on social media, and how social media has grown and had such an impact on our lives.

Artist Research – Benjamin Gaulon Recyclism

Benjamin Gaulon, also known as ‘recyclism’; a digital artists whose work focuses on planned obsolescence, consumerism and disposable society. Gaulon belongs to the young generation of artists in the field of technological and new media art (Altena, 2005). Through his works Benjamin makes the audience conscious of issues regarding the role of technology in culture and society.

Gaulon’s on-going project 2.4GHz was of particular interest to me as it explores the concept of privacy and how it has been altered due to the growth of social media and the increased use of surveillance cameras and devices in both public and private places. The 2.4GHz project from surveillance to broadcast was initially started in 2008. In this project Gaulon uses an affordable and widely available wireless video receiver to hack into public and private wireless surveillance cameras (Gaulon, 2012)

twopointfour

Gaulon initially collected footage received by the wireless device from different areas in Europe, then proceeded to place the device in public streets in order to display the presence of the cameras to the general public, in attempt to subvert assumptions about the nature of these public-private surveillance technologies, and to bring to attention that the signals from wireless surveillance cameras and similar popular consumer products, can in fact be received by anyone without the audiences awareness. Gaulon also presented participants the opportunity to take part in workshops where they were invited to explore CCTV and wireless networks of their city by searching for 2.4GHz surveillance video signals (Gaulon, 2012).

Goulons work relates to the rapid increase of online social media websites, and how it is increasingly common to share and present an idealized-self online, in order to generate a response or to simply feel accepted, it is evident that “we are  becoming habituated to a culture in which we are all expected to monitor one another” (Andrejevic, 2007).  Gaulon explores the merging of the public and private spheres with the escalation in surveillance, and also the rise of social media, and the constant need to reveal personal information online in order to create an online social presence. Gaulon (2012) describes it as a fascination by our own image, from reality TV shows like Big Brother to Youtube video podcasts, it looks like the human narcissistic nature is surprisingly pleased to be surrounded by cameras.

The concept of privacy and identity construction is core in my installation, as I play with the idea of removing and reconstructing the audiences identity.  Social media spaces, such as Facebook, often blur the private and public boundaries, since on the Internet users are presented an illusion of privacy. Katz and Rice (2002) explain new users and those engaged exclusively in recreational domains probably feel this illusion most strongly. Many users reveal too much personal information online, from home addresses to pictures of intimate moments with family and friends, without being aware of the dangers of online social sites (Barnes, 2006). In order to simply browse popular social media website Facebook, one must first register an account to become a user by providing their full name, email address, birthday and gender. This is explored in my installation, as the audience interacts with the installation their identity is removed and reconstructed using the default Facebook profile photo as a starting point.

 

References

Andrejevic, M., 2007. iSpy Surveillance and Power in the Interactive Era. University of Kansas, 212-240.

Altena, A., 2005. The Works of Benjamin Gaulon. Available from: http://www.recyclism.com/statement.php [Accessed 20 March 2014]

Barnes, S. B., 2006. A privacy paradox: Social networking in the United States. First Monday, 11(9).

Gaulon, B,. 2012. 2.4Ghz from Surveillance to Broadcast. Available from: http://www.recyclism.com/twopointfour.php [Accessed March 19 2014]

Katz, J. E. and Rice, R. E., 2002. Social consequences of Internet use: Access, involvement, and interaction. MIT press.

Processing using Face Detection

After looking at some of the functions in the basic open cv library, I chose to experiment with face detection to implement in my interactive piece.

It has come to my attention Face detection will work better for my idea as it clearly detects a face on an image, whereas the blob detection only highlights the edges of an object by tracing the light, rather than shapes.

8634017624_35f7ef05ce_c

As shown in the example photo, Face Detection uses either an uploaded image, or the camera capture feature to detect faces in the frame.

 

 

 

 

References –

Screen Shot 2013-04-08 at 1.22.18 PM

https://github.com/atduskgreg/opencv-processing

Design Iterations – Concept – Catfish

CatfishTheTVShow

A concept that is explored in my work is the construction of identity, and how genuinely identities are portrayed online.  The internet has changed the manner in which people communicate and has provided outlets to facilitate seemingly realistic relationships, albeit without any physical contact (Rasmussen, 2014).

It is becoming increasingly popular that people are creating multiple, and not neccessarily accurate, personalities online. MTV’s show Catfish: The TV Show follows and exposes those who misuse social media by creating multiple fake online personas. The show clearly highlights the flaws of social media regarding connecting with new people. Toma and Hancock (2010) explore the self-representation and deception among users on social networking sites. They use experiments to measure physical attractiveness in profile presentations of online users. Results show that the lower online daters’ attractiveness, the more likely they were to enhance their profile photographs and lie about their physical descriptors such as height, weight and age. Alternately, the anonymity of the Internet may encourage more honest and intimate disclosures.

The subject of online personas in communicated in my work, as the image is related to Facebook, which is one of the most popular social networking websites at the present moment. The stripping of identity, by removing a persons face and replacing with the default profile picture represents the creation of online personas, and questions the authenticity of these personas.

 

References

Rasmussen, L., 2014. Catfished: Exploring Viewer Perceptions of Online Relationships. Reality Television: Oddities of Culture, 237.

Smith, T. What is the Fascination with Social Networking?.

Toma, C. L., & Hancock, J. T., 2010. Looks and lies: The role of physical attractiveness in online dating self-presentation and deception.Communication Research, 37(3), 335-351.

Processing using Blob Detection

In order to create the silhouette effect for my interactive piece, which will resemble the facebook default profile picture, I looked at many of the processing libraries. One that stood out was the Blob Detection library.

The Blob Detection library is aimed at doing computer vision by finding ‘blobs’ on an image, that is to say areas whose brightness is above or below a particular value.

After looking at the code I noticed the camera highlights both blobs edges and a bounding box around the blob, however I was only interested in the blobs edges as this gave the silhouette effect I wanted to achieve, therefore I tweaked the code.

blbob

It became obvious that Blob Detection does not perform blob tracking, it only tries to find all blobs each frame it was fed with. The Blobs trace light not shape, therefore it didn;t achieve the look I wanted.

Capture

( please bear with poor camera quality)

It also became clear that I couldn’t add a fill to the blobs, and I would have liked to use the default facebook colours as they are easily recognised, and is somehting people would notice in the foyer, as it is a very busy environment and is hard to grab peoples attention, therefore I have decided not to use Blob Detection for my final piece. I will be looking for a way to create a silhouette effect, but also change the colour of the fill.

Processing using camera

Today we looked at how to use The Capture class. The Capture class makes it possible to grab frames of video from an attached capture device such as a camera. This will come in useful when creating my interactive piece, as I will be using a camera to capture the image of the people in the foyer.

Screen Shot 2014-12-05 at 11.25.07

This code allows the camera to grab light and dark pixels, resulting in the screen to change to white when there is bright colours and black when there are dim colours. I have uploaded a video of me using the camera on my laptop to test this, simply by waving my hand in front of the camera to show how it reacts to brightness.

I will use the capture class when producing my final piece, and will also look at ways to make the code compatible with different camera sizes and resolutions.

Interactive Installations Research

After looking at many examples of existing interactive installations, I have been inspired for my public screen project.

This video shows an interactive display using Processing and the Kinect. I quite like the use of the outline of the human body, instead of focusing on finer details. I would like to incorporate body outlines into my work, and also the use of plain block colours instead of tones and shades.

The shapes and colours used in the example video reminded me that of the default Facebook profile picture, therefore linking back to my concept of social media and online/offline personalities.

facebook-default-no-profile-pic

I like the use of simple outlines and block colours, and believe the style is easily recognised and connected to Facebook. The image also relates to different persona’s and identities represented and exhibited on online social media, and how behind the online persona there may be a completely different person. The aim of my interactive piece would be make people question the authenticity of online representations, do they really know the personality of the person who they are talking to?

Public Screen Project – Design Iterations – Concept

Our task is to create an interactive info graphic to be displayed on one of the public screens in Weymouth House using Processing. Media concepts to be communicated in these designs should be related to technologies or could be media theory related for example relating to semiotics or identity and representations. These representations can be both direct information or can be an abstract interpretation.

I will be exploring the rise of social media, and the constant need to reveal personal information online in order to create an online social presence. The concepts I will look at will include a representation of privacy and surveillance, the blurring of private and public boundaries and the idealized online self.

The forever rising popularity of social networking websites presents the necessity to create and share an idealized online persona, in order to generate a response from others online or to simply feel accepted. Andrejevic (2007) clearly states that “we are becoming habituated to a culture in which we are all expected to monitor one another”. Katz and Rice (2002) explain that users of social media are presented of an illusion of privacy, often revealing too much information online, thus blurring private and public boundaries. In order to simply browse popular social media website Facebook, one must first register an account to become a user by providing their full name, email address, birthday and gender.

Social network sites can be used to measure online popularity. Nearly all social network sites are known to do exactly this, and measure how much effect your interaction has with other people and the online community. This is evident in many sites, for example Twitter measures how many ‘retweets’ and ‘favorites’ your tweets achieve, and subsequently how many people choose to follow your tweets. On Facebook one many measure the number of ‘likes’ ‘comments’ and ‘shares’ a post may get. Instagram, an online photo sharing site, measures popularity according to how many ‘likes’ your photos may achieve, and how many people follow your posts. These of measures of popularity could have an effect on people’s perceptions of self-worth.

It is evident that with the development of digital media and the increase of new social media platforms, the nature of communication has altered. We use social media to create an online presence, this can be used to boost self-esteem, on the other hand could also lower it. Online activity is used as a means of self-representation and a tool of identity formation.

I would like my idea to reflect the concept of online and offline personas, and how online representations can be used as a means of self-representation. The message I would like to communicate is the difference between popularity online and on social media, and how online performances may affect a persons self-esteem.

References

Andrejevic, M., 2007. iSpy Surveillance and Power in the Interactive Era. University of Kansas, 212-240.

Barnes, S. B., 2006. A privacy paradox: Social networking in the United States. First Monday, 11(9).

Bentham, J., 1791. Panopticon or the inspection house, 2(1).

Katz, J. E. and Rice, R. E., 2002. Social consequences of Internet use: Access, involvement, and interaction. MIT press.

 

Independent Dorset Analysis

After conducting research and analysing the effectiveness of our posters, it was clear that the space we had chosen was not ideal for the type of posters we had produced.

We analysed the behaviour of the people in the area in order to see which parts were most busy and at what times. It was obvious that there was a large flow of staff and students in the area at either 10-5 to or 10-5 past every hour, when people were rushing to get to their destinations, however at times in between, and after 5pm, the area is quite empty. We noticed that the people going through the area would not pay attention to their surroundings at all, however people waiting in the queue for Costa or sitting in the chairs were almost always in groups, and were preoccupied in conversation with each other.

We also noticed the surrounding itself was extremely busy, with already a lot of posters and activity on the walls. The walls themselves were coloured orange and white, so next time posters created could be made to contrast the colour of the walls. The posters on the wall were very brightly coloured, and due to the extensive amount, very distracting. The walls also situated a large timeline made of posters, these were most noticeable as they were in uniform order and were very dark.

Overall I found the results of this project very insightful. Our main findings showed that the space was very fast moving and heavily text based installations to not work very well. We also found the people using the space were not very interested in the visuals of the space, however did pay more attention to the digital screens. Through this project we put the iterative process into practice, where our ideas were cyclically prototyped, tested and evaluated. The process was effective in gathering a range of initial ideas, in particular creating quick sketches and gaining feedback of what is effective and what to improve.

 

Independent Dorset- Final Posters

As a group we produced our posters on Adobe Illustrator and Photoshop.

believe

This poster was primarily influenced by the image of the Cerne Abbas Giant. We used this image as it was a memorable feature of Dorset, as it was humorous, and we believed this would relate to our younger audience (especially the presence of giant genitals). Our poster was also influenced by UFO sightings in Dorset, we also believed this would take a humorous approach. For the poster we used Photoshop to make the image look as realistic as possible. The font we used was similar to that of the X Files font.

sane

 

This second poster was a much more sensible approach to the brief, however we decided to still include the Cerne Abbas Giant just to give the poster some personality as it could come across a bit too plain and serious. This was influenced by a poster made for the Independent Scotland campaign, however we decided to change the background from a block colour, to a grassy field as this would relate to Dorset more.

_75252524_13216331683_e1a4fa86bb_b(Independent Scotland campaign poster)

After conducting some research and people shadowing in the foyer, we decided on where would the best position to place our posters be.

IMG_20141016_155044900 IMG_20141016_155058490

We decided on placing one poster on the side of a vending machine, which is front facing a water fountain. We found that people often used the water fountain to either drink water or fill up a water bottle, at these times people are idle and looking around the space. This poster worked well as the bright colours stood out against the dark background of the machine. We placed our second poster on a pillar directly facing the queue at Costa Cafe, as this is where people were most idle, waiting to buy from the cafe. This was a great space to put our poster, however the colours on the poster were very dark in contrast to the light background, and did not stand out very well. The colours of the poster is something we would definitely change next time.

References-

http://news.bbcimg.co.uk/media/images/75252000/jpg/_75252524_13216331683_e1a4fa86bb_b. jpg

 

Processing – Conditionals & Variables

We have been exploring the use of nested for loops, conditional statements and rotation. We started by learning the process of creating rotating patterns using shapes, changing the colour mode, and translating the point of axis to change the rotation patterns.

I started by using a nested for loop to create a grey scale, semi opaque grid background. A for loop controls a sequence of repetitions. From this I also discovered how to use integers and floats, as well as about using the colour mode HSB (Hue, Saturation, Brightness). Here you will see we also experimented with the smooth() function, this draws all geometry with smooth (anti-aliased) edges.

Capture Capture2

We then explored the rotate() and translate() functions. Using the translate function we changed the origin (0,0) from the top left of the canvas to the centre by dividing it by 2 (width/2,height/2).  When changing the hue we also make use of the modulo (%) operation.

Capture3 Capture4

 

Independent Dorset Ideas

As a group we began by creating a visual brainstorm consisting of our research on key geographic locations and key historical features of Dorset and how they can link together in order to create an identity for Dorset.

 

IMG_20141016_203503052

We looked at;

  • Mary Shelleys Frankenstein
  • The Cerne Abbas Giant
  • Corfe Castle
  • Lord of the Rings- inspired by Dorset scenery
  • Pirate History in Dorset
  • Durdledoor and Old Harry Rocks
  • UFO sightings in Dorset

As a group we looked at how some of these features interlinked with each other, such as how the Pirate History influenced the naming of Old Harry Rocks, and how Corfe Castle influenced some of the scenery used in Lord of the Rings. Eventually we decided to go for the concept of UFO sightings, and how people may believe the Cerne Abbas Giant was created by something extra terrestrial.

IMG_20141016_203524621

 

Our rough poster design was very simple yet effective. We decided to go with the theme of UFO sightings and use the Cerne Abbas Giant as it was humorous and therefore will interest our target audience, students, more. We used the slogan “Believe in an Independent Dorset” as the word believe implies a concept of trust, we also played on the idea of believing in the reports of UFO sightings in Dorset.

Independent Dorset

Our brief is to create a piece of interactive information design for a shared public space, which is intended to elucidate/explain some an idea or concept we perceive as key to our 21st century media experience.  We are expected to create this work for one
of the public screens (or groups of screens) in the foyer of Weymouth House, in Bournemouth University.

In order to gain an understanding of how people interact with our work within the space we will being by creating A3 posters in small groups, which are to be hung around the space, these posters will be campaigning for an independent Dorset. We will begin by exploring things associated of Dorset, such as key features and geographic locations of Dorset.

 

An introduction to Processing

In order to explore the iterative design process, we will be developing a piece of interactive information graphics for a shared public space, using Processing.

Processing is an open source programming language, established by Ben Fry and Casey Reas, that allows people to create complex graphics, animation and interactive applications.

Our first workshop consisted of learning the basics of processing. We explored the basic shape primitive functions such as rect(). and ellipse(). We also looked at how to change the canvas size, changing the fill of shapes, and making shapes interact with each other.

processingprocessing2

 

 

 

Design Iterations

Design is a process

According to Dictionary.com, the primary and long-standing sense of the noun process is “a series of progressive and interdependent steps by which an end is attained” or, more particularly, “a series of operations performed in the making of a product.”

http://www.uxmatters.com/mt/archives/2010/07/design-is-a-process-not-a-methodology.php#sthash.vDgQ8ajl.dpuf

Iterative design is a process which involves a steady refinement of the design based on user testing and other evaluation methods. It has been acknowledged that user interfaces should be designed using an iterative process in almost all cases as it is very uncommon to design a user interface that has no usability problems from the start (Bury, 1984). Even the best designers cannot design perfect user interfaces in a single attempt, therefore a process should be built around the concept of iteration (Buxton, W., and Sniderman, R., 1980) (Gould, J.D., and Lewis, C.H., 1985).

Untitled-2

In order to explore this method of design and to demonstrate our understanding of the process we will be developing a piece of interactive information graphics for a shared public space, which will illustrate and explain an idea or concept we perceive as key to our 21st century media experience. This unit will also help create an understanding of how people react to and understand the graphics we create, and how people experience our work in an environment.

References 

Bury, K.F., 1984. The iterative development of usable computer interfaces. In Proceedings of IFIP INTERACT’84 International Conference on Human-Computer Interaction, 743-748.

Buxton, W., and Sniderman, R., 1980. Iteration in the design of the human-computer interface. In Proceedings of the 13th Annual Meeting of the Human Factors Association of Canada, 72-81.

Gould, J.D., and Lewis, C.H., 1985. Designing for usability: Key principles and what designers think.Communications of the ACM, 300-311.

Tesler, L., 1983. Enlisting user help in software design. ACM SIGCHI Bulletin 14, 5-9.

Nielsen, J., 1992. The usability engineering life cycle. IEEE Computer 25, 12-22.

Mini Brief Project

This project has not only enabled me to create work for my portfolio, it has also introduced me to a wider variety of new software and new tools, and has helped me develop my own skills.

We started this project by looking at the history of animation and we explored how animation has changed as digital media progressed. As part of the animation brief we were introduced to Adobe Flash. Unlike many others, I had never used Flash before and was not very confident in my ability of creating an animation using the program, however with some time I did create a small 15seconds animation, although is wasn’t the best, I was happy that I was able to produce something at all. Out of all the mini projects we participated in, I found this the least enjoyable, this maybe because the animation we produced was so short, and also I was not pleased with the quality of my own work. I found the program quite difficult to get used however with more practice I believe I could improve this. I will definitely continue to use Flash to make animations, as I know it is capable of producing some great outcomes such as the ones I had discovered while doing my research on the software.

I was also introduced to Blender, which I believe is an amazing open source software that could be used for infinite creative tasks. I particularly enjoyed using this software as I found it fascinating to see my own designs being build simultaneously while actually creating them. I experimented with text and animation with this software, both of which created good outcomes. I will most certainly continue to work with Blender to create more complex and aesthetically pleasing pieces of work. 

As a part of this project we also looked at photography, and how composition of a photograph helped make the photo aesthetically stronger and more pleasing. I understand that the found alphabet brief was to help us put these tools in action, also to help us see objects from a different viewpoint, however I was not pleased with the outcome of this brief, this is because of the poor equipment I used to take the photos. I believe I would have enjoyed this brief if I had used a better quality camera, and not my phones atrocious camera. Although the photos I produced were of poor quality, I am definitely looking to participate in some photography projects in the future, where I would put my knowledge on photo compositions into use, hopefully creating some beautiful photographs.

Another software I become accustomed to was Adobe After Effects. I used this to create my kinetic typography movies, which I particularly enjoyed making. I found that with this brief I could focus more on the aesthetics and design than technicality, unlike the Flash animation brief. I found creating the kinetic typography quite exciting as I had seen many of these videos previously and always desired to create something of my own. I went on to create a kinetic typography video of my own, which I uploded previously, after not being pleased with my previous attempts. In my opinion my recent attempt was of much higher standard as I had used a wider range of skills to create the video. I am aware that I have not come close to mastering Adobe After Effects, and there are some tools, such as the 3D camera, that I have not used, however I would definitely look to develop my knowledge of the program further.

Overall I believe this project was a success in introducing myself to new software, which will definitely come to use again. Although the outcome of my work may not have been of top quality, I am pleased that I have managed to explore and create something using these brand new tools. I will continue to try to improve my skills and will use these tools to progress my own work. 

Kinetic Typography own attempt

So after already producing two kinetic typography videos using After Effects I decided to give it another go. I wanted to make sure this time that the timing was a lot better and that visually the video was more pleasing.

For this video I chose to change the typefaces and font sizes in order to create some variation. I also changed the background colour to go with the music, and I believe it worked really well. However I believe it would have worked better if I used the 3D camera tool, however I could not get accustomed to using it, this is something I would definitely like to develop further. Overall I found using After Effects more enjoyable than any of the other mini projects as I liked the produced outcomes more.

Blender

I decided to create some simple 3D shapes and models using Blender.

I began by creating a few basic mesh shapes and experimented with the textures of these. I also played with lighting and creating light emitting surfaces. I later on added textures to my objects from the internet by using theUV unwrap option and UV editor mode.Screen Shot 2014-03-24 at 15.08.50Screen Shot 2014-03-24 at 15.08.20 Screen Shot 2014-03-24 at 15.08.34

This is what my finished model looked like after I added different light sources, and textures to my objects. I also experimented with adding and editing text.

Blender Mini Brief

As part of the mini briefs project we have been introduced to an open-source program called Blender. Blender is a great software that can be used for creating animated films, visual effects, art, 3D printed models, interactive 3D applications and video games.

http://www.blender.org/

Here is an example of the detailed work blender is capable of creating;

We started by doing some basic tutorials on how to create 3D objects and how to move and duplicate them within a 3D space. We also learnt keyboard commands that allowed us to do simple functions such as repeating the last command, moving the object along axis, and seeing your model in the cameras point of view. We also looked at how in ‘Cycles Render’ mode we can split the screen in order to see different previews, including an object preview and a low resolution render preview.

Photography mini brief

As part of this project we were to take part in a found alphabet photography task.  Our brief was to “spend time outside looking for ‘naturally-occurring’ shapes which can be photographically framed as letters from the alphabet. I decided to walk through Bournemouth gardens and the beach in order to capture letters which make my name. As easy as this sounds I personally found it quite difficult to see objects in a different light and look at things a little closer. I also found it was quite difficult as I used my mobile phone camera, therefore not capturing amazing shots.

name

I did eventually find some letters, however I believe to execute this task, or any photography task properly I would need a lot more time and a better camera, as my photos were not very impressive. I would definitely re-do this project over the summer or in my own time as it seems like with the right time and equipment it could be an enjoyable project to do.

 

Photo Compositions – Rule of Thirds

The Rule of Thirds is a compositional principle that is widely used, this is because we find that photos that follow the rule to be balanced and pleasing to our eye, simply because of the way our brains process images.

The key elements of an image are usually placed on or near those lines, or at one of their intersections as studies show that our eyes go to these intersections naturally, rather than the center of the shot.

Photo Composition – Depth of Field

As a part of our mini briefs we looked at photgraphy, and how important composition is when taking a photograph.

Depth of field is the range, of objects in the view of your camera that are in focus. Objects in front of this range are out of focus as well as objects behind the range. The depth of field would then extend from a couple of feet to infinity and for all practical purposes would be infinitely deep.  This is often referred to as a ‘near-far composition.

There are many things that create Depth of Field;

  • Aperture size. Large aperture opening will have shortest or shallowest depths of field, whereas smaller opening will have a bigger depth of field.
  • Lens type.  Wide angle lenses will tend to have a greater depth of field, as will longer telephoto lenses.
  • Focal distance. If the absolute focus point is set on a point less than a few feet from the camera you will have a much shallower depth of field than if your focal point is 10 meters or more from the camera.

 

http://www.ateliervagabond.com/blog/2012/06/25/photography-depth-of-field-explained/#.UzIS7_l_ua8

Kinetic Typography Progress

I experimented with After Effects to make a lyrics video using kinetic typography. I found the process was quite complicated and could easily get confusing. I had to make over 40 layers of text, and synch these layers with the audio. It soon became quite confusing as I could not find a way to put the layers in folders.

layers

I soon started to change the colour labels in order to create a sense or organization. I found it quite difficult to synch the text with the audio as the music changed tempo a lot. I managed to synchronise it as close as possible. I also added a colour gradient background, which I changed the position of within the video in order to give the video a sense of movement.

bgpath

I downloaded the font Peach Milk from dafont which I used for the video as it was more aesthetically pleasing than any other default font.

http://www.dafont.com/peach-milk.font

I found that the audio I used had a long introduction of just instruments, so I decided to cut some out, however found it did not flow well, so using the waveform I changed audio levels so it transitioned into the music.

This is my finished video-

Overall I enjoyed working with After Effects and kinetic photography, I believe with more practise I could develop more skills and use them  to create better pieces of work. Next time I would look at how to transition between different backgrounds, and also how to move the camera instead of the text layers in order to give a more 3D look.

Kinetic Typography

One of the mini projects we have been presented with at Bournemouth University is using Adobe After Effects to experiment with kinetic typography. Kinetic typography refers to the art and technique of expression with animated text. I have seen examples of kinetic typography in the past, most common being lyric music videos and movie dialogue videos, however have not created any pieces of my own. Our task was to create a kinetic typography video using Adobe After Effects, to accompany a snippet of the audio from the Gravity trailer. I was looking forward to using After Effects as I have never previously used it before, and am interested in increasing my basic knowledge on the software and learning new skills.

Some of the examples that I looked at as inspiration for my own attempt include the Oceans Eleven Project.

I also looked at the End Credits Song form Portal, called Still Alive.

 

Flash Animation 2

We were introduced to Adobe Flash to create our own 15 second animation which was to be synchronised to music, the content of the animations could be anything, and was left entirely open to interpretation. I found this project quite difficult as Adobe Flash was completely new to me, as I have never used it previously. Learning how to use Adobe Flash was relatively simple however I found that my animation was very jumpy and not smooth like how I wanted it to be.

flash flash2

I personally was not pleased with the outcome, as the animation was not very strong and does not work well with the music. I also believe the animation was not very aesthetically pleasing, however I keep in mind that this is my very first attempt at using Flash, and I do plan on practising using the software in order to improve my skills.

Flash Animation Research

I looked at some already existing animations made is Adobe Flash, and also looked at some tutorials on how to create these animations. From these video’s the task looks quite simple, however it looks easy to over complicate and mess up.

This is an animation I looked at that narrates a story, the images used are quite simple however the creator used colour and tone to make a 3D look.

 

Flash Animation

For the first part of this mini briefs project we looked at animation. We started by looking at traditional forms of animation where each frame was drawn out by hand. We looked at one of the earliest forms of animation, the zoetrope, and also attempted to create our own version of zoetrope animation on strips of paper.

 

We explored how animation has changed over the years, from hand drawn and cell animation to motion graphics, CGI and computer graphics. 

 

Channel Project -Presentation

We presented our final website on the 11th of February to our seminar class.

dakar.bournemouth.ac.uk/~sniccolls/index.html

Overall I believe the presentation went well and we communicated our idea quite clearly. The feedback we received was that our idea itself was very big and complex and we could have done more for the idea, however with our time limits we did as much as we could. If we were to do this again I believe we should have organised our time more effectively in order to cover more aspects of our idea. Another change would be to have used a better camera to film the footage as the video was not of best quality. I believe this project went well although there were some disagreements within our group.

Channel Project- Web Design

As our idea was mimicking a travel agency, myself and Jaymi researched many different travel agency websites, such as British Airways  (http://www.britishairways.com/travel/home/public/en_gb) and Thomas Cook (http://www.thomascook.com/). From these websites we found a common theme was the use of beautiful photography on the home page in order to attract the audience, and we also noticed prominent colours were blue and white. We believed Thomas Cook’s website was more aesthetically pleasing as there was less information and text on the home page, and the layout was much more simple than the British Airways website.

It was obvious to myself and Jaymi that we wanted to use the colours blue and white and they are simple and clean.We decided on a gradient instead in order to give a ‘sky’ look to the webpages. We made a gradient background the exact size of the webpages as we did not want the page to be bigger than screen size, so the user would not have to scroll up or down.

gradient

We decided to add the colour orange to the navigation bar and footer which would be present on every page on the website, this is because it is a prominent colour in the logo and it also contrasts with the blue. We rounded off the corners of the navbar as it was more aesthetically pleasing in my opinion. The logo was created my Bob in our group, and it contains the image of two suns, this is due to one of the distinct features of our planet is that it has two suns. He used a futuristic type face called ‘Neuropol’ which was downloaded from dafont.com. Myself and Jaymi wanted to use the same font for the navigation bar and footer of our website, however this wasn’t possible as we could only embed google fonts, and if we were to use this font it would be replaced by a standard font such as Arial on every computer than does not have Neuropol installed. We decided to find a very similar font on Google fonts an use this instead. I believe we found a very good match, which keeps within the futuristic theme.

home

On our homepage we added a simple jquery slider plug in downloaded from the internet. We saw that most websites of similar purposes had photography of their holiday destination on the homepage, therefore we decided to do the same. We used photo’s taken in Swanage and Weymouth. A lot of the images were of sandy beaches and beautiful scenery, implying that our planet was a beautiful place to live. We also wanted to add a countdown timer showing how long people had left to pick which planet they would like to live on. We tried to download a jquery plug in, however the coding was very complex and we couldn’t get it to operate on our website, so instead we watched a few tutorials on youtube on how to make countdown timers ourselves, using a simple code we made the timer on Adobe Flash. The positive side of this was that we had a working countdown timer that could be viewed on our webpage from desktop computers and macs, however the negative was that the timer would not work on mobile or tablet devices, as most do not have Flash installed.

about

For our about page we had written a small background story about how the planet was founded, and why it is such a great opportunity to leave Earth and live on Alpha Centauri. We wanted to keep the page simple so we added one image, this was a mockup news article made by Luke in our group, which presented an image of when Mr Centauri first landed on our planet. In the background of the image used you can see two suns, this is because it is the main distinguishable feature of Alpha Centauri.

overlapping

I edited the images taken from the footage of the actors playing ‘Centaurians’, citizens of Alpha Centauri, and used photoshop to make the colours of the makeup more vibrant and prominent. I decided to make simple citizen cards showing that they are citizens of Alpha Centauri. I made the card using Adobe Illustrator, and gave it the same simple colour scheme of blue and white, however instead of just a gradient I created a mosaic effect. These cards were to be presented on the ‘Sign Up’ page, where people would sign up to live on our planet.

formsignup

The sign up page followed the same theme, and contained a sign up form which we created using php. The form was very simple and contained basic information. If we had more time we would have added more sections to the form, making it slightly more specific and less general.

video

Lastly, we decided or the video gallery to resent the videos in a table like manner. When the videos are clicked on they enlarge to a full screen player giving the audience better visual. We embedded the videos in our html code instead of using Flash as not all platforms contained Flash. If we had more time we would have added more information to the page, such as titles and posters to each video.

Channel Project- Makeup

Today we filmed at Cranbourne House for one of our videos. As two other members of the group were participating in most of the filming, this video required more of a group presence as well as actors outside of our group. Our videos would show the beautiful scenery of Alpha Centauri, trying to persuade people to move there, and also run down areas of Earth, reminding humans that Earth will be demolished as it is extremely damaged. One of our videos would present the happy lives of the people who now live on our fiction planet Alpha Centauri, and they would give their opinion on why this planet is an ideal place to live.

Some of the people filmed for this video were outside our group and were asked to do some acting along with three members of our own group. I used makeup to create a distinguishable futuristic look, somewhat inspired by the futuristic and over the top costumes used in The Hunger Games.

Screen shot 2012-04-11 at 14.56.30

I made a few sketches beforehand in order to record what kind of idea I wanted to produce in terms on makeup. I decided using bright colours and patterns would work well as they make the characters easily recognised as people not from Earth.

1525226_10151967932378250_720219989_n

 

12728_10152183608577380_1150332945_n 1508562_10152183608587380_142561864_n 1609838_10152183608622380_1392584895_n 1800193_10152183608607380_1260193763_n 1800353_10152183608597380_180218743_n 1901599_10152183608592380_1680158353_n

 

These stills from the video footage do not do justice to the makeup as it appeared much more vibrant in real life and the footage. I believe I did quite a good job in varying the styles and making the looks as unique as possible.

Channel Project- further development

As this is quite a big project we decided to assign roles so every person would have a task to carry out in the project. Myself and Jaymini were assigned the role of creating the website for our channel which we will present our video’s on. I was also in charge of applying futuristic makeup for filming. Roles were as follows;

Everyone – Location hunting.

Libby – Sound recording – Production Manager (books camera’s does assessment forms)
Bob – Logo design and Story boards
Suzanne – Script writing & Story boards
Luke – Director of filming & Cameraman
Jaymini – Web design & Editing
Inayat- Web design & Makeup

 

Channel Project- Brief

We have been given a new brief to complete in groups. Our task is to speculate into the future and design an online video channel with a defined audience in mind. We are to design the site branding and sample video/ audio content. This brief will help improve our skills with the html 5 & CSS3 because we have to produce a complementary website as well. Over the last few weeks we have been participating in editing workshops, working with both audio and video which can come to use in this project.

We began by brainstorming many idea’s, however only 2 stood out from the rest. Originally we came up with the idea of an informative/Mockumentary channel, highlighting the dangers of unintentional teleportation in a humorous and comedic way. Our main focus would be on a character, named Geoff who would be affected by the unintentional teleportation ‘Glitch’. It would have been my role to make mock social media accounts, such as twitter and instagram for Geoff. After developing this idea further it became a concern of ours that the idea was very complex and would not work if the humor side of the acting did not perform well on screen. After deliberation we decided on changing the idea completely.

Our final idea chosen by the group was to mimic a travel agency/advertisement company offering humans to migrate to our fictional Earth like planet, Alpha Centauri. The channel will be promoting the planet using advertisement videos of the planet, showing footage containing landscape shots of Earth and presenting a comparison between run down areas of Earth and scenic areas of Alpha Centauri. The webisodes will also explain the history of how our planet was founded, and why we are encouraging people of Earth to emigrate to a new, less damaged planet.

Navigation- Portfolio website progress

I had decided that I would use the focal point of the top section of my website, my name, as the navigation bar itself. I created various rollover buttons using Photoshop, and saved each image separately, then used JavaScript to add them to my website.

homepagetemplate

Initially I found it a difficult task to align everything to the center of the page, however I discovered a simple solution, and that is to add my rollover buttons and images to a table.

Untitled

I believe the rollover buttons work very well, as they add a splash of colour to quite a simple website. I linked each of the buttons using the HTML code, to different sections of my website, therefor when clicked on, the page will scroll down to this section.  In order for the user to return to the main navigation bar from different sections of the page, I created a back to top button using Photoshop, which is fixed to the left corner of the page, and when clicked on will scroll back to the navigation bar at the top of the page. I found that when clicking on different links the page would jump down to that section, instead of scrolling down, therefore to make the scrolling smooth, I added a smooth scrolling option using  a combination of JavaScript and a jQuery plug in. This allows the user to see what content is being skipped over, giving her a clear sense of their current location on the page. This is the guide I used to add this function, and to download the plug in; http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/

Fonts- Portfolio website progress

fontmoodboard

I wanted the focal point of the homepage to my portfolio website to be the navigation bar, and this was going to be placed in the center of the page. I decided I wanted a simple yet effective font which would keep the viewer on my page. The fonts I believed worked best in white, against my simple grey background, were Denne Shuffle Euro Hollow, Peach Milk and thisfontlookslikeelephant (all from dafont.com).

After adding and re sizing my fonts to get my desirable look, they produced my navigation page;

Capture

I have been using HTML  and CSS to achieve this layout so far. I would like to incorporate some JavaScript and Jquery into the webpage later on, in order to make it more interactive and appealing to the user.

Instead of having many pages, I have decided to make the website a single page that is separated into sections. This I feel gives the site a professional feel and keeps the theme of simplicity. So far I have created the layout of the website and have been mainly focusing on the navigation bar on the page.

Portfolio website progress

Image

 

I created this moodboard using images of existing portfolio websites which I was inspired by. I extremely like the simplicity of these designs, therefore would take this approach when creating my website. I also collected some colour palettes which I believe would work well in creating a simple design. I am very fond of the use of gray and white, as I believe it gives a very elegant and simplistic look, which is very aesthetically pleasing. 

Portfolio website brief

The brief is to design and create a portfolio website that will allow future projects to be displayed and launched. We will need to consider who the audience will be ie prospective employers, placements, peers. The design solution should factor in these audiences but should also represent our identity and our practice in the field of digital media.

This is the first time I have designed and created a website and I am looking forward to learning all the skills required to do this well. I often find myself being unsatisfied with the quality of my own work, this could be due to being a slight perfectionist. I find myself coming up with huge ideas, which are sometimes unachievable due to deadlines. I will be thoroughly planning on both paper and computer, what type of design I would like to create by my deadline, and will be using various tutorials and workshops to help create my final portfolio website. 

 

Fire Kills Campaign

Brief

Our brief was to come up with a campaign idea for ‘Fire Kills’. We had to consider innovative ways of delivering the message, and develop one ‘media’ solution to concept stage. (eg a viral video or game, a competition or quiz, a tv ad, poster series etc)

Our campaign had to effectively communicate the six key learning objectives of the Fire Kills initiative:
o Plan your escape root
o Have a Plan B!
o Keep objects out the way of doors
o Close internal doors
o Get out, stay out!
o Keep keys to hand

Image

We started by brainstorming various concepts and ideas we could base our solution on. An idea we all believed was very strong was a first person game, inspired by the game ‘Mirrors Edge’. The objective of the game being find a way out of a virtual surrounding in the most time efficient possible. 

Our idea- House Inferno 

Our idea was to create an interactive web based game, heavily inspired by Mirrors Edge.

ImageImage

Image

The design on the game is very clean, the colour theme being white and red. Within the game there will be choices highlighted in red, which will result in different outcomes. This captivated one of the main objectives; Plan your escape root . Our idea also included iPhone integration, where the user would initially plan two routes. This would cover the objective of having a plan B. When playing out this route on the web based game, problems would occur, such as objects obstructing your escape route, or it would take more time for the user to locate his keys, causing the fire to build up around the player. This portrays the key objectives; Keep objects out the way of doors, close internal doors and keep keys to hand. The fire will not be seen in the game, but it would be heard, and would gradually get louder, and the surrounding would become darker due to the smoke produced by the fire. The aim would be to get out of the building in the least amount of time, and to stay out. 

Presentation

In my opinion, our presentation went very well. Together our group described our concept in a very detailed way. Initial nerves were overcome as we all pitched in to get as much information across as possible. I enjoyed working with my group as together we came up with some very initiative ideas, and our final idea was very simple yet effective. The mock ups made on Photoshop illustrated our idea clearly, and helped give an idea of our design idea.

Digital Media Design – Bournemouth University