Typographic Symbol Set

Additional Resource Links:

This Final Assignment is Due by 5:00 on Wednesday May 5 of Finals Week

As a final assignment, it asks you to bring together all of the knowledge and sills you have learned about design and typography over this past semester. That knowledge can be generally categorized in the following groups of importance. You should concentrate on how you apply your design by paying specific attention to these design/typographic areas. They are:

  • Letterform
  • Hierarchy and Grouping
  • Simplification of form
  • Consistent visual “voice”
  • Symbolism, meaning
  • Context
  • Target or intended audience (demographic)

File:Icon design process сс.png

Requirements:

  • A set of 8 symbols based on the letterforms of a specific typeface of your choosing. The set must visually relate to, or integrate with, that specific typeface in its form and overall look so that it can be “paired” with it.
  • The symbol set must have a consistent “visual voice” or stylistic look across the entire group. This creates visual unity. In other words, nosing symbol “stands out” from the others.
  • Close attention should first be paid to discovering the essence of the typeface in creating a symbolic image that “goes with it”. This is your first step.

Considerations:

The look of your final symbol set is primarily influenced by three main considerations;

  1. The Typeface you are pairing the symbols with
  2. The Characteristics of your target audience—the demographic
  3. Context—The company, process or product and its specific functions where the symbols set will be used.

Success on this project can be broken into the following four distinct areas:

  • Essence—Understanding/Reducing the basics of the chosen or “parent” typeface, so it contains only the necessary shapes (pos & neg) and line that are the structural DNA. This concept is a basis of most of the graphic processes. It may be one 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. It is the OPPOSITE of simplistic. It is SIMPLIFIED. In other words, the forms are reduced to their essential characteristics only. This process must be done with careful thought and attention. A Simplistic approach would result in something with fewer details or elaboration perhaps, but getting there would be arbitrary and without careful thought or consideration.
  • 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 (it’s DNA)? How are those characteristics of form “mimicked” or applied to a symbol/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:

A typical final presentation of this normally includes the following:

  • The Typeface you chose presented in an alphabet of 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)
  • 3 sizes of each symbol (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.
    Some existing symbol sets. Think about the context and main or target audience they were created for.
Auto mechanic

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.

THISMetroUI-Other-Mail-icon NOT THISth

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.

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.

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