Typographic Symbol Set

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

File:Icon design process сс.png

Symbol Set Assignment

Assignment: To design a set of a minimum of 8 symbols.

The 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.

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).

Each individual symbol must interpret one of the 12 words/concepts listed below.  You may choose to represent all 12 in your set, but at least 8 of the 12 are required for the assignment—4 from each group

• Honesty                                                     • Fire-Resistant

• Durability                                                    •  Waterproof

• Economic                                                   • Lightweight

• Valuable                                                     • Well-made

• Fast                                                            • People Oriented

• Strength                                                     • Hand-crafted

Pay close attention to discovering the essence of an object in creating a symbolic image.

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.

Final Presentation

Your final presentation of the assignment must include the following:

  • The 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, (Four from each column as listed above)
  • Label each symbol.
  • Each symbol in 3 sizes (as described above)
  • It is up to you to organize this information and design work in a clear manner. 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.

1. 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.

2. 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.

3. Design for the Size the Icon will be Used At

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.

4. Keep Icons Simple and Iconic

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.

5. 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.

7. 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.

Get Started with Icon Design

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.

.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s