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.

Advertisements

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)