Iconography, or the art of creating suitable icons in web and app design, is probably one of the most underrated aspects of design. their size alone makes them easier to forget. Icons, in general, are drawn or created to be fairly small, and their importance to the totality of the design and usability is often overlooked.
At their best, icons can improve user experience in a big way. They direct users to perform actions in the interface. Also, the icons complement the theme your design offers your users. For example, icons that match the voice of your website can help the user acclimate with what kind of services or features you offer.
Realizing the importance of these tiny elements in the design, I have decided to create a guide for you to learn how to make your icons better. Here are a few tips for you to consider. I will note, however, that these are suggestions, and but not the only way to design icons.
So let’s start:
The warm up: what makes an icon “effective”?
Well-designed icons adhere to three attributes: aesthetic unity, form, and recognition. If you’re designing an icon set, you need to consider all three in order to make your icons really effective. These attributes, are essential to other design forms too, and they do not exist in independently of one another.
The attributes are:
Form
Form is the rudimentary attribute of an icon. Form defines the icon itself when its stripped down to its barest form. Once you remove the details of an icon, the form stands out. They are the circles, squares, horizontal lines, triangles, and many more. These primary geometric shapes are considered to be the most organic and fundamental structure of the icon. The idea is to think of a form first, start with the basic details, and build up from there.
In the icon above, the basic underlying shapes are highlighted in red to show the design’s rudimentary form.
Aesthetic unity
When multiple elements in the icon, and if possible, the whole icon set, are in sync, aesthetic unity can be achieved. Icons with these elements provide more cohesiveness in the design, and gives your work a sense of consistency.
In these icons created by Kem Bardly, we see that the dog icons possess a singular design style and concpet, creating uniformity in the aesthetics.
Recognizability
User-comprehension is the end-goal of an icon. At the end of the day, the icon exists because it replaces copy which would take more real estate in the design. An icon works if it embodies the the intent behind it. For example a mail icon usually means “messages”, or “e-mail”, and using it as an icon for “settings” just doesn’t make sense.
The above example shows the individuality of the icons, but also preserves the overall theme and color palette of the set, which makes it easier to see that they belong together.
Aside from that, recognizability also covers the need for an icon to be recognized as part of a set. Consistency is key.
Creating the icons
Use a grid
Grids are important; not only in iconography, but in other facets of design as well. There are lots of benefits in using a grid, and perhaps it is best to discuss them separately. In the case of icon design, you might work — for example — with a 32x32px area composed of a few parts.
In the grid above, we will basically allocate 2px from the outermost part of the grid to designate as a “safe-zone” which should, as much as possible, should be left empty. This is to create some breathing room around the icon, a bit like “padding” in CSS parlance.
Now that you have your grid ready, you need to remember general shape and orientation. Once you draw around the edges, right at the border of the safe zones, you will probably draw a polygon that will serve as a bounding box.
Generally speaking, circular icons should be placed in the center of the grid and would most likely intersect the outermost edges of the workable area. Remember, the safe zone should be avoided, but in a case where you would need to add some design accent that goes beyond the workable area to maintain the uniformity and the quality of the design, it can be excused.
Square icons should also be centered relative to the grid, and avoid extending to the outermost parts of the workable area. The middle should always be preserved in order to maintain visual weight in circular, and polygonic icons.
When icons are aligned diagonally, you should align them to the edges of the circular content area (see below). Take a look at the image and notice how the outermost parts of the icons align with the circle (although not exactly).
Remember that the grid is just a guideline, and it isn’t suppose to limit your design. You don’t need to fit everything exactly on the grid every time. It’s just there to help you maintain aesthetic consistency in your icons. So break the rules, if you have to.
The geometric side of icons
I took the second example, and simplified it down to its component outlines. That is because this is one of the most important aspects of creating an icon. You should start your design by drafting the finished product using simple geometry. Think of it like a pencil sketch before finishing a painting. You will be allowed to get rough, and make mistakes.
Curves, corners, and angles
Without variety, a design will look boring and mechanical. Good thing you can make use of curves, corners and angles in order to make the design more appealing to the eye. But you have to be precise about it. Almost exact measurements should be used in order to maintain uniformity in your icons.
Angles
In my experience, sticking to a 45-degree angle is always a good idea. The anti-aliasing of a 45-degree angle is always evenly steeped, meaning all the pixels active within the shape are aligned from end to end. This results into a crisp, and perfect diagonal sharp angle.
In most cases, this rule is always a must-follow but if the need arises to break it, you could try splitting it halves (22.5, 11.25 and so on) or using multiples of 15 degrees.
Curves are what separates amateurs from professionals. But the human body cannot create curves as perfect as tools from your software, so I would heavily advise you to rely on these shape tools and enter in specific numbers to create curves rather than drawing them manually.
Corners give off a specific sharpness and formality to the design. Normally, a corner becomes round at 2px, which, at 32x32px is a large radius. Make sure you pick the right radius that will fit your overall design motif.
Maintain the same design elements and accents
As we’ve discussed a lot of times earlier, the use of the same type or vibe of design is important to the overall feel and effectiveness of the icon. This is where you need to pay attention to the detail because small accents like a curved line, or a single shade of red can make or break the total consistency of the design. Note in the example below how I used a theme of rounded edges and corners mixed with sharp angles. I also maintained a specific color scheme to maintain the theme of the output.
Note that when you use the same design elements and details, you can easily change the whole design and feel of your set and everything will pretty much stay the same.
A note of warning though: do not fall into the trap of over-detailing the icons. You should remember that despite your focus on the little details that you do not forget that icons should instantly communicate an idea or a call to action. That is why keeping too many details will just make your iconography too difficult to understand, especially in smaller sizes (32x32px). Remember to prioritize function over detail.
A few things to remember before we say goodbye
Icons need to work harmoniously alongside the other elements within the design. Whether they are designed for desktop or mboile consumption, icons should be created with a wider perspective. You just don’t create icons individually, you create icons along the design itself.
The secret here is to approach the design process as this way: icons never function alone, no matter how solitary they may seem to appear. Remember to always evaluate your designs and see if they synergize with the other graphical properties of your project. Make sure they work as a whole in increasing the quality of the user experience.
Source
