Design Guidelines

Posted on Leave a commentPosted in Design, Research

As we are producing our app for iOS devices (iPad, and possibly iPhone), it is important that we look at Apple’s iOS development guidelines. This ensures that the app we produce would be suitable for the iOS market and that it adheres to conventional iOS themes. ‘Although crisp, beautiful UI and fluid motion are highlights of the iOS experience, the user’s content is at its heart’ (Apple 2015). We plan to create a simple and well designed information based app that will allow the user to quickly and easily access relevant content related to Magna Carta. After reading through the iOS developer guidelines, we picked out some of the most important iOS themes to consider in our app designs:

  • Screen Shot 2015-04-08 at 16.45.00Translucent UI elements – we could consider this so that when users taps on a clause, a translucent overlay appears with more information regarding the selected clause.
  • Use of negative space – it is important that we use plenty of negative space within our app in order to make it clear and easy for users to understand. We have to consider not putting too much information over the Magna Carta image as it could easily be overwhelming for the user.Screen Shot 2015-04-08 at 16.46.32
  • Simple colours – using the Cathedral’s style guide, we will use their chosen colour scheme in order for our app to be consistent with existing products.
  • Ensuring legibility – we will use the font suggested by Salisbury Cathedral (Eidetic), at a suitable, easy to read size.

It is important to also be aware of the basic UI elements in order to help us make further decisions about the design of our app.Screen Shot 2015-04-08 at 16.14.41

  • Bars (navigations/tab) – contain contextual information that tell users where they are and controls that help users navigate or initiate actions.
  • Content Views (collection/table views) – contain app-specific content and can enable behaviours such as scrolling, insertion, deletion, and rearrangement of items.
  • Controls (buttons/sliders) – perform actions or display information.
  • Temporary Views (alerts/actions) – appear briefly to give users important information or additional choices and functionality.

Using conventional iOS gestures is also essential and something we need to consider when creating the design of our app. ‘Using gestures gives people a close personal connection to their devices and enhances their sense of direct manipulation of onscreen objects (Apple 2015). Some of the common iOS gestures that we could incorporate into our app include: tap, drag, flick, swipe, pinch, and double tap.

It is also important to use Apple’s built in features (UI elements and gestures) due to the time constraints we have to make the app in. Given our current skill level, it is essential for us to stick with what we’re familiar with and are being taught so that we can produce a fully functioning, and hopefully aesthetically pleasing app before the deadline. Creating our own UI elements can be far too time consuming and difficult for us, and will only be done if it is essential for the app to function.

Here is Salisbury Cathedrals Guidelines that we were given. We will adhere to these within our app through using their chosen colour scheme, fonts and existing graphics. This is important in order for our app to be consistent with their existing products for the Magna Carta exhibition.

From this, we will go on to create some initial designs for our app taking on board the above Apple and Salisbury Cathedral guidelines.


Apple, 2015. Designing For iOS [online]. Available from: [Accessed 6 April 2015].

Final Installation

Posted on Leave a commentPosted in Installation, Processing, University


Download Full working document here

Testing Development

Posted on Leave a commentPosted in Installation, Processing, University

A quick re test of the screen yet again threw some possible issues and problems to resolve. As discussed in the previous post the decision to combine the visualizer and ambient audio sketch was taken. This combination was tested on the screen to see what the results were like in the environment.

As you can see from the video there was quite allot of erratic behaviour of some elements. This was due to the some of the sensitivity of microphone but also the background music being played by Costa coffee. A possible fix for this could be by adding a variable to take away some sensitivity, which could be adjusted for different locations.

By simply adding a variable then…

This small implementation of a variable to all elements could allow and install team to adjust the sound level to that of different environments or places to cancel out unwanted noise. This would mean that it could be calibrated for different install locations if it was to be placed in other location. Even though the piece was designed to get all the noise of which most of the element do some require so dampening down as they will start to behave erratically if not

Update: Final Instaltion Sketch

Testing Outcome

Posted on Leave a commentPosted in Installation, Processing, University

Live Testing within the installation area has given me some food for thought in regards to the final design of the installation. After some issues with hardware, design and motion detection a synthesizer version of the ambient detect and representation sketch is presented below. As you can see its relatively simple in design with 2 simple and refined moving features effect by incoming microphone audio.

The visualizer design which was pushed out as a result of changing screen could be used as a way to introduce some more animating parts. Its design was compromised with the change in screen however it had some really cool features of which could be utilized. The emotive time based colour schemes and complex system of music analysis displays change in different audio frequency’s. It would need some reconfiguration with the design but could add more depth to the current layout as there is lots of empty space that could be utilized.


Needs some re design.

Motion Ambience has been left out as the based on its recognition system and hardware ability’s to detect the difference between the motion at varying distances. The camera not being mounted in a high position meant that there was to much interaction in the close proximity however, about 4 meters back very little was being detected creating a representation which was not according to it desired effect/purpose. Some exploration of the kenect could have helped but it was decide that its importance was not a fundamentally part of sketch and could be taken out.

Combining the visualizer and ambient audio can be seen in the video below. Some of the graphics of the ambient audio sketch were not implemented original as it was considered it may not have been needed.

It was good to see all the elements working together but the design still looked messy and like before without a purpose for some of elements left them undefined. Simply re applying the infografic designs added purpose to elements in the design as it gave them a descriptive value.

Update: Testing Development

Live Testing

Posted on Leave a commentPosted in Installation, Processing, University

Testing the installation in the foyer brought about slightly different results to what I was expecting. In the previous post I discussed how the design had to be change due to the large screen being out of use which substantially effecting the design. This also had an effect upon the setup of equipment. I had a setup in mind of how the microphone for the audio input and the camera for the motion detect would be situated. As you can see from the diagram below the equipment was place in high areas to get the data from a larger sample. The microphone was placed in a high position to gain better coverage of the whole environment otherwise people closer could start to have greater effect upon this.


In the area it was more difficult to get a microphone and camera to a high areas as we had limited equipment like ladders and cables to put them in these positions. The compromise to this was facing the microphone and camera towards the main walking area which would capture the most action and best emulate the changing environment. This was not my original plan but the only way I could ensure changing ambience was similar to that of the enviroment.

First Day Testing

The videos below show the first simple visualizer working on the screen. At the time I was working on implementing the idea of Motion ambience within the sketch. The first tests gave a good insight into how the colours and size of elements changed on a large display meaning I could go away and adjust these. In terms of ambience it occurred to me that the environment was a lot noisier than expected also, the ambient music that Costa coffee was playing started to interfere. Lastly it was suggested that some idea of measurement could be implemented as current labels of each sound level to give the graphics slightly more of a descriptive element. These problems are solved in the next tests situation.

Update: Informtion Design


Second Testing

Implementing the Motion Ambience was relatively simple adding another dimension of interactivity to the installation. My thought was that the louder the environment got the greater the amount of movement would be. Testing proved an important aspect at this point as some unforeseen issues with motion detect aspect of Open CV.

As you can see from the video below, the motion detect was controlling the white bar that increased in size the more movement it detected. The video shows that the sound was increasing however the motion wasn’t as there was lots of people in the foyer theoretically it should have been of similar levels. From moving around in front of the sketch It occurred that the people closer to the camera were having greater effect upon the motion and the movement. This meant there was very little movement in contrast to the audio. This was something un expected and needs to be looked at in the next development.


In summary from testing in the environment I have found

  • That motion detect setup didn’t work as expected, it mainly was influenced by the distance away form the camera of motion and not the amount of movement itself.
  • Implementing the scale in the design explained the purpose of the installation far better without making it to forceful and full of text.
  • Adding the sound as a representation of what a similar noise level that was being experienced was effective as it grabbed peoples attention while, producing a good signification of there surroundings.


Hardware Malfunctions/Development

Posted on Leave a commentPosted in Installation, Processing, University

Hardware Malfunctions are something that can occurs during setting up of an installation normally due to technology. These malfunction are something that a designer has to deal with quickly and effectively so solve the situation or problem. Currently the design of the Visualizers elements for the ambient audio installation has been based around the use of a 2500 x 400 display. The key creative feature of its shape was being utilized within the design and lots of elements were designed around the use of the screen.

Unfortunately the screen is currently out of order due to a technological fault and will not be functional for use. This is going to effect the design of the visualizer as now a normal 1280 x 720 screen has to be used.

The 2500 x 400 (left) vs. 1280 x 720 (right)



This effects the design, just by changing the size of the canvas you can see what happens to some of the elements.

Before …

1500:400After ..


The design of the elements when the canvas is made higher doesn’t take advantage of the whole screen. Secondly the key features of the frequency bar was designed perfectly for this type of screen however now it doesn’t make such an impact upon the design and its purpose is slightly lost. Lastly the grouping of the elements is spread further apart making these seem singular and unconnected. This in terms of gestalt proves that the application of the principles clearly worked well within the original design. The principle of proximity is less applicable now and its effectiveness is felt by the lack of organisation.

Going forward I have looked at options of development as the current design needs some work o re thinking now its been compromised. A possible path for development is that of a more information based design which could include the use of a scale and/or, maybe some elements from more delicate in design.


Information Design

Posted on Leave a commentPosted in Installation, Processing, Uncategorized, University

Information design has been distributed to audiences for hundreds of years but, the mundane nature of some information makes it difficult to attract peoples interest when trying to draw there attention to the purpose and message. “Information design has come to be used specifically for graphic design for displaying information effectively, rather than just attractively or for artistic expression. Information design is closely related to the field of data visualization” ( 2015). Through the invention of printing, radio and TV information design has started to become more graphically focused through the use of media to grab the attention of audiences.

This sub category of design is called Infographic: graphic visual representations of information, data or knowledge. In his 1983 ‘landmark book’ The Visual Display of Quantitative Information, Edward Tufte defines ‘graphical displays’ in the following set of principles:

Graphical displays should….

  • Show the data
  • Induce the viewer to think about the substance rather than about methodology, graphic design, the technology of graphic production or something else
  • Avoid distorting what the data have to say
  • Present many numbers in a small space
  • Make large data sets coherent
  • Encourage the eye to compare different pieces of data
  • Reveal the data at several levels of detail, from a broad overview to the fine structure.
  • Serve a reasonably clear purpose: description, exploration, tabulation or decoration.
  • Be closely integrated with the statistical and verbal descriptions of a data set.

(Tufte, 1983)

A example of an infografic is the London tube map which gives an audience a series of complex information in a simple and easily readable form. The use of colours to signify the different lines and there intersections indication stations or points to change lines.


In terms of measurements the eye test is interesting as it purpose has effected its design. The style in particular of reducing type size down the page is now commoditised in relation to the eye test. Meaning anything produced in a similar style is categorised as a test of vision.

In a previous post I explored how information is being presented in connection to media experiences. One artefact I considered was that of the Vietnam War Memorial by Lin Maya. She presented the names of deceased soldiers in relation to the time they passed way, this attached meaning and relation to others around them who may have died as a result of the same conflict or similar time.


In connection to the installation and ambience the measurements of sound needs to be displayed with some reference to the environment. The changing levels of the input audio is a feature that I could utilise as a measurement like the frequency wave. Below the infografic displaying the levels of decibels uses images are used as description to how loud it is maybe some reference to specific environments and replaying audio in connection to that environment.


Going forward a scale needs to be introduced into the graphics as reference to the changing levels of ambience in the environment., 2015. CCSU Department of Graphic Information Design – BA of Arts & MA of Arts. [online] Available from: [Accessed 10 Jan. 2015].

Tufte, E., 1983. The visual display of quantitative information. Cheshire, Conn. (Box 430, Cheshire 06410): Graphics Press.

Motion Ambience

Posted on Leave a commentPosted in Installation, Processing, University

Ambience has been discussed throughout this iteration of the installation design in relation to sound and the environment its in but, the effect that motion or movement of people within the have upon has only been touched on. Motion of humans creates the ambient but also interferes with the environment as well in a physical. Movement of people creates sound and the ambient noise of which the installation is testing but, is there a connection between the amount of movement and the increase in sound levels.

A sound wave is the pattern of disturbance caused by the movement of energy traveling through a medium (such as air, water, or any other liquid or solid matter) as it propagates away from the source of the sound. The idea that sound moves in waves goes back (at least) to about 240 B.C. The Greek philosopher Chrysippus (c. 240 B.C.) these disturbances produce

Sound is produced by disturbances to an environment or medium by an object or movement of energy. This suggests that the more movement or disturbance cause the more noise is created. Ambient noise of an environment is created by sounds produced by objects within the environment. In summary this means that theoretically the more movement within an environment the more sound noise is created.

Motion is something that can be tracked with processing and Open CV library. The example sketch Frame Differencing looks a difference of frames and decides if there is moment and how much this is. This sketch could be used to decide weather there is any movement within a space mapping this to a value.

Taking this and implementing it within the design of the ambient sketch was relatively simple by taking the movement value of the images differences and mapping this to scale the height of a square, This compared to the average sound bar showed the change in amount of movement within the environment compared to the sound levels.

This connection between sound and motion is something that as a comparison between could prove effective as it adds a level of complexity to and second understanding of ambience.

Visualizer Design II

Posted on Leave a commentPosted in Installation, Processing, University

I have been working on the visualizer as a concept trying to add to the meaning and depth of interactivity. After work on Visualizer Design & Frequency Design I started to get a cleaner more sophisticated design for the screen size. The screen is around 2500 x 400 pixels meaning the design needs to be spread out long a large surface area in an abstract shape. I have been trying to use the screens distinct feature of it length to my advantage tailoring the design to fit this.

“The more similar (or different) two auditory sources are along a number of different dimensions, such as familiarity, continuation, and so on, the more likely it will be that they will be merged to be into a single sound (or will be separated and perceived as different sounds), that is, they will be placed in the same (or different) stream” (McGookin and Brewster,2004, 135).

This in relation to the visualizer McGookin and Brewster suggest the audio has 2 source, left and right. This would need to taken into consideration within the design introducing the gestalt principle of symmetry. They also consider that audio merges at a point of which a single sound is created this is considered the mix audio frequency. Introducing a central figure combining several elements of the sound has allowed me to make this the mixture of high and low frequencies. Going forward I could make the frequencies distributed as it they would in the environment e.g. left shapes are manipulated by left frequency visa versa.

At this point I have completed some research I , II around the effectiveness of colour upon mood. I took this forward and applied it to the visualizer of which had fantastic result allowing me to add layers of ambient interactivity that even the audience couldn’t effect, the environment did do itself. This is called involuntarily interactivity. For the design itself it made a fantastic colour scheme and made it more visually appealing. This element allowed the installation to consider more than human input but the effect of the environment around it.


The next problem I need to resolve is that of informing the audience of the meaning of each element and clearly showing them that the ambient noise is increasing so the can at on this interacting with it more passively. Some exploration of Information design invoking measurements needs to research to gain a better understanding of how to do this effectively within the design.

Update: Information Design

McGookin, D. and Brewster, S., 2004. Understanding concurrent earcons: Applying Auditory Scene Analysis Principles to Concurrent Earcon Recognition. ACM Transactions on Applied Perceptions, 1 (2), 130-155.


Frequency Design

Posted on Leave a commentPosted in Installation, Processing, Uncategorized, University

Continuing from the previous post about the screen size effecting how the elements of visualizer are distributed across the 2500 x 400 display, the design needs use the whole length of the screen effectively as this is its main feature. From designing some of the visual elements and showing this to peers I have found some people are slightly confused of what each elements purpose is. It has been suggested maybe they are not relating it to the different elements of the environment and sound within there surrounding.

Looking back at the current design a striping back of the elements or a restricting was needed to conceptualize the whole ambience of the room in something at was more similar to audiences. My first blog post was a good place to start because I considered the simplest form of audio representation that is familiar to many people. Windows media player and analogue sound equalizers have been a part of the music industry for many years meaning a large portion of today population could recognise there district visual representation features. I also took inspiration from an article discussing that of digital sound representation that stated “Sound frequencies are a continuation of a sin curve at different pitches, amplitudes and frequencies”(Waters, 2015).

I used some of these ideas combining them with the research in Gestalt to create some simple designs which incorporated the whole sound input together. The main goal was to not to divide it up into separate elements keeping it as one flowing object.


The most design was that of the frequency curves, they would be familiar to a range of audiences and could show the change in noise level with simple animation. Also these changes in volume level could be seen through out the whole sound spectrum. Lastly it provided a changing curve wave that looked aesthetically pleasing as its form could changed smoothly with a flowing effect.

With some manipulation of a mixture of examples I was able to produce a wave of witch was delicate in detail but showed the sound wave in a graphically smooth way. Dividing the line up into the buffed size (512) then drawing a line for each of these across the width produced a full line was across the screen. By applying the value of the input audio of each of the buffed size to its specific point produced a sound wave, which flowed with the incoming microphone audio. This application of division and proximity (gestalt) was applied to each point as its in close proximity to the next, when the input is added they move apart but always return to the same location at 0.

The video shows this applied with some music as this shows it changing form in the most flowing fashion. Applying this to media concept of ambience the erratic behaviour of the points is similar to that of the change and increase in varying voices sounds and elements within the environment. Going forward I will apply this to the visualizer possibly using this as an elements within the previous version, or use this on its own and develop its design further

Update: Visulizer II

Waters, D., 2015. Intro to Audio Programming, Part 1: How Audio Data is Represented – Game Theory – Site Home – MSDN Blogs. [online] Available from: [Accessed 10 Jan. 2015].