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:
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:

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

iPad Designs


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.

Initial iPad Designs

Here are some of the initial iPad designs for our app. It is important to consider the designs in both orientations, as users may expect to be able to interact with the app in both portrait and landscape orientations dependant on their preference and how well it suits the screen space.

Portrait Designs:portrait designsLanscape Designslanscape designsBoth designs are fairly simple, with a clear organised layout, this is important as users need to be easily able to navigate and use the app without encountering problems. Apples iOS developer guidelines state ‘Avoid gratuitous changes in layout’ (Apple 2015), hence the layout for both the orientations should remain consistent. We have adhered to this convention by using a similar layout for both orientations, with the use of a clear menu bar. The menu bar in the portrait design, would appear when users swipe left on the screen, or press the menu icon in the top right. The menu in the landscape orientation would automatically appear due to the larger width, but users can be given the choice to hide the menu bar when interacting with the Magna Carta. After making these designs there was a realisation that the menu bar is on the right side (portrait) and then moves to the left when it is in landscape. This is the kind of inconsistency that needs to be avoided in order to make our app more professional.

-simple, clear layout making the most of the limited available screen space
-full screen Magna Carta which the user can zoom into and explore
-use of menu bar and categories to let the user easily filter which clauses are highlighted

-needs to look more like iOS app by incorporating more of their design elements.
-doesn’t use Apple’s button icons
-wrong font used (But this is primarily due to not having the files at this point)

After discussion we have decided that the designs need to adhere more to Apples iOS Guidelines. Specifically, the menu bar needs to look more like an iOS app component, and the addition of a navigation bar at the top is a conventional iOS element that we need to consider. We also need to incorporate Apple’s button icons into the designs, as these will be familiar with users, helping to maintain user experiences of iOS applications. Experimenting with different ways to display the clause information is also something else to consider further.  For example, whether when touched it will slide left across to a screen containing the translation and further information, or if it will slide up from the bottom, or if a translucent box will appear over the top. We will also try out different colours from Salisbury Cathedral’s style guide in order to see which works best, by experimenting with changing the menu bar colour, clause information colour and the colour of which the clauses are highlighted. In the revised designs, we will also use Salisbury’s selected fonts (Eidetic and Quay Sans), in order for it to remain consistent with their existing products for the exhibition. From this, we will go on to improve our designs based on all these refinements.

Apple, 2015. Designing For iOS [online]. Available from: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/[Accessed 15 April 2015].