Table of Contents
Quick, tell me what comes to mind when you hear “tallest building in the world”? The Burj Khalifa? Or maybe the Empire State? How about the word ‘heart’ – what do you visualize when you hear that word? The most probable guess is that the heart icon ❤️- is what comes to mind, instead of its anatomical representation, right?
It’s no surprise that icon design plays an essential role in our lives, seeing as humans are highly visual creatures. Visual cues are a crucial part of our basic adaptive behaviors. From finding food to picking up on threats, our brains have evolved to absorb and react to visual information in increasingly effective ways.
The visual medium plays an important part in software applications. When one wants to search for an item on a page, one instinctively looks for the magnifying glass icon. Want to delete something? Yes, it goes into the dustbin.
A design icon refers to a graphical representation of any element. For example, Google’s Material design icons comprise over 2,500 glyphs in a single font file with a wide range of design variants.
Know your icons before designing them
Icons are an inseparable part of user interface design. If done right, they can help convey the core idea and intent of an action with minimal effort. Design icons are also a great way to save precious real estate on screens while lending an aesthetic edge to the user’s experience.
UI design icons are an important tool to reduce cognitive load on users. Universal visuals that represent a real-life object or action are self-explanatory. For example, cautionary or negative actions such as ‘delete’ are best conveyed by a cross mark in red.
But despite these obvious advantages, ill-crafted icons and interaction designs can also be a source of usability problems. This tends to happen when designers focus on aesthetics rather than functionality which makes the icons ambiguous or difficult to recognize.
The primary function of an icon is to convey clear meaning and guide users to where they need to go and the actions they can take. In this post, we’ll tell you how to design awesome icons that do exactly that.
Convey the intended meaning through your icon
Outlook mail’s dashboard has some ambiguous icons at numbers 3, 4, and 5 from the left. Any guesses as to what these convey? For the uninitiated, these represent Archive, Delete, and Junk, however, you would be forgiven had you mixed them up.
When a commonly-used pictogram with contradictory meanings is used to create an icon, the results are usually confusing to users. Just like in the case of Outlook mail, the icons have been used in the right context, but can still be open to interpretation in the absence of labels.
As humans, we instinctively lean towards distrusting the unknown. Therefore, it doesn’t matter how universal you might think your icon is, it may still seem ambiguous to first-time users. It has been observed that users tend to avoid interface elements that they don’t understand.
While the efficacy of your design is ultimately tested once the workflow/app undergoes user testing, there are ways to ensure that you start off by designing icons in the right manner. So, before you set out to design, ask yourself these questions –
- Is my icon justifying the brief?
- Can it be universally recognized?
- Is it aesthetically pleasing?
Answering these questions certainly isn’t the foolproof way to ensure your icons are universal, but it will definitely set up your design process in the right direction.
Ensure consistency while designing icons
Consistency is the mainstay of UI design. A consistent visual experience does not surprise the user and is key to gaining their trust.
Consistency is also a key attribute of every icon library. It mandates that all icons should be the same size when you build them. You have to choose a common size to build all your icons. Here are the 3 factors to consider –
Pick a common size to build all your icons, either 24 x 24px or 32 x 32px. This is because developers are likely to use the 8-point grid, you need a size that is divisible by 8. For the purpose of this demo, we’re choosing a 24 x 24px icon.
The grid contains 2px breathing space surrounding the white space.
When building icons, it is important to align objects to the pixel grid, especially straight lines. The grid can be used to design other shapes as well. Also, another advantage of using grids is that spacing becomes easier and helps you stay consistent with your placement.
Strokes or fills
Convert the borders to create outline strokes and create definitive, consistent shapes.
Filled icons have higher recognizability as they offer more clarity in design. Stroked icons come with the ability to create tiny details. However, choosing an appropriate style of icons involves matching them to the visual guidelines of the brand you’re designing for.
Aim for simplicity and minimalism
Minimalism is a style of design where artists/designers make use of only those concepts and elements which are most essential to the successful operation/execution of the product. This is done by getting rid of any component which may be unnecessary or excessive.
– Creating a minimalistic design involves the reduction of form, colors, and space to attain a level of the utmost simplicity.
– True minimalism is achieved when all of the excesses have been removed, with only the absolute essentials being retained.
When it comes to icon design, ensuring clarity is of utmost importance. Therefore, reign in your will to decorate or jazz up your icons if it does not add to their purpose and meaning. Refrain from adding any extra bells and whistles to keep only what’s necessary.
Stick to geometric shapes
It’s easier to stick to basic shapes when starting off with icon design. Basic geometric shapes such as rectangles, squares, and circles are all good starting points to create more complex forms.
When drawing geometric forms, you can either start from a square or rectangle, or you can use the pen tool to go from point to pixel. When doing this, it is extra important to have a clear grid so you can see where those points are going.
When drawing angled geometric shapes, use the pixel grid to draw angled rectangles instead of using a rectangle and rotating it.
Maintain a front-angle perspective
Using perspective in icons is not an easy task. Drawing with perspective takes up extra space since the icon has to be made larger to make for comfortable viewing. Therefore, the user-first approach to designing icons always recommends the front perspective. As a rule of thumb, you should never create icons that have to be second-guessed by users just because they have been designed at a fancy angle or dimension.
Pay attention to proportions
The crucial importance of metaphors in icon design was mentioned at the beginning of this article. We associate real-life objects with icons all the time without a second thought. For example, we instinctively click on the house-shaped icon to take us to the homepage of a site.
Therefore, when scaling icons to create smaller or larger versions, it is important to retain the right proportion so as not to distort the image. To do so, make sure to use the key shape that best demonstrates the proportion of the metaphor.
UI design icons are an important part of the component library, which in turn, is a crucial element of a wider design system. They’re the foundational building blocks of illustrated content. When designed well, they can elevate the user experience of any product or application without taking up a lot of real estate. What are your go-to tips while designing icons? Share them with us in the comments!