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

Advertisements

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