Designing the Iconified icon set

Before the first bezier is curved in a new icon set, decisions have to be made about the type of use, the size at which the icons will be used, and what style of icon is to be made.

In this article I will discuss the design process I followed when creating the Iconified collection. It should be noted that the process is not linear, but rather iterative and a good portion of the time required to create a set — about 3 months in this case — is spent experimenting.

For the Iconified set, I created no fewer than two dozen variations of a couple of the icons at very small and very large sizes, using different combinations of line weights, and different styles before truly beginning to build the set. The rewards are worth the effort, however. To quote my friend and fellow icon designer, Tom Nulens (Sodafish),

“When you really fine-tune the icons, they sell better — much better”.

Genesis of an Idea

Most of my icon designs begin with pen on paper in a grid sketch book (I like the Dot Grid brand). I like the tactile quality of pen on paper, and the use of rudimentary tools forces me to think of the idea not the rendering. I can sketch on paper much faster than I can on the computer. When creating icons of objects that are constructed from the primary geometric shapes like rectangles, triangles, or circles, I will work directly in Adobe Illustrator, but more complex shapes like a dog, a tree, or hand gestures are easier for me to sketch on paper. I will, in some cases, revert to pen and paper for simpler shapes when I need to iterate quickly without getting bogged down in rendering style.

For the Iconified set, I spent several days sketching everything that came to mind. I started by thinking about things that interest me such as dinosaurs, space travel, and cooking. Most of my sketches never make it into the final set, but the main purpose of sketching is to prime the pump, so to speak, and get my creative juices flowing.

Grid Size

Even though retina displays are making the need for pixel-perfect design obsolete, not everyone will be viewing your icons on a retina display. In the same way that web designers and developers still need to contend with browsers and displays that are not state-of-the-art, so must icon designers be mindful of lower resolution displays.

Icons that adhere to a pixel-perfect grid will reproduce more crisply than ones that do not. When I began the Iconified collection, I spent a lot of time experimenting with different grid sizes ranging from 8, 12, 14, 15, 16, 20, and 32 pixels square.

Each of these grid sizes has its own merits. In particular, the 12 pixel grid works really well for displaying icons at very small sizes. The trouble with very small grids, though, is that as the icons increase in size, the lines start to become very heavy. I’m particularly fond of the look of the 14 pixel grid icon and expect that will evolve into its own set eventually.

Ultimately, though, I chose the 32 pixel grid because I found it to be the most versatile given my chosen line weights (more on line weights in a bit). I really like the 2-to-3 pixel relationship, especially at 100% scale. I cheated a little bit, though, as some of the icons in the set don’t adhere strictly to the 32 pixel grid. They use the correct line weights but, as is the case with the document icon shown here, no dimension in the icon is 32 pixels. I chose to make the icon smaller because I think the relative sizes make the design stronger.

Line Weights

When I design icons, I will typically use 2–3 different line weights. The different line weights allow me to communicate depth, density, and value without using tonal values. For Iconified I used 2, 3, and 4 pixel line weights. The 2 and 3 pixel line weights appear most of the time, and the 4 pixel weight is used sparingly because it is a bit heavy-handed. I only used it when I needed to add weight/density to an element of a design.

I found 2 and 3 pixel weights to be the most aesthetically pleasing relative to one another, but I also liked the mathematical compatibility of the 2 and 4 pixel weights relative to my 32 pixel grid. As much as I tried, through a lot of experimentation, I couldn’t make the 2 and 4 pixel line weights work visually. The 4 pixel line just looked too heavy, especially relative to the 2 pixel line.

Rounded or Square corners

Initially I did not want to use rounded corners in the design of Iconified. At small sizes, rounded corners don’t read especially well and make the icon look a little blurred. I had started the initial designs with square corners, but found that when the icon size was increased to very large size, they looked rather plain. I opted for rounded corners to give the icons a little more personality, but to be honest, I’m still torn on the issue. I think on my next set I will deliberately forego round corners.

Color, Line, or Glyph Style?

My plan, from the beginning, has been to build the Iconified set out to 1,000 icons, then release a line and a flat color version of the set. I have worked in flat color, line, and glyph styles but am naturally drawn to the glyph style for its simplicity and the inherent challenges of limited line weights and the use of positive and negative space to communicate. One motivator behind this project was to replace my original Plastique set, which was originally designed for print about 15 years ago and which had some limitations with reproduction on-screen.

The Function of the Form

In a previous article about Open Source Icon Templates here on the Iconfinder.com blog, I discussed the underlying form (the blue guides in the templates). The purpose of the form is to give all of the icons a similar structure that, when used together with consistent line weights, builds visual unity.

The form should be thought of as a set of suggestions rather than a set of rules to which you must dogmatically adhere. Following the form too strictly can compromise the aesthetic quality of the icons, while not following it closely enough can result in visually un-related icons.

The main thing I follow on the form is the diagonals and the bounding square. As much as possible, I try to make all diagonal follow a 45-degree angle. Doing so will build unity and visual parallels between icons, but 45-degree angles also render more cleanly on-screen than do other angles because no matter the resolution, a screen is really just a grid of pixels on X/Y axes, and a 45-degree angle is rendered by aligning pixels corner-to-corner. Angles that are larger or smaller must rely on anti-aliasing and do not appear as clean.

I use the circle in the form to align elements between icons that might have similar boundaries. So if I’m working on an icon and a piece of an object comes within a few pixels of the circle, I will either try to lengthen or shorten the element to align to the circle. As I build my set and more icons have elements that align to the circle, visual unity is achieved.

Content

After I finalized the “How” or the technical considerations of new icon set, I turned my attention to the “What” or the content of the set. I approached this part of the project the same way I do a software project. I spent a lot of time thinking about who would likely be using the icons, and how they might be using them.

I knew from the start that the icons would be more oriented towards User Experience design and not editorial in nature. For this set, at least the first release, I wanted to focus on user interface elements for web sites and applications. As a result, the content of the set is more heavily focused on actions. An editorial use case would have lead me to create more concept or theme-oriented icons such as holidays, sports, occupations, and so forth. I do intend to add those kinds of icons in the future, but one must, at some point, stop building and designing in order to release a product.

Refinement

The final step in the design process is to eliminate as much unnecessary detail as I can from each icon.

My aim is to communicate the idea as simply as possible without being boring. As Antoine de Saint Exupéry, author of “Le Petit Prince” said,

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away”.