PULSE – Icon Designs

I created all the icons for my website in Adobe Illustrator. I designed the icons with a white outline and then when hovered over they become filled. For the about section, I made the icons brightly coloured, linking to the coloured bar charts to come within the guide. On completion I have made the icons red, making the users training achievements distinctly stand out as well as linking to the logo colour scheme.

homeiconshomeiconshovercompletioniconshover

View on Behance – https://www.behance.net/gallery/37999921/PULSE-Icon-Designs

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

Xcode – Facts App

HeScreen Shot 2015-02-21 at 16.27.20re is a screen shot of a ‘running facts’ app that I created in workshops. To access new facts, you can either click on the next/back buttons or swipe left/right across the screen. I am pleased with my first app and although it is fairly simple, I learnt lots of useful techniques. I will briefly explain some of the features I learnt and reflect on how this is important…

Screen Shot 2015-02-21 at 16.34.07

– Adding text labels and connecting them up with the view controller as an outlet or function. This is important as our Magna Carta app is bound to have some text in so learning this is essential.

– Changing fonts and colours. This is important as our app needs to look visually appealing and the use of colours and customiseScreen Shot 2015-02-21 at 16.39.03d fonts will enhance this. The aesthetics of the app are important, so it is essential that the colours and font we use match the style guidance given by Salisbury Cathedral, in order to successfully meet the clients requirements.

-Using constraints. This is useful as it ensures that the Screen Shot 2015-02-21 at 16.46.10layout of the text/images is clearly structured. The constraints mean that no matter what device and whether it is held vertically/horizontally, the layout will remain consistent and adjust accordingly. Having an app that is clearly structured and laid out is important as it makes the users experience more satisfying.

– Using an array of strings. This is important as usingScreen Shot 2015-02-21 at 16.50.49 arrays help to save time when programming. It means the text can be altered easily and the app will run through the array of facts. If the app consisted of Magna Carta facts, then this feature will be required.

– Using swipe left/right gestures. This is important as usersScreen Shot 2015-02-21 at 17.13.23 expect an contemporary app to have common gestures. It enhances the app and makes it easier for users to quickly swipe through the various facts.

Here is the code for the app:

Screen Shot 2015-02-21 at 17.00.18
Screen Shot 2015-02-21 at 16.57.04Overall, I am pleased with my facts app and how it turned out. I like how the text is clear and easy for users to read and I think this is extremely important. I also like the clear layout, and think using constraints is essential in order to make an app look visually appealing. Next time, I would possibly make the font size of the facts slightly smaller, as well as experimenting with different colours behind the title. From this, I feel that it is essential to go on to explore more gestures, such as pinch, rotate, tap and pan etc. These will all help to enhance the users experience and make the app more contemporary.

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].