( 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 )

Reserach:
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 )

Final 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’, they use special unicodes that help programmers to have easy access. Icons are aligned to the typeface's metrics and the style match the font weight.





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

The font has 4 weights, that consist in:

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

  • Regular Weight: Display Weight for big ilustrations without the circle.

  • Semibold Weight: Icons for small sizes. It’s filled to be easy recognizable and to compensate the weight.

  • Bold Weight: Display Weight for large scale illustrations.