INTRODUCTION: ICONS AND PICTOGRAMS

INTRODUCTION

Icons, symbols and pictograms are used to communicate information without the use of words. Signs hold meanings that we can recognize and decode in a glimpse. They communicate concepts, contents, actions or interesting services for users of all cultures and languages.

 

WORK PROCESS

When designing icons, a grid must be provided as a base for the icons. It is important to first follow a research and conceptual procedure about the icon that is going to be designed, trying to make sure it complies with an universal basis of comprehension and simplified concepts.

 

GOALS

The purpose of this guide is to ease the process of iconographic design and to contribute in creating uniform and consistent icons that work well together. It is of utmost importance to always resort to this guide when designing icons for consultation and subsequent correct usage verification.

 

CONCEPT CHOICE

The chosen reference or concept has to be adequate to transmit the right message and to have a precise meaning. You must not design an icon without a meaning, or mix icons that have relevant messages with icons that convey unimportant messages.

 

ICON VIEWS

With exceptions where the concept is not understandable in any other way, icons must have a frontal or side representation to provide a flat view. Just in certain cases, it will be allowed to show an isometric view, but never any other unnecessary perspective.

 

 

ROTATIONS

Icons that need to be shown rotated will always be rotated at a 45° inclination to the right side in order to keep consistency between all icons.

 

 

STRAIGHT VS. ROUND TERMINATION

The terminations of the strokes can be classified into three types: STRAIGHT, ROUNDED AND MIXED. You can use any of the three as long as all of the icons in a pack have the same type.

 

 

 

ISSUES TO CONSIDER

 

EXPANDED ELEMENTS

Strokes and texts in the icon must appear expanded:

 

 

SHAPES WITH DIFFERENT COLORS. METHOD 1

When two consecutive different colored shapes appear, Pathfinder should not be applied to cut them. One shape must appear above the other one that occupies the full form, as shown below.

 

 

SHAPES WITH DIFFERENT COLORS. METHOD 2

If there are two shapes that end in the same point of the icon, you need to adjust the nodes so that one shape continues under the other.

 

 

ARRANGED ELEMENTS

All the elements must appear properly arranged, occupying their logic position in relation with the rest of the elements and keeping the objects that occupy the full shape as a base:

 

 

SHAPES WITH NO BLENDING MODES

If the icon needs to have a shadow effect, it must be done directly with a different color or changing the opacity levels, but BLENDING MODES MUST NOT BE USED.