Interactive Design Project: Initial Designs


After looking at some media concepts, detailed here I decided to sketch out some quick visual concepts to try and develop a clearer idea for my project. By quickly photoshopping the above picture I quickly developed a range of visual prototypes. By using this picture I hoped it would help me figure out a colour scheme and visual theme which was appropriate for the space, as this was particularly problematic in the poster project (as talked about here.)


As the main theme of my project is to do with ubiquitous technology, I looked at how this could be represented. A widely-used visual motif for digital technology is computer code as popularized by films such as The Matrix (1999). One of my first thoughts for the project was to use this as a texture to overlay onto images of people, and in the above image I played with this idea. However this visual motif is mainly a feature of older films and this may not be recognized by today’s audience. Also the colour scheme for many computer-code based patterns is often very limited and may not work well within the space. In particular the contrast between black, green and orange is very strong and personally, I do not find it very aesthetically pleasing.

Image by the Opte Project

This project was created to make a visual representation of a space that is very much one-dimensional, a metaphysical universe. The data represented and collected here serves a multitude of purposes: Modeling the Internet, analyzing wasted IP space, IP space distribution, detecting the result of natural disasters, weather, war, and esthetics/art.

(Lima, 2014)

Another way technology, and more specifically internet networks, are sometimes portrayed is through the use of data visualisation. Above shows an image of the Opte project where the internet network connections from one computer are mapped. The connection between each computer is represented with a line, with colour being assigned to depending on the location of the IP address in the physical world. Subsequently, colour saturation becomes representative of the number of connections each node has, as the lines become overlayed with one another. Although the ‘rules’ behind this are quite simple, as the data set is quite large and as a result visual outcome is very complex.



Taking inspiration from the Opte project, above I mocked up some images of potential ways the idea of lines as a network could be used in a processing sketch. Potentially, these lines would move dynamically to people’s movements and connect with each other. Although I the above images have quite a simple message that hopefully would be understood by most audiences, it could be quite hard to actually code.


Another way to represent data being transferred over the internet is to try and portray the information itself. In the modern internet data is transferred using protocols which are commonly called by the analogy of “packet data” (The TCP/IP Guide, 2014) as connections are only opened as and when data needs to be transferred.

Using this analogy of packets, I devised a way to represent them visually as orbs or particles of light. As we carry our phones with us, and they are continually sending off and receiving data packets, these orbs could then follow people as they move around the screen. Again the idea could be quite effective because it is quite visually simple and easy to understand interaction wise. However it is also quite an overused idea and conceptually might be quite difficult for the public to understand.


In thought another analogy that might be quite interesting to explore to represent data packets with are seeds. Seeds, as are all living things, are carriers of genetic information. I thought the idea of wind-bourne seeds, such as dandelion clocks, could be used as a metaphor for packet data. These could then cluster around people and move with them.


As I liked the above concept, I tried to further refine the aesthetics of my idea. Although the above is not as visually representative of dandelion seeds as my first iteration, the lines in this example are stronger and lead to less obscuration of the original image. However I feel that the success of this idea would be dependent on the animation of the seeds, and the sucessful reproduction of the movement of windbourne dandelion clocks would be critical to the recognition of the idea in the audience.

Although I have come up with a range of visual concepts here, I feel that there are none I could commit to at this point in time. The main reason being that I do not know enough about Processing to know which of these ideas could be sucessfully incorporated into a sketch. In order to gain a clearer understanding of this I will work further on my general knowledge of Processing and programming in general before finalizing any ideas. On the other hand, I will continue to explore and develop upon the themes I researched during the production of these sketches in order to refine a final outcome.

The Matrix, 1999. [film, DVD]. Directed by Andy Wachowski and Lana Wachowski. USA: Warner Bros.

Lima, M., 2014. Opte Project[online] Visual Complexity. Available from: [Accessed 18.11.2014]

Lyon, B., 2014. The Internet [online] The Opte Project. Available from: [Accessed 18.11.2014]

The TCP/IP Guide, 2014. Understanding The OSI Reference Model: An Analogy[online] Available from: [Accessed 18.11.2014]