Initial Designs – Training Guide

I came up with various design ideas to display the training guide, I produced these using Adobe Photoshop. I wanted to display data visually rather than in a basic table but also wanted it to be clear and simple for users to understand. I incorporated bright colours and the runner icon to make it visually appealing to the intended audience.

guideguide2guide3 copyguide5

From this, I went on to develop the first idea as felt that using bars makes it extremely clear for users to see the required training runs. For example, for shorter runs the bar length will be shorter and for longer runs the bar length will be longer. I transformed my digital design into a html mockup as well as creating mockups for the home and login pages.

Advertisements

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: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/[Accessed 21 April 2015].

Our Agency

Today, we formed our agency and decided upon job roles. Our initial ideas that we presented to one another, are either very similar or carry the same weight and style within the idea itself. From this, we believe we will be a real success at creating an app that Salisbury Cathedral really wants and needs, by pulling our brains together and forming an uniformed idea.
digital-agencies-copy

  • Ashley Wilkie -Project Manager
  • Alex Sisan – Programmer
  • Dan Burdan – Designer
  • Kaylee Hawkins – Designer
  • Kurt Stubbings – Programmer

As I am the designer the following posts will focus on the design aspects of our app. Other posts can be found on our collaborative blog – https://magnacartaapplication.wordpress.com/

Initial Testing

I have personally tested my first draft of idea to see if the programming works correctly. As I am still unsure as to what objects to use, I decided to test them all to see which works best, here are the clips showing my tests:

From the test, I found that the object orientated programming all works as expected, when they are on a white pixel, they descend, and when they reach a black pixel they ascend. I did however find that in the software icons examples, they tended to fall in groups at times which is something I will have to resolve if I choose these objects. I think the bright colours on the white background work well as they stand out and make the piece more bright and appealing. As you can see from the tests I have carried out, the brightness thresholding in each example varied slightly. The threshold level in each is the same so this is due to the different time of day and the brightness of the room. Therefore, from this I have learnt that when displaying my piece, I need to edit the threshold to a level where it would work best, to suit the brightness of public space in Weymouth House. Next, I will go on to show my pieces to users, in order to gain feedback as to which object they think works best and other improvements they may have.

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.

Surreal Photography

I have explored the concept of surrealism further by researching some surreal photography pieces. Here are some pieces that stood out most to me, I will analyse what I like about each one and relate them to my idea for my interactive piece.

photo surrealThis piece is by Ronen Goldman, it features a man obstructing apples that are flying towards him with an open umbrella. Goldman turns fantasies into works of art – ‘photo-dreams’. This piece was in fact inspired by Magrittes’ paintings, after Goldman went and visited the Magritte Museum in Belgium. I like the simplicity of this idea, and it has highlighted to me how simple ideas can be just as effective. It has quite a humorous effect and is very eye catching. The surreal element of the addition of the flying apples really helps to make viewers look deeper into the image, in order to understand what it being represented.

surreal

This piece is by Slinkachu, it stood out to me as it is very unique and unusual. It features miniature people having a ‘Tug Of War’ with a £10 note. The use of tiny people in his photography really helps to blur the boundaries between the real and the imaginary, hence show surrealism. This idea is again quite simple, but it has a strong effect, of which engages viewers deeper into his street photography. Slinachu uses everyday objects that are found in the streets and incorporates tiny people to create imagined scenes/stories, for example, skating on orange peel, shooting a bee etc.

EgarementsThis piece is by Cerise Doucède, her photography features flying objects that relate to the scene.Cerise says in her photography, ‘The imagination takes precedence over reality, the invisible becomes visible.’ In this piece, the couple are having breakfast in bed and there are various flying plates, mugs, cutlery and foods. I really like her photography as again it is very unique and interesting. It relates really well to my piece as likewise, I plan to have flying objects. The surreal element of the flying objects undoubtedly make the piece more intriguing and engaging.

From looking at surreal photography, it has really helped to inspire me for my piece. It has given me more ideas as to the objects that I could include in my piece. From looking at Ronen Goldman’s photography, I could incorporate animals or foods as the gravitating object in my piece. From looking at Slinkachu, I could include tiny people in my piece, which also relates back to Margrittes surreal artwork. I could have the people carrying out different activities, whether it be different sports or different activities relating to the media school (on laptop/filming/radio presenting). Finally, by looking at Cerise Doucède, I could relate the falling objects to the public space and have objects such as phones, laptops, cameras etc, or could relate the objects specifically to Digital Media Design and have objects the relate to the course, such as mac and adobe icons. By exploring surreal photography, it has made me realise more about how I could use surrealism in my piece. I have learnt that the piece doesn’t need to be highly complex as these pieces all show how simple ideas/concepts can be very interesting and engaging. Each piece is very unusual and unique, of which I want my piece to be. This will hopefully help it to stand out in the public space and encourage users to explore deeper into the piece and interact with it.

References:

Goldman, R, 2014. Ronen Goldman [online]. Available from: http://www.ronengoldman.com/?gallery=surrealistic-pillow-project-gallery [Accessed 9 Dec].

Slinkachu, 2014. Slinkachu [online]. Available from: http://slinkachu.com/home [Accessed 9 Dec].

Doucède, C, 2013. Cerise D [online]. Available from: http://cerisedoucede.fr/portfolio/egarements-4/ [Accessed 9 Dec].

Inspirations For Interactive Piece

In order to help me to further develop ideas for my piece, I have been looking at existing interactive motion pieces that interest me. These are the main two examples that stood out to me when carrying out my research. I will analyse what I like about each one and will reflect on how they have inspired me.

I like the fact that this installation is based on pixels, using black and white circles to create silhouette like figures. It captures peoples movements but I feel it is more interesting rather than just being a simple video capture. I like how circles are used to create the figures on screen and think it makes quite a good effect. The use of black and white contrasts the figures from the background and I think that this works really well.

I really like the use of colours in this piece, the black background with bright luminous colours works well and stand out a lot to me. When someone moves, the multiple lines all move randomly, changing size and colour. This piece is more abstract and artistic, and the movement of the person creates a nice abstract visual.

Similarly to these examples, I would like my interactive piece to be on motion and movement. Carrying out this research has been very beneficial and it has really helped me to gain more ideas for my own piece. From this, I have decided that I would like my piece to video capture people as silhouettes rather than being in full detail. By doing this, hopefully it’ll encourage more people to engage with the piece as I’m aware that some people don’t like the idea of being on camera. I would also like to use bright colours, possibly on a black background, to make it eye catching and appealing to users. Relating back to my previous processing workshop, I would like to incorporate the use of objects and vectors into my piece, and the motion of the people can obstruct and alter the direction of the objects. Next, I will go on to produce a post finalising my idea as well as looking at some motion tutorials online.

Hype, 2012. Iris. Available from: youtube https://www.youtube.com/watch?v=qhdG7OltXnU [Accessed 17 November 2014].

Universal Everything, 2013. Nike Flyknit . Available from: http://www.universaleverything.com/projects/nike-flyknit/ [Accessed 17 November 2014].