( 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 learned in the process is that there is no perfect way to design an iconography language.


( 1 )

Research Process:
Problems & Needs


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




Design Needs:


  • Illustrations: The brand has large-scale icons, which can serve as illustrations. This use works in an aesthetic way and its function is to complement texts.

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

  • Both: Some icons served for both illustration and function, the main difference is the scale. In this case the stroke of the icon needs to adapt the scale usage.




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 to not affect the product's loading speed.

  • Quality: Optimal rendering quality for large and small sizes.

  • Simple and easily programmable 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, so the guidelines and alignment are programmed inside the typeface.







( 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 illustrations. Icon without the circle.

  • Semibold: Icons for small sizes. The it's a filled style, which means the stroke is bigger and small details are taken away, to be easily 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 that can be constantly evolving.