Clause Overlays

Currently, all the overlays inmain screen-01 our designs are gold. However, we discovered that this will cause problems due to the vast amount of clauses that we need to hotspot with the overlays. Using just one colour would make it very confusing and hard to distinguish between the clauses, as some clauses are situated on the same lines. Therefore, to over come this problem we decided to experiment with alternating the clauses using different coloured overlays.

main screen experiment-01

Here we experimenting with changing the opacity of the existing colour. We found that this still wasn’t clear enough to distinguish the clauses as the overlays were too similar.

main screen experiment-02

We looked at using a slightly lighter gold to try differentiate the clauses. This worked slightly better but we still felt the colours were too similar.

main screen experiment-03

Therefore, we decided to use the blue from Salisburys’ style guide in order to distinctly separate the clause overlays. We will use a low opacity on the blue so that it doesn’t stand out too much and to allow the latin to still be slightly visible.

It is important that the clause overlays are clear and easy to differentiate from one another as each overlay hotspot brings up more details about the selected clause. Using one colour makes it really confusing and complicated for users, this would not be successful as we want our app to be intuitive and easy for a range of ages to use within the exhibition. Therefore by making these slight changes, it helps to visually improve the design of the app as well as enhance users experiences, making it a lot clearer for them to use the hotspot overlays.

Design Experiments

Based on the various improvements that we agreed upon from our initial designs, we have creatively experimented further with different designs to consider for our app. We experimented with a range of colours from Salisburys’ style guide in order to see which colour scheme worked best for our application. We also experimented with different ways to display the detailed/selected clause information, for example on a new screen that would totally cover the Magna Carta document (1), sliding up from bottom which half covered the document leaving the top exposed (2), and a temporary pop up box which would be centrally placed  stopping navigation briefly but showing the document was still there(3,4). Here are some of the design experiments:

1.designs 2. designs2 3. designs3 4. designs4
(designs by Kaylee)

We liked the addition of the navigation bar in these improved designs and felt this helped to make it more accessible for the menu. The use of the apple menu button (top left) also helped to make it adhere more to Apples iOS Guidelines and using these common button icons means most iOS users will already have existing knowledge as to what it means. The slide out menu of categories is another feature that the group liked, allowing users to easily filter their search on the Magna Carta clauses. If there was no filters, the whole document would have overlays due to the vast amount of clauses, so the use of categories helps to narrow down the overlays, making it a lot clearer for users. The use of icons to go alongside each of the categories helps to make it more visually appealing; it is important that the icons we use are readily understood, hence why we have used a key icon for key clauses and a money icon for debt etc. We decided that our favourite colour scheme was the dark brown with the gold overlays (3). We felt that these colours stood out most and fitted best with the design. The blue was slightly to powerful and took away from the documents importance. The simple design helps to make it clear and easy to navigate and read without difficulty or prior knowledge. We decided that having the clause information/detail slide up from the bottom of the screen worked best as it allowed users to still see some of the document unlike the others, also it was more native to apple devices. The clients, Seif and Steph also said they liked the idea of the details of the clause popping up from the bottom, and covering the lower half of the screen with a translucent background (similar to design 2). A main improvement to consider is proportions, as at the moment the font and icon sizes are too big. Apples Guidelines suggest – ‘Text should never be smaller than 11 points, even when the user chooses the extra-small text size. For comparison, the body style uses a font size of 17 points at the large size, which is the default text-size setting’ (Apple 2015). It is also important that ‘all icons in your app look like they belong to thScreen Shot 2015-04-27 at 12.41.21e same family in terms of perceived size, level of detail, and visual weight’ (Apple 2015). This is another feature that needs to be improved upon as at the moment some of the icons are filleScreen Shot 2015-04-27 at 12.40.04d in whereas others use an outline. Apples iOS Developer Guidelines suggest ‘you should provide two versions—one for the unselected appearance and one for the selected appearance. The selected appearance is often a filled-in version of the unselected appearance’.

From this, we will go on to further improve the designs, making amendments to the proportions, including menu, text and icon size. We will also make sure all icons are consistent and create unselected and selected icons in order to further adhere to Apples conventions. Also, in the above designs the colours are only rough so we need to get the hex codes of the colours to ensure they exactly match the style requirements. Additionally, we will go on to further research the Magna Carta clauses in order to clearly define the categories that will be displayed in the menu bar.

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

Experimenting With Background Subtraction

When testing the brightness thresholding example, I found that in order for it to work as required for my piece, then the background behind the person needed to be clear. This is a problem in the public space, due to the walls being covered in pictures and posters, as well as Costa in the background. Therefore, I decided to briefly experiment with background subtraction in order to see if it would benefit my piece.Screen Shot 2015-01-13 at 15.11.36

Here are the before and after screen shots:
Screen Shot 2015-01-13 at 14.51.16

Screen Shot 2015-01-13 at 14.51.30As you can see the background subtraction takes away the green wall and produces an outline around the objects. I experimented with altering the threshold levels and altered various bit of code. However, I felt that the effect looks quite grainy and I was unable to create a silhouette like figure. Also, each time I want to subtract the background, currently I have to hold down the mouse. This may become quite hard in the public space, as there will be lots of people walking around in both the background and foreground and therefore I feel that this effect won’t work as required. Therefore, from this I have decided when displaying my piece in the Weymouth House, I plan to put up a white screen for users to stand in front of. Next, I will usability test my interactive piece, ensuring there is a plain background behind the user.

Processing Experiments – Popping Bubbles

When working on my piece, I decided to experiment with an idea that when the user hits the balls they disappear. I edited my existing code so that instead of ascending when they hit a black pixel, they now disappear. If I was to develop this idea, I would create it so they pop like a bubble, rather than just immediately disappearing. Here is a video clip showing the experiment:

I think this works well and with further improvements could look better. However, after talking to my audience, and showing them my progress so far they preferred my initial idea of being able to obstruct falling objects. I will continue to work on my idea, developing the programming for it.

Processing Experiments

Over the holidays, I have been working on my interactive idea, developing the code and experimenting with different objects. Using Shiffmans brightness thresholding example, I then used existing knowledge of object orientated programming to create different classes (a blueprint that allows us to create an object), where each class contains data, constructors and methods. The methods I used for the different classes were all fairly similar:
void display () – displays the class (ellipse, rect, img etc.)
void descend () – descends to bottom of sketch (y+yspeed)
void bottom () – when they reach bottom, the start back at top of sketch (if (y > height){y=0;})

One idea is to have various brightly coloured shapes, here is an example:

I like the simplicity of this idea, and think the various shapes could work well. It makes the piece appeal like a game, which will hopefully encourage users to interact. I like the bright colours and this is something I would definitely use, no matter what objects I decide to use. The colours really stand out on the black and white video capture and I think it’ll look good when I go program it so the black pixels obstruct them from falling. I think the shapes would be a simple, yet effective objects to incorporate into the piece.

Another idea is to have ‘raining men’, here is an example:

golcondaThis idea links back to Magrittes’ surreal art work (image to right). I like the fact it looks quite unusual, and think it strongly relates to my concept of surrealism. I would have to program it so when the bottom of the ‘raining men’ figures reaches a black pixels then it moves up to a white. Again, I really like the bright colours and think they help make the piece stand out and look more appealing. The disadvantage is that it may be slightly harder to program using figures but I am willing to experiment further.

From this idea, I could incorporate various stick man doing different activities, in order to make it more varied and interesting. For example, I could have figures carrying out different sporting activities. Each figure could be a different bright colour, helping it to stand out and make it more visually appealing. Sport is something I enjoy and thus this will make my piece more personal. This can also relate back to my previous post regarding Slinkachu and his intriguing street photography of tiny people.


Another idea inspired by Cerise Doucède photography is to have falling objects that relate to the public space. Due to my interactive installation being in the Media School this idea could work well and users can relate to the various objects, here are some examples: social media 1 | black2012051003csicons-02

From experimenting with my interactive piece, I have learnt that the brightness thresholding example works best when the background is clear. Also, it depends on the lighting of the space and the set threshold number as to how silhouette like figures will be. I need to test these example in the space to see if it will work. I may find that the background may be a problem due to the walls having various photographs and posters on them. So, I will have to test on various public displays to see which one would work best and alter the thresholding accordingly. If needed, I may have to put up a white screen in the public space and set it up so users stand in front of the screen.

Next I will go on to add a class method:
void obstruct () – descend when on white pixel and ascend when on black pixel.
I plan to do this using previous knowledge of conditional statements and gaining help in workshop if required. Then, I will begin to test my piece both in the public space and with the target audience, to gain feedback and further follow the iterative design process.

Experimenting with Colour

For my interactive piece, I would like to incorporate Brightness Thresholding into the video capture. I have decided to experiment with different colours I could use, here are some outcomes:


I feel that the ones with the white background would work best as it would be harder to see the falling objects on a coloured background. Although I feel the coloured figures look good, I think it would make the objects stand out less and I would have to be more cautious as to what colour object to use. Therefore, I think that the white background and black figure (top left) would work best for my idea. I could then use any colour for the objects and it would clearly stand out and there will be no contradicting colours. These colour experiments reminded me off Andy Warhol’s pieces, here is an example of his ‘Marilyn Diptych’ piece that is displayed at the Tate Museum:

Marilyn Diptych 1962 by Andy Warhol 1928-1987
Similarly to my idea, the figure is positioned on a clear background. I plan to incorporate colour into the falling objects rather than the video capture. I feel that some of the target audience may not like being on camera and therefore hopefully the black and white silhouette-like effect that I plan to use will help encourage users to interact with my piece. The black and white piece on the left looks similar to what I plan for mine to be like. Andy Warhols art work also features various objects (Campbells soup, Coco Cola etc), and for my piece I need to experiment with what objects to use. This relates to the theory module I studied (Media and History) and highlights how past art/design movements are still important. Pop Art came around in the 1950s, yet it is still widely recognised and used in contemporary. Next, I will go on to experiment with different objects I could use in my piece as well as developing the code.

Tate, 2014. Andy Warhol [online]. Available from: [Accessed 16 December 2014].

Brightness Thresholding Images

I analysed Daniel Shiffmans brightness threshold example and edited the code to create a piece inspired by the surreal photography I have been looking at. Here is the code…Screen Shot 2015-01-11 at 19.24.28

I feel confident in being able to re-work this code as it uses all previous knowledge I have learnt in processing workshops with the addition of threshold. It require the size setup, loading of an image and its pixels, for loop and a conditional statement so that if it is greater than the threshold it is white and black if less than. Here is the edited result:

Screen Shot 2015-01-11 at 19.43.12
I really like the brightness threshold effect and I may incorporate it into my interactive piece. Inspired by Cerise Doucède’s photography, I added floating tennis balls to the piece. Next, I will explore some video effect examples and further develop my idea.