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.

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

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.

menuscreen1Clause 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.pngOverall, 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.png(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.png(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.

We 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.png
(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].

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.

iPad Designs

screen-shot-2015-04-24-at-15-42-51

screen-shot-2015-04-24-at-15-43-22screen-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.