Digitising Icons & Development (Navigation bar)
Once I completed my icon sketches and my research on other iconographers such as Vic Bell and Kyle Tezak I then collected additional inspirational icon designs that I think matched my stylistic vision on Pinterest before I start to digitise.
After many attempts of trying different icons for my navigation bar, I finally found what I wanted and I’m happy with the final outcome of my icon set and matching the bubbly artistic style of my attended app.
The Process
For this I made sure my icons followed a certain set of rules seen in Vic Bell’s creation of her icon sets, I needed to make each box consistent, proportional and inline with each other. I decided that the perfect stroke width for my icons would be 8 pixels. This makes the icons feel ‘less bloated’ and combined with my rounded caps, more aligned to the fun stylistic art style I want my app to convey.
To make everything proportionate I made sure to create a square box over each portion of my icons such as the outer box and the icon itself, although the icons are just below the default comfortable finger size (72 pixels) at 60px I fixed this by allowing the outer box to be also reactive too. Meaning the interactive hitbox stands at 100pixels wide and tall.
(*error – Icon stroke is 8 pixels and not 4*)
Adding colour
The first problem I encountered is making the icon set visually dominate so it doesn’t conflict with the surrounding design.
Testing each colour I was displeased with all of them as white conflicts with surrounding colours causing visibility issues and the rest look too ‘tacky’. This would pose a problem as the colour palette I chose conflicts with many colours.
To tackle this I issue I decided to engulf each icon in a hexagon with two surrounding strokes, I made the icon the same colour as the navigational bar and the background a dark green.
This is the finished result:
I also needed a way to display what page you are on so I decided to invert the icon.
I am pleased with the outcome of my navigational icon set, I feel like these icons will suit the artistic style I am going for in my travel app.
What have I learned?
This objective of creating icons has gave me more experience in both researching and designing icons. It has allowed me to explore different and unique ways that icons can be created. It also has allowed me to explore sizing, proportions and horizontal organization of icons due to their relevance. This has improved my overall skill set on icons in both design and implementation especially on mobile platforms. I am very happy of the outcome of my designs and feel like I have matched my stylistic artistic respectably.