Additional Resource Links:
- Designing an iconic language
- 10 Mistakes in Icon Design
- Apple Human Interface guidelines on Icon Design
- Icon Design
- Icon Design
- AIGA Symbol Signs
- Apple’s Human Interface Guidelines
- Word as Image
- Visual Vernacular
Symbol Set Assignment
To design a set of a minimum of 8 symbols visually unified as a set.
Choose either a process or product that has multiple stages or settings.
The symbol set must visually relate to, or integrate with, a specific typeface in its form and overall look.
The symbol set must have a consistent “voice” or stylistic look across the entire group.
Pay close attention to discovering the essence of an object in creating a symbolic image.
Each symbol must be redrawn (not simply scaled) to work at 9pt. 18pt. and 36pt.
Define a target audience for your icon set defined by at least 4 specific characteristics. (For example, a user group or target audience might be defined as Hispanic, urban, males, ages 18–36).
The look of your final symbol set is primarily influenced by three main considerations;
- The typeface you are pairing the symbols with
- The characteristics of your target audience
- The process or product itself and its specific functions
Success on this project can be broken into the following four distinct areas:
- Essence—Reducing the graphic image so it contains only the necessary shapes (pos & neg) and line that are truly necessary to communicate the given idea/message. The graphic process of translation or systematically reducing or eliminating unnecessary details to create an objective result. It is a generalization representing a category or group rather than a subjective individual or specific. It is the opposite of illustration.
- Iconic Imagery—How is an icon different from any other type of image? How does an icon communicate?
- Letterform—What specific elements of shape, edge and line may be singled out as belonging to or identified as characteristics of a given typeface? How are those characteristics of form “mimicked” or applied to an image so the result is a visual consistency between them? Test the success of this by placing your icons next to the alphabet of your chosen typeface design.
- If you match the defined characteristics of the target audience to the visual characteristics of your typeface and then match the characteristics of the typeface to the style or look of the icons, then the look of the icons will also relate to and be understood by your target audience.
Your final presentation of the assignment must include the following:
- The matching typeface in upper and lower case letters.
- Description of the major characteristics of that typeface.
- Your target audience (as described above)
- At least 8 symbols in your set
- Label each symbol. (what is it for)
- Each symbol in 3 sizes (as described above)
- It is up to you to organize this information and design work in a clear manner for presentation. Examples of how you might do this would include a chart-like format—mounted, a booklet, or mounted separate sheets—one each for the symbols, the typeface and the description.
Approach Icon Design Holistically
Icons fit within graphic systems. Whether they are designed for desktop applications or Web sites, an icon is one of many graphic elements that need to work together harmoniously. Carry this logic across icon sets as well. Icons can be appreciated for their aesthetic solutions individually, but they don’t function alone. Evaluate your icon designs relative to the graphic system you’re using them in. Make sure that each icon differs from surrounding icons, while still working together as a whole.
Consider Your Audience
You will have different considerations if you’re designing an intranet for a small company, rather than for a product that may be sold internationally. When creating icons, cultural considerations are important. Symbols may differ for common elements you may use for your designs.
“It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country.” They go on to give an example of how mailboxes differ greatly between countries. Apple uses the same example in its Human Interface Guidelines.
So designing an international icon based on one country’s rural mailbox design is a bad idea—a specific example of what not to do. Apple’s Mail icon is more recognizable as stamps have more cultural universality.
THIS NOT THIS
Design for the Size the Icon will be Used
There is an inherent temptation to scale a vector design, and try to use it at any size. This doesn’t work with icons. What looks good at 512px looks like a blurry smear at 16px. Icons should have a base design that is used as a starting point, but each output size needs to have its own redrawn, optimized design. Icon design is not a one design equals scalable solution medium.
There are also vector tools in Photoshop and masks that you can take advantage of that equal the scalable playing field between the programs. If you’re equally versed with Illustrator and Photoshop, you may find a workflow that goes well between the two programs. Consider using Smart Objects.
The approach taken for small icons and large icon design is immensely different. Firewheel has a good article that covers the scaling subject called Icon Design: Bitmap vs Vector. Also, review this article on Icon Design Sizing over at Mezzoblue. It covers some inherent issues with designing icons for small sizes.
Keep Icons Simple
While a level of realism can add interest to an icon design, it should not supersede its ability to function simply and effectively. Know the limitations of realism in icon design and when symbolism should take precedence—realism vs. simplicity.
Try not to overcomplicate icon designs. Be wary of placing too many items into an icon design, or overly illustrating an icon. Overly illustrating and dressing up icons results in lower recognition though, especially at small sizes. So, be careful with putting to much illustrative detail into an icon design.
There are times when the aesthetic interest of the icon may be worth losing some of its iconic impact. it’s always a judgment call, and needs will vary with each design. There is a balancing act with bringing icons into the style of your overall system design. You want to add interest and compliment the design, but not loose the iconic impact of the icon. The loss of some of the quick recognition of the symbol for the sake of the added design around the symbol is always a question or fine line. At a large size it may work just fine, as they function similar to illustrations. At smaller sizes though, a less-dressed solution may be preferable.
Cast Consistent Lighting, Reflections, and Shadows
It’s important that the any realism effect that you might add to your designs all function coherently and consistently across the entire set. For example, if you use a light source coming from the upper left direction on one icon then stick with that direction of light source for all other icons as well or you risk losing the integrated design of your icons.
Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than awkwardly floating in space.
6. Utilize a Limited Perspective
The range of perspective within your icon design set should work together. If you have icons being looked at from straight ahead then stick with that. If you place one at a specific angle, then make sure all the icons function that way. Imagine a camera being placed from a specific vantage point and looking at all the objects from the same perspective. This helps to maintain consistency in your icon designs.
Create Consistent Icon Set Styles
Lighting and Perspective certainly contribute to the style of an icon, though there are many other factors that can contribute to the style as well. If you’re trying to fit your icon into a grunge-style Web site design, you’ll likely be adding texture to the style of the icon’s design.
Icon sets have unique features that make them stand out. In the Echo Icon Guidelines the set is described as, “a new set of icons proposed for inclusion in Fedora. Designed with a dynamic perspective, Echo icons aim to appear more realistic while still maintaining a clean and simple design by utilizing high contrast and spots of vibrant colors.” Another way that this set stands out is through the consistent use of outlines.
Get Started with Icon Design
Start the icon design process with research. Consider the common symbolic metaphor used to describe the icon you’re looking to make. Sketch as much as necessary to lock down the concept—get to the essence.
Inspirational Professional Icon Sets
Selling icons can be a profitable endeavor for a designer. If you create a unique and professional set, you can then sell it. Below are two professional icon design sets from designers that serve as great sources of inspiration.
The Classic Pack Icon Set From Icon Drawer
This icon set has a combination of professionalism, great choice of symbols, cartoony realism, and fun design. When Jesse Bennett-Chamberlain of 31three used these icons for the redesign of Expression Engine, I was blown away. It’s a great site design, and the icons fit really well with the style.
The Chalkwork Family from Mezzoblue
“Chalkwork is a visually unified set of carefully designed royalty-free icons. Built to cover some of the most common icon needs of Web and software designers, the entire Chalkwork family offers hundreds of computer and internet-related metaphors in a visually consistent style at 3 different sizes in up to 6 file formats.” This is a well-designed set of icons from Dave Shea.