Vendetu
Icon System
Digital Font

Info

Client: Vendetu

Year: 2016

Location: Santiago, Chile

-

Skills & Tools

Visual Design

Icon Design

Digital Font Design

-

Team

Rodrigo Cuevas, José Miguel Barros, Erick Dos Ramos, Leswil Ochoa, Camila Espinoza, Begoña Taladriz

About

While working with the Vendetu team, we had some problems with the standardization of the brand and design systems. At some point, the team has grown so much that, as design team, we decided to create a tool that facilitates the access of the multiple teams to the icon system used for the web UIs, visuals, presentations, documents and others.

 

Process

  1. Recognize the team's needs and define architecture of the icon system.

  2. Sketch and build icons (vectors).

  3. Build and configure the digital font in Glyphs app.

  4. Launch and test within the Vendetu team.

  5. Improve the design by receiving feedback from the other teams.

Needfinding

While working with the Vendetu team, we had some problems with the standardization of the brand and design systems. At some point, the team has grown so much that, as design team, we decided to create a tool that facilitates the access of the multiple teams to the icon system used for the web UIs, visuals, presentations, documents and others.

 

Architecture

To define the list of icons that we were going to include in the package, we traced all the platforms, formats, products and other elements that could include any type of iconographic representation or indicator. After that, we established different categories of icons to design.

Drawing the system

During the drawing phase, some relevant design decisions were taken. For instance, the style of the icons was defined as linear, because it facilitates digital use and matches better with texts. Also, multiple actions/indicators were defined to give each category icon a particular meaning, so it could be used more accurately in each context. Finally, to optimize the graphic performance of the font and make an optical correction of it, each icon was created in 3 different sizes: large, medium and reduction.

Digital font set up and Testing

Once the package was drawn, each glyph was checked and corrected in the Glyphs app. To optimize the use of the system, a standard space was defined for each icon, and they were optically located just above the baseline.

After compiling the font, it was launched and tested by Vendetu teams. It significantly improved the time and complexity that the process of transferring icons used to have.