PULSE – Icon Designs

I created all the icons for my website in Adobe Illustrator. I designed the icons with a white outline and then when hovered over they become filled. For the about section, I made the icons brightly coloured, linking to the coloured bar charts to come within the guide. On completion I have made the icons red, making the users training achievements distinctly stand out as well as linking to the logo colour scheme.

homeiconshomeiconshovercompletioniconshover

View on Behance – https://www.behance.net/gallery/37999921/PULSE-Icon-Designs

Advertisements

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