Programming: Styling the Side Menu and Navigation bar

With the navigation and Side Menu the styling for this was a little bit more tricky than the styling that we had done for the rest of the App. As majority of the app was made programatically it was easy to see where we needed to add/change the styling eg colour, font size, font style etc but there were elements in the side bar that were created in storyboard.

The navigation bar was done programatically. Using the same colour scale that we used for the detail view all we needed to do was specify the exact RGB values. The line of code “barTintColor = UIColor(r: 76, g: 61, b: 61, a: 1) ” Is the code that changes the background colour for the navigation bar. From this we were able to speciy the colour for the burger  ( menu button), The line for that is “tintColor = UIColor.whiteColor()”. As there is an image within the navigation bar, you need a UIImage and from there you can frame how big you want it too be and what image to use. See below on the code that implemented the logo and the colour of the bar.

Screen Shot 2015-05-19 at 00.03.10From this it achieved the logo we wanted and the colours scheme to match our designs.

Screen Shot 2015-05-19 at 00.12.19The title for ‘filter categories” was styled in the same manner as before. The line of code “barTintColor = UIColor(r: 239, g: 233, b: 211, a: 1)” Is the code that changes the background colour behind the text. From this we were able to specify the colour for the text that was being displayed. The line for that is “.titleTextAttributes = [NSForegroundColorAttributeName: UIColor(r: 76, g: 61, b: 61, a: 1)]” See below full code. Note this is very similar to the styling of the navigation bar as it is but for the SideMenuController rather than ViewController.

Screen Shot 2015-05-19 at 00.21.18However to change the styling of the categories was needed to be done in the storyboard. This was only tricky because we had’t been using storyboard which meant I was a little bit ropy on how to change elements. Once I had realised where to go and how to change this elements it was plain sailing from there.

StoryBoard make it very easy to change the colours of each of the cells. You just need to click on the particular cell that you want to add some styling too then on the right hand side there are attributes such as background colour, tint, alpha levels which can all be adjusted to change the colour of each element you want to change.Note: you must make sure that you select the correct element you want to change colour.

Screen Shot 2015-05-19 at 00.25.55As you can see from above all the different cells have been coloured in. By selecting these cells you can also change any labels (text) that you have. This is done in the same way.

Screen Shot 2015-05-19 at 00.34.50It was important to make sure that the styling for the app matched the designs that were created and that we made sure that the colours and style conformed to the original style guidelines that were given to us by salisbury Cathedral and Red Balloon. We believe that the overall look for the navigation bar and side bar with the design icons that were made, meet the criteria of these guidelines.

Screen Shot 2015-05-19 at 00.38.40

Advertisements

Programming: App Icon and Splash screen

At the beginning we mentioned that our app is now going to be a separate app that is designed for iPad and going to be an installation that sits next to the Magna Carta document. We felt it necessary to provide Salisbury Cathedral with a complete packaged mobile application. That includes the actually app itself packaged with all the features the client wanted but also a Splash screen so when the app is opened (and for our case a long time) it shows an image of what the app is that’s being opened and an Icon to display on the launch pad on the iPad device.

Using the design guidelines set by Salisbury Cathedral we created these elements that conformed to the styling. Making sure that all the colours that were used were colours that we defined by the guidelines, all the fonts that were used were the same as the other work that will be displayed in the exhibition and making sure all image assets are copyright free or the cathedral hold the copy right for them.

Below the design that was created for the app icon. Using a online icon generator  I was able to make the image Icon on a square 1024x 1024 then it created the images into all the sizes that we need for the app icon to work.

magnacarta_icon

See below the exported images that all the different sizes that are needed within the app.

Screen Shot 2015-05-18 at 14.56.28Of which can be then put into the imageAssest’s appIcon file which when xCode builds the app it will take the images and compile them into the app. See below all the images in the asset file for an iPad device, we could also put in the sizes for iPhones however as we are explicitly making it for an iPad we haven’t included these.

Screen Shot 2015-05-18 at 16.04.03The method for the splash screen was very similar, however there wasn’t a website that created all the different sizes which would mean I would have to export all the different sizes myself. Luckily enough there is a LaunchScreen.xib that allows you to create the splash screen on a storyboard* which I added a UIImageView to place the same image as the app icon. See below splash screen.

splash However as the splash screen is scaleable depending on what iPad model it is. Therefore we have separated the background image to the text. This way the background can be scaleable but the text will remain the same size and centred by using constraints within the launchscreen.xib.

* This is a self-declared storyboard which is for a launch screen it has the same layout however it doesn’t hold the same properties as a storyboard.

Final Designs

Here are the final designs for our Magna Carta application.

Main Screen – features a zoomable high resolution image of the Magna Carta. The clients wanted the Magna Carta document to be a main component of the app, hence we have clearly adhered to their requirements. The design features a simple navigation bar, whereby users can click the burger button to access the menu in order to filter the overlays.

main screen1

Menu – the menu design is very clear and simple. Each category is accompanied by a relevant icon, using iconography really  helps to make it more appealing for users and is also a common convention of iOS apps. The menu bar has a scrolling gesture allowing you to further filter the clauses by the various different categories.

menuscreen1

Clause Details – the translation and contextualisation of the selected clause appears in a translucent box that slides up from the bottom. It is clear and easy for users to read and the Magna Carta document is still the prominent feature.

clause details1

Overall, we are pleased with the design of our app, the simplicity really helps to make it easy for users to use and navigate without difficulty. The design is sophisticated and professional looking, which has been achieved through adhering to Apples iOS conventions, as well as Salisbury style guide. The designs show creativity and originality, especially within the category iconography. In the next design post, I will clearly discuss how the designs have met the assessment criteria.

final designs(designs by Kaylee)

Icon Designs

Originally the icons used in the designs were taken and edited from the internet. To overcome copyright issues and to enhance creativity and originality, we decided to design our own icons to use within the menu bar. Using Adobe Illustrators shape builder tool and pen tool to do so. Here are the initial icons designed for the original categories:
initial icons
Adhering to Apples iOS conventions, we used a consistent stroke weight and colour to ensure consistency throughout the icons. We didn’t like the fact that four of these icons were building like, and agreed that some of the icons needed to be more inventive yet still readily understood by users. We also decided that the categories we originally planned to use were quite odd, making clauses quite complicated to distinctly categorise. Therefore, we decided to use the categories that features on this website: http://magnacarta.cmp.uea.ac.uk/read/magna_carta_1215/Introduction__Magna_Carta_1215 . Consisting of: Church, Feudal, Forest, Jews, Justice, King’s Officers, Misc., Money, Peace, Trade, Wales&Scotland and Women. This made the categorisation a lot more clearer and shows how we have adhered to some conventions. We also decided to include categories for: Key clauses, All clauses, Hide Clauses and Hidden details. These were suggested by our clients, hence showing how we have been a professional agency, by communicating with our clients throughout the processes, complying to their suggestions. The Hidden Details in particular is a category that the clients emphasised upon, this includes highlighting intriguing, unusual things on the Magna Carta such as the piece of wood and ripped seal, thus helping to make our app feature more original and interesting aspects regarding the Magna Carta.

Here are our icon designs for the new categories:unselected icons-01 (designs by Kaylee)

Apples iOS guidelines suggest ‘to create a coherent family of icons, consistency is key’. We have strongly adhered to this convention as all icons are the same recommended size, using a consistent stroke weight and colour. Apple suggest that icon designs should be:

  • Simple and streamlined. Too many details can make an icon appear sloppy or indecipherable.

  • Not easily mistaken for one of the system-provided icons. Users should be able to distinguish your custom icon from the standard icons at a glance.

  • Readily understood and widely acceptable. Strive to create a symbol that most users will interpret correctly and that no users will find offensive.

categoriesWe have complied to these conventions, through designing simple, original custom icons that can be readily understood by users. We have been inventive in the icons we have designed, by thinking out of the box for ways to visually represent some of the categories. For example, the ‘All Clauses’ icon is a feather quill, and the ‘Feudal’ icon is a knight chess piece. This shows how we have creatively thought of ways to visually and clearly represent the categories. Some of our icons could be regarded as being quite original and inventive whereas others could be seen as being quite conventional.

Apples guidelines also suggests that you should provide two versions—one for the unselected appearance and one for the selected appearance. The unselected is normally outlined (image above) and the selected is normally a filled in version. To further adhere to conventions, we designed some selected icons. If we have time, the programmers will try to incorporate this element into the app, so that when a category is selected the icon appearance changes to clearly show users what category they are viewing. However, due to the short time period it is not a fundamental, so is just an added bonus if we can include this feature.

 

Here are the selected icon designs:

selected icons (designs by Kaylee)

Overall, by designing our own icons to use within our menu bar, it helps to make our app more original and avoids multiple copyright issues. We have clearly adhered to Apples conventions when designing the icons to ensure consistency and to help make our app look more professional. As an agency, we have been professional by constantly communicating with the clients throughout the processes, and have included categories of which they suggested. We have been inventive with the icons, producing some original and creative designs to visually represent the categories.

Apple, 2015. Bar Button Icons [online]. Available from: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/BarIcons.html#//apple_ref/doc/uid/TP40006556-CH21-SW1 [Accessed 12 May 2015].

Arts and Humanities Research Council. The Magna Carta Project [online]. Available from: http://magnacarta.cmp.uea.ac.uk/read/magna_carta_1215/Introduction__Magna_Carta_1215 %5BAccessed 12 May 2015].

Interpreting Designs for XCode

Extracting Assets The designs for our application were done using software such as Adobe Illustrator and Photoshop. This enabled designs to be easily modified and added to with every iteration of the project however the challenge of  transferring  these designs into a functioning app in  XCode is significant in meeting the needs of the client. One of these tasks involved the long process of recording the  X & Y coordinates of every clause hotspot going into the application. The clause hotspots were put into categories and colour coded which aided the programmers when creating the strings  associated with these categories Magna Carta Boxes Once all of the coordinates were recorded the programmers could then input and paste these values into Xcode which ultimately sped up their workflow. Here’s an example of a possible string;

Taxation Pink (#e000b8)

Clause 12:

  1. X = 6165, Y = 2528, Width = 1354 Pixels, Height 77 Pixels
  2. X = 398, Y = 2667, Width = 6212 Pixels, Height 77 Pixels

Clause 14:

  1. X = 5359, Y = 2788, Width = 2182 Pixels, Height 77 Pixels
  2. X = 398, Y = 2893, Width = 7143 Pixels, Height 77 Pixels
  3. X = 407, Y = 3010, Width = 6285 Pixels, Height 77 Pixels

Clause 15:

  1. X = 6683, Y = 2989, Width = 891 Pixels, Height 77 Pixels
  2. X = 398, Y = 3127, Width = 5256 Pixels, Height 77 Pixels

Clause 25

  1. X = 1710, Y = 3821, Width = 3256 Pixels, Height 77 Pixels

The coordinates were also recorded for other design elements such as the title bar and text fields. These were then published as a word document and accompanied with an PSD showing the guidelines for each of the assets which enabled the programmers to cross check that the coordinates were correct.

  1. Capture

iPad Designs

Screen Shot 2015-04-24 at 15.42.51 Screen Shot 2015-04-24 at 15.43.22 Screen Shot 2015-04-24 at 15.43.36

(designs by Kaylee)

Here are our amended portrait iPad designs. Following improvement from the previous Design Experiments posts,  we have altered the proportions to make them more suitable for the iPad, by changing the text and icon sizes. We choose the dark brown and gold colours from the cathedrals style guide, as they complement one another, with the gold font on the brown menu bar being really

Screen Shot 2015-05-01 at 14.35.11clear and easy for users to read. The use of the colour gold also helps to symbolise the status of the Magna Carta as a significant, highly influential document. The off-white icon colour also stand out against the dark brown and are clear to view and understand. We improved these from the previous designs by making them all outlined with a consistent stroke weight. However, the current icons are taken from the internet so to avoid copyright issues and enhance originality and creativity, we are going to make our own icons to use, adhering to Apples suggested icon conventions (size, stroke weight, appearance). The simplicity of the designs helps to make the app easy and straightforward for users to use to view the Magna Carta clauses, this is important as a complex design could make it complicated for users and hence would not be very successful. We want our app to be intuitive, whereby anyone in the Magna Carta exhibition can easily use it without difficulty. From this, we have decided to further experiment with the clause overlay colours. Due to the vast amount of clauses, some of them will be situated on the same lines, therefore differentiating between the clauses could be difficult. To overcome this problem, we are thinking of alternating using two different colours for the overlays. This would make differentiating the different clauses clearer for users, we are going to experiment with changing the opacity of the existing colour, slightly changing the colour, or possibly using one of the other colours in Salisbury Catherdrals’ style guide.

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