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. First, it is important to follow a research and conceptual procedure about the icon that is going to be designed, trying to make sure it complies with a universal basis of comprehension and simplified concepts.
GOALS
The purpose of this guide is to ease the process of iconographic design and to contribute to 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 two shapes 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 to the rest of the elements. Please remember to use full-shape objects 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.
