( Case Study )
( About )



Case Study


Iconography in Design Systems

RESEARCH / UI DESIGN / ICONOGRAPHY / PROGRAMMING



This project began when my team started to build a design system for internal products. Something I noticed in the process, is that there is no perfect way to handle and design an iconographic language.


( 1 )

Research Process:
Problems & Needs


To start, I reviewed all the subproducts and pages that the brand had to identify its needs. After this, I found two types of needs: design and functional




Design Needs:


  • Illustrations: The brand needs large-scale icons, which can serve as illustrations. This use works in an aesthetic way and its function is to complement texts.but it’s not entirely necessary in terms of the site’s functionality.

  • Funcional: Icons like arrows, marks and elements that serve a specific function. Without them, the site woudn't work properly.

  • Both: Some icons served for both Ilustration and function, the main difference is the scale. Strokes need to adapt the scale.




A graphic design language has functional and aesthetic needs.

Functional Needs:


  • Scalability: The Icon library should be able to grow with the product.

  • Management and Accesibility: Designs should be able to share, access and update via Github.

  • File Optimization: Files must be optimized so as not to affect the product's loading speed.

  • Quality: Optimal rendering quality for large and small sizes

  • Simple and easily programable guidelines: I wanted to take away the design process from programmers. I didn’t want them to align icons, or give them too many guidelines.







( 2 )

Design Solution


To cover all the brand's needs, I design and program a custom Icon Font Family Library that fits the design system.

For optimization, all icons are inside the brand's official typeface ‘Graphik’. For the design system, we decided to use 4 weights: Light, Regular, Semibold and Bold.




One Source for everything: Having a font gives you control over the icons, since all of them are storage in one single file.

The typeface is planned to have the data of letters + icons inside one weight. At the end, the icons will be in the following styles:


  • Light: Display Weight for large scale illustrations. They are optically aligned to the circle and the stroke is the same as the icon.

  • Regular: Display Weight for regular sized ilustrations. Icon without the circle.

  • Semibold: Icons for small sizes. The style ts is filled to be easy recognizable in small scale and to compensate the weight.

  • Bold: Display Weight for large scale illustrations.




To cover the functional and design needs, icons are arranged according to the size of use. The icons for large scale are in the least used weights: black and light. The more frequently used icons are in the weights: regular (for normal scale illustrations) and semibold (for text/small sizes).



Icons are aligned to the typeface's metrics. By doing this, programmers don't have to align the icons with code; this step is part of the design stage.





( 3 )

Implementation


Each icon has a specific unicode, with this we can control the icons; if a design change, the code will stay the same, just the typography will need to be upgraded.

To better control, a CSS file will have all the icon's information. The images can be called using a CSS class, and the icon will appear in the HTML file.



This option helps us have a system system that can be constantly evolving.