Susan Kare

Susan Kare created the icons for the original Macintosh. They were considered to add personality and warmth to the lifeless computer. Now however I feel the icons have a really nice digital retro feel that could be fun to play with in my app development for my Stars Wars Travel as a nod to the earliest trilogy with Return of the Jedi being released in the same year as the Macintosh.

My only concern with this would be that the majority of the icons my app will require will be system icons and the pixel approach may make them difficult to understand on mobile. However, there is still the potential to include this approach if I decide to incorporate badges as rewards into my app.

 

Tim Van Dam

I was immediately drawn to Tim Van Dam’s abstract icons shown above as they appear to be system icons. I hope to emulate a similar outcome in my own icons. I think their simplicity is really effective and adds to the clarity they achieve. I also like the use of bevelled corners as I feel this brings a softness to the outcomes.

I also looked at a number of more detailed outcomes by Van Dam and found the above collection to include some interesting details. I love the colours and gradients used in the top left-hand set. I also like the perspective created in the folder outcome. I also found the blend of horizontal and diagonal shading to be a nice addition in the top right-hand set and like the variation of the two rather than all of the icons being split down the middle. I found the 3D effects in the two bottom left outcomes created through shading to be quite fun as well as the colours added to strokes of the system icons in the bottom left outcome.

All of Van Dam’s icons appear to be well-considered and this is something I would love to emulate in my own work. I would also like to play with shading and even incorporating shine or the idea of light in my icons outcomes if given the opportunity.

 

Zach Roszczewski

Finally, I looked at the work of Zach Roszczewski who has created system icons for Plaid, a financial app and Gett a ride-sharing service app.

Again I like the use of stroke in the above outcomes and the consideration that has gone into the diagonal strokes of the icons as demonstrated on the left-hand side. I also think excellent spacing has been achieved as I am now more aware after having reviewed the spacing portion of system icons found in material design.

Finally, I wanted to review some fill apps encase I find they are required in my travel app. I generally feel that fill outcomes such as the above work best as part of a side menu. However, I may find that my icons require a fill if they lack clarity and this will be a great reference if this is the case. I do think if I were to recreate an outcome similar to the above, however, that I would reduce the softness of the corners as I feel this reduces clarity. Though, I may find that when the icons are scaled-down the bevel included in the above is required so this will be something I will have to experiment with.

 

What have I learnt?

• Detailed icons can be really effective however when producing system icons clarity is more important therefore keeping the icon simple is generally good practice.
• Using fill or using stroke results in a different style of icon therefore it’s important to make sure a level of consistency is achieved when considering fill and stroke elements within an icon set.
• Ensuring corners are bevelled to the same degree and diagonal lines run at the same angle throughout an icon set is really important in order to achieve consistency and visual balance throughout an icon set.

How can I apply this to my work in future?

• In future when creating icons I think it will be most helpful to consider their purpose and make styling decision from there.
• When creating an icon set it might be helpful to run a stroke version and run a fill version and place them in context to determine which style works best.
• When creating larger icons set that require more detail in future I will consider colour and shading as well as experimenting with how much detail can be added before the icon becomes too cluttered.