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.
View on Behance – https://www.behance.net/gallery/37999921/PULSE-Icon-Designs
Reflecting upon feedback and my research on exemplar works, I decided to add more information to my home page. Originally, my site just featured the top image, however I have now made it parallax scrolling, in order to relate to contemporary website trends and to provide users with more information about the PULSE…
This addition allows users to find out more about the guide before they have to register, it clearly explains that it provides 15 week marathon guides that integrate Strava. Reflecting upon existing works and contemporary design trends, I decided to add icons to support the text in order to make it more visually appealing.
Reflecting upon the inspiration gathered from exemplar works, I styled my site using CSS; adding in my imagery, as well as styling the buttons and bar charts with selected colours and fonts styles.
To 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 through 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].