Design: Meeting Intended Learning Outcomes

This post discusses how we have met the intended learning outcomes within the design processes.

Creativity: Throughout the design processes, we have been creatively thinking of appealing ways to visually produce our application. Lots of design experimentation was carried out, with many beneficial amendments being made along the way. We aimed for our app to be intuitive and easy for anyone at the Magna Carta exhibition to use and hence the simple sophisticated final design helps to achieve this. We creatively experimented with using a range of Salisbury Cathedrals style guide colours, in order to see which colours worked best on our app. We choose the brown and gold as the main colours for our app as they were the most aesthetically appealing, complementing one other well as well as signifying the importance of the Magna Carta document. Additionally, we experimented with different creative ways to display the clause information when it an overlay is selected. Coming up with a few ideas: on a new screen, pop up box or sliding up from bottom. We choose to have a slightly transparent details box sliding up from the bottom of the screen, this arguably can be regarded as an Apple convention as it is used on the iPhone. A prominent design feature in our app that highlights our creativity is the iconography  within the menu bar. We had to creatively think of inventive yet understandable ways to visually represent each of the Magna Carta clause categories. An example is the ‘all clauses’ icon, it is a feather quill writing, this is inventive as we have related it to the Magna Carta and the way it was written in 1215. Some other icons which emphasise creativity could be feudal and justice, they are quite unique and show that we thought outside of the box to come up with the inventive icon designs.

Originality: Our app and the features it offers users are original ideas that we have developed over the course of the project. We have tried to be original within our designs but at the same time have adhered to conventions in order for it to suit other iOS apps and hence live up to iOS users expectations. The use of categories filtering is a original feature, that we used to clearly enable users to interact with the Magan Carta. Without the category filtering technique, the document is covered in overlays, making it look less aesthetically appealing and also more confusing for users. Initially, the icons used to represent each of the categories were taken from the internet. However, to avoid copyright issues and to enhance creativity and originality we designed our own. Designing our own original icons was advantageous, helping to make our app more unique and memorable to users. Due to this being a live brief with clients, we were limited to the extent to which we could be original as throughout the design processes, we had to ensure our app suited the clients requirements. Also, we had to adhere to Apples conventions to maintain iOS users expectations and thus originality was further restricted.

Conventions: Our app adheres to Salisbury Cathedrals style guide, having distinctly used their chosen colours and fonts throughout, ass well as using their Magna Carta logo within our navigation bar. This is extremely important as it ensures that our app will fit well within their exhibition and maintains consistency throughout their other products. We have also adhered to Apples iOS developer guidelines throughout the design processes. This is extremely important due to producing an iOS application. We have followed Apples conventions with the sizing of design elements including navigation bar, menu, icons and font sizes. We have used the conventional apple menu button (burger shaped) within our applications. Users will most probably have existing knowledge on Apples icon and thus the icon will be readily understood. This is important as if users don’t understand what it means, they may not click on it and thus the menu bar will not appear for them to easily filter down the clauses on the Magna Carta. When creating our icons for each of the categories we further followed Apples guidelines, helping to make our icons look more professional. Apples suggestions was consistency throughout the family of icons, we achieved this through using the same size, colours and stroke weight. Although some icons can be regarding as inventive and unique, others can be regarded as quite common such as the ‘key clauses’, ‘women’ and ‘jews’ icons. Apples convention are that icons are outlined and then when selected they fill. We adhered to this convention by designing unselected and selected icons, however did not have enough time to incorporate this feature. Following conventions could again be seen as limiting design creativity and originality, however it extremely helps to make designs more professional looking and hopefully more successful with both the clients and users.

Professionalism: Our final design is sophisticated and professional looking, the simplicity making the app clear and easy for a range of ages to use and understand. Searching and adhering to Apples conventions portrays that we have been a professional agency, designing a suitable app to fit the iOS market and maintain user experiences. We have also been professional in regards to our agency -> client communications throughout the project. Keeping clients updated on the progress of our app and always following their suggestions. A main example of this is the ‘hidden details’ category that the clients strongly recommended and thus we included this within our app, showing the intriguing, random things about the Magana Carta document. As an agency we have been professional by assigning job roles and tasks. Following an agile methodology, we used trello to create and assign tasks and follow how individuals are progressing. Communication between the designers and programmers was strongly maintained throughout the project, which is crucial as programmers needed to know what to visually program the app like, and what colours and icons to use. Working on a live brief has extremely developed our professionalism in working within an agency and thus will be useful when going to work in industry.

Technical Drawing

The following image is a technical drawing which highlights significant elements of the designs and describes how each of the assets were designed to make the user experience as intuitive as possible  while at the same time meeting the needs of the client. The technical drawing displays how the design elements have been distributed over the available screen space along with annotations which explain the particular elements significance in the app. The technical drawing also includes the client’s style guide document enabling the reader to clearly identify where we have used their desired typography and colour scheme. The technical document is a relatively important design document as it enables project programmers to identify what the designers consider to be the central focus of the app and is usually accompanied by a pseudo code document which is a simplified coding document in which the designer expresses the desired functionality of the app too the programmer.

technical drawing 1After the completion of the initial prototype we identified that displaying all 63 of the clause hotspots on the screen at one time visually overwhelmed the user and wasn’t very attractive therefore the implementation of the “clause category filter” enables users to highlight  hotspots associated with particular categories therefore making the app much more user-friendly and  accessible.

The second technical drawing addresses the implementation of the filter system by displaying the various clause categories in a the form of expandable side bar.

technical drawing 2

 

How Design Was Influenced By Objectives

Objectives set out by the Client

Objective 1:

Application needs to display their high-resolution image of the Magna Carta Document.

Design:

Our application was ultimately build around the high-Resolution image the client provided. Prior to receiving the required image from the client we were able to produce an initial prototype from another image of the Magna Carta which enabled us to establish whether the vision of the client was indeed feasible or not. One of the major issues associated with using the raw high-resolution Magna Carta image is the file-size, one of the problems associated with having a considerably large image is lag which hinders the overall functionality of the app particularly when loading  and navigating the app. This objective also influenced us to implement navigational gestures such as zoom-in and zoom-out as users with larger fingers may of found it difficult to select specific clause hot-spot if the image was fixed especially as they are so close together.

3

Objective 2:

The application must provide Latin-to-English translation for at least a number of clauses.

Design:

A significant section of the screen space on the application was allocated to the clause translation text and utilized the QuaySans font expressed in the client’s style guide. This particular section uses an opaque background which prevents the translation text from blending into the High-Resolution image which would of hindered the visual clarity of the translation text. There is still a large section of the Magna-Carta document unobstructed enabling the user to still select clause hotspots. We were able to translate all 63 of the clauses from Latin into English by the deadline and it’s possible that the clauses could be translated into other languages in the future.

Screen Shot 2015-04-24 at 15.43.36Objective 3:

The application must appeal to a wide-audience (Young + Older).

Design:

The way in which we ensured that the application was visually appealing to all audiences and functioned intuitive was to keep to both the Apple and client style guides. By utilizing generic touch gestures and design elements it reduced the risk of cognitive-friction which may of been present if we attempted to implement complex means of navigation. By following the style guide set by the client it will ensure that our app appears connected to the parent application therefore ensuring a smooth visual transition between the two .

Colour Guide

Objective 4

The client asked for miscellaneous elements of the Magna Carta Document be highlighted and have hot-spots.

Design:

This was an objective set by the client quite late in the development of the project which resulted in use needing to produce additional logos for the filter menu as well add additional hotspots to the outside of the document. The client continued to ask for additional hot-spot elements to be added up to 2 days before the deadline.

Random hotspots

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

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.

Programming: Hidden Details Cateogory

The Magna Carta has special facts and details that are hidden within the app. Either historical context of the Magna Carta or additions and accidents that have happens to the document that we thought were important to the app and will give the audience a new insight to the document itself.

Below is an image of where the little details are featured within the app. While it is cool that each of the details have been highlighted, this is just an initial reference to where all the details are, as it isn’t easy to see what is being pointed out.

Screen Shot 2015-05-14 at 12.02.00

Using photoshop (other design program are out there) we drew boxes around each of the details making sure there was enough room around each of the detail wasn’t covered up by the boxes by using the same border thickness size we would use within the app. See below.Screen Shot 2015-05-18 at 13.36.15From this document we were able to get the co-ordinates of each of the boxes that we needed to use and place them within Xcode. This was achieved by pressing Command ⌘-T which allowed you to transform the object however it also tells you the X and Y axis positioning and the height and width the box is, then this information was placed in the correct hidden detail, the same way as the over co-ordinates for the clauses.

It was great that we had all the boxes mapped out, however these particular overlays would need to be transparent inside the boxes and translucent for the edges so that each detail is highlighted in a big enough area but you can still see what is actually inside the boxes. Like the photoshop document, however the overlays we had created only used a background colour.

To achieve this within the overlay.swift we needed to create an function that gave all the overlays a border however we only want the hidden details to have the border therefore we created a if statement that will set the default of the function to false and only when the function gets called within the clauses.swift the border will appear.  See below, the function.Screen Shot 2015-05-18 at 13.47.17

Therefore within the information about each of the clauses and the overlays, it was possible to specify whether the isHidden function is needed within the clause. See Below.Screen Shot 2015-05-18 at 13.53.55

In addition to this we set the hidden details to have a different background colour ( colour3) which would allow us to make the background colour transparent. By using “let colour3 = UIColor.clearColor() “. From this it has allowed us to show the hidden details within the document however it doesn’t stop the user from being able to see the detail itself which if we used the same overlays for the clauses it would. See below the result. Screen Shot 2015-05-18 at 13.59.39As part of the mystery of the hidden details and part of the charm of the document, we have kept the hidden details are a category on its own as we think they are important to the document but also didn’t want to distract the users from the content itself. Therefore they aren’t within the ‘All category’. They would overlap many of the clauses which would look messy.

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)

Debates about Design Software

Adobe_Illustrator_Icon_CS6To create the various designs for our app, we used Adobe Illustrator. The main strength of using this software was that we already had existing knowledge on how to use it and therefore didn’t encounter any major design issues. We were able to help each other as a group, teaching each other our existing design techniques. Due to existing knowledge, we were able to creativity exploit the software using the various drawing, shape and text tools to design our app and its features such as menu bar icons, categories and detail view. A contemporary debate could be whether we should have maybe used Sketch, a newer industry standard software, to produce our designs. Sketch ‘provides professional digital design for mac’, offering many powerful tools including but not limited to vectors tools, shapes, boolean operations, pixel alignment and layer styling options. If we used this software it would have enabled designers to develop their skills throughapp-icon gaining experience in new software. Sketch is considerably cheaper than the Adobe software, but due to already having access to the Adobe package, this wasn’t an issue, and therefore designing on Sketch would have involved a cost.  Due to the time period we had to produce the app we felt that it was not advisable to use a new design software as we didn’t know how long it would take to learn all the required features. Also, due to working on a live brief with clients it was important that we were all on track and working at a sufficient speed throughout the processes. Using a new software may have slowed down the processes as without the designs the programmers wouldn’t know what to visually produce the app like and thus meeting the deadlines could have been challenging.  Designers may have also encountered more issues if using a software that was new to them so it would have took more time involving watching online tutorials and reading help forums.

When passing the app and assets over to our clients, they may wish to adapt and expand upon it, thus due to the popularity of Adobe Illustrator it is more likely that others may have slight understandings of the common software rather than Swift. Designing with Adobe Illustrator therefore was considered as the best option for our agency. One of the ILO’s for the unit is ‘An ability to control and creatively exploit the associated hardware and software’ and by designing with Illustrator we were able to achieve this. Designers were able to keep on track with deadlines, creatively exploiting the software, using the required tools to create a sophisticated, professional looking design for our Magna Carta iPad app.

Adobe, 2015. Adobe Illustrator CC [online]. Available from: http://www.adobe.com/uk/products/illustrator.html [Accessed 14 May].

Bohemian Coding, 2015. Sketch [online]. Available from: http://bohemiancoding.com/sketch/ [Accessed 14 May 2015].

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