We use icons everyday, from smartphones to signage, they are essential parts of our everyday life. So much so that we take their design for granted. They are often abstract designs, getting to the core of the meaning they want to convey. Simplicity is a key component, but their purpose must still remain clear to all. Icons are not a new idea, they can be traced all the way back to the cave paintings of early civilisations. Designing effective icons is not an easy task, and some icons (such as a house for home or the hamburger menu) are now so ubiquitous, that to try and use something else would be like trying to reinvent the wheel. This does not mean there is no room for creativity, each use case may require subtle alterations to even the most well recognised designs. Icons are the focus of any modern UI, so understanding them, being comfortable with their design and use are key components of becoming a modern designer.
In this week’s lecture was all about icons. We looked at lots of different styles of icon some old, some new, as well as exploring the key components of individual icons as well as icon sets.
One of the most wonderful aspects about icons is that they do not require language, a well-designed and easily understandable icon can be internationally recognised. Icon design still needs to consider differences in culture across the world. However, they offer an opportunity to remove the barrier to understanding the incredible array of languages in use worldwide creates.
We looked at the main things to consider when looking at and designing icons. For accessibility and usability for example, having labels on icons is key. While some icons can do without all main navigation icons and any that are unfamiliar or could be misunderstood would require labels as best practice.
We then looked at the main components to think about when designing icons, the first being Style.
The style of the icons need to complement the visual identity of the overall product, whether this means designing within set brand guidelines, or simply carrying over, colours or overall graphic cues from the other visual components within the product.
There are also several different icon styles to pick from these go from: outline icons at the most simplified and abstract end of the scale right up to skeuomorphic icons which are highly detailed and look like the real-life task they are representing. Below is an image covering the different styles of icon:
Source (https://uxdesign.cc/ui-cheat-sheet-icon-categories-icon-style-reference-guide-5ea75a254c3b) Last Accessed 09/02/23
The current trend is for minimalist icons, but minimalist icons still have to have enough detail to be recognisable. This is the second component of icon design level of detail. Where less is more, up until the lack of detail hampers understanding.
The next component to think about is scale and this is also illustrated in the image above. Icons will look different at different scales, and as designers we could be designing icons for a screen as small as a smartwatch or as large as a interactive touchscreen as seen in business and education settings. Ideally, you would want to design in the size that will be used, but if you are designing for a product that will be used on multiple devices then, you need your icons to remain very similar and definitely clearly to achieve the same function across devices. In this case it is good to design across a range of sizes and certainly to have a small, medium and large option available.
Another key component is harmony, all the icons in a set need to work together, and we can do this by using the same style. That means if we use outline icons for the main navigation, it would not work to switch to skeuomorphic for other icons in other places within the interface.
In saying this (and at risk of it sounding like a contradiction) icons cannot all be the same, they need to be able to be differentiated from each other. This can be done by using colour, different colours for different icons or icons that do similar jobs. We can use a different scale if we require hierarchy in our design using icons. However they must sit well together and look like they have come from the same set, not just a random collection of icons thrown together as that was what was available. It comes down to the Gestalt Principle of similarity that we learnt last semester, people with assume icons that look similar will do similar things, so your main navigation icons should all look similar, allowing for differences only to show their different functionality.
Below I have included a selection of different icons that represent accessibility for people with disabilities. This is an icon I see on a daily basis whether to represent an accessible toilet or a designated parking space. While all of these icons are designed to convey the same meaning. It is interesting to look at the differences in them and how some are better and more representative than others.
