Icon Design in 4 Steps      Scott Lewis

The difference between “not quite good enough” and “premium quality” is often small and usually involves minimal changes. The following steps follow the basics of sound icon design and should be seen as a guide.

The three attributes of an icon design

Icons that are well-designed follow a methodical and deliberate approach to the three major attributes that make up any design.

Structure
Structure is the underlying form of an icon. If you ignore the details of an icon and draw a line around the major shapes, do they form a square, circle, horizontal or vertical rectangle, triangle, or a more organic shape? The most successful icon designs follow simple, recognizable patterns or forms. The primary geometric shapes – circle, square, and triangle – create a visually stable foundation for icon designs.

Character
The character of an icon is made up of the elements that are shared within a single icon and across an icon set. These elements are things like rounded or square corners, line weights, style (flat, line, filled-line, or glyph), color palette, and more.

Identity
The “identity” of an icon is its essence or what makes an icon unique. Identity determines whether or not it “works”. The cornerstone of how well an icon works is recognition or clarity: how easily a viewer recognizes the object, idea, or action it depicts. Character and Identity often overlap. Identity elements shared by several icons become part of the Character of a set.

The four steps:

Start with simple, geometric shapes
Design icons the same way you draw sketches: by creating the rough shape of the major shapes with simple circles, rectangles, and triangles first. Even if my icon is going to end up being mostly organic in nature, I start with the shape tools in Adobe Illustrator. When it comes to making icons, especially for smaller sizes on-screen, the slight variations in the edges that result from being hand-drawn make an icon look less refined. Starting with basic geometric shapes helps make the edges more precise (especially along curves), helps me adjust the relative scale of elements within a design quickly, and insures that I am following my grid and form.

By The Numbers: Edges, Lines, Corners, Curves, and Angles
As much as possible without making your designs look overly mechanical and boring, corners, curves, and angles should be mathematically precise. In other words, follow the numbers and don’t try to eyeball or freehand it when it comes to these details. Inconsistency in these elements can diminish the quality of an icon.

Angles
In most cases, I stick to 45-degree angles, or multiples thereof. Anti-aliasing on a 45-degree angle is evenly stepped (the active pixels are aligned end-to-end) so the results are crisp and the perfectly diagonal nature of this angle is an easily-recognized pattern, which the human eye likes very much. This recognizable pattern builds consistency across an icon set and unity within a single icon. If I must break this rule, I try to do so in halves (22.5, 11.25, etc) or in multiples of 15 degrees. Each case is different so I make the decision which to use on a case-by-case basis. The benefit of using halves of 45-degrees is that the stepping in the anti-aliasing is still fairly even.

Curves
One of the most noticeable areas that I find can degrade the quality of an icon and make the difference between Premium/professional and amateur-looking are the curves. While the human eye can detect very slight variations in precision, human hand-eye coordination cannot always achieve a high level of precision. I rely on shape tools and the numbers to create curves as much as possible rather than try to draw them by hand. When I do need to create curves manually, I use Adobe Illustrator’s constraint modifier key (Shift) or, even better, VectorScribe and InkScribe by Astute Graphics for even more refined control over my bezier curves.

0

0