How building custom font icon saved my life.
It’s almost three years back when I joined purplle.com as a Lead UX/UI as per title I’m responsible for workflow, wireframes, mockups & assets etc. Everyone knows the work culture of the fast growing startups, in short, every task comes with the same title “ASAP”. Product manager & Tech Leads excepted from me to get all designs on their decided time, so they can meet their deadlines.
In this duration, I was the only person to work from concept to execution. Now, I have to boost my productivity to provide design and assets for multiple releases.
Every screens design I required to use the icon or multiple icons, after a period when icons number increased it becomes a nightmare to organizing all. That’s why building Icon assets are one of my tedious tasks, it’s completely time-consuming tasks to manage all those PNG files with multiple sizes, colors and of course file size.
Realization of a possible solution
Image sprite was the first solution I found where file numbers get reduced at least, and extra loads were only I have to provide x y pixel distance to the dev team to use in their CSS. After a period image sprite file size increased got the red alarm to do something it’s affecting page loads.
With the ending on image-sprite came up another solution with font icon by using FontAwesome.io now we were using over 200 icons with CDN. It was really Awesome. One day I used custom draw icon in my designs and awesomeness went because I can not add a custom icon in this. For a quick solution, I started using both font icon and PNG icons, Again I’m in big trouble to maintain the consistency & quality.
Then I decided to drop using FontAwesome and PNG icons started using SVG icons which are serving my purpose adequately, and perfectly frontend team was jubilant now they can use an icon in any sized without losing icon sharpness and now they can play with colors also.
End of honeymoon period
Time to scaling up we are entering our presence in Apps (Android & IOS). In Apps, SVG files not supported. Apps still need PNG icons with their guided size. And again I’m lost with managing sizes color and revisions. if you are same space you can better understand. I started looking out how to get rid this icon size management job. Found many tools which can export in those sizes but challenges are never ending, App file size gets increased like “hulk” by using these PNG icons.
How can I get off these PNGs
With the inspirations of FontAwesome.io, I started looking out how can I build my own custom font icon library. At this era couples of online tools available to create your custom font icon library (fontastic.me, icomoon.io, fontello.com). Tech Team was very familiar with using it, time to discuss it with App team can they make it be possible. After a trail, they said YES!
I have chosen icomoon.io, Converted all my custom designed PNG icon into SVG, Imported in this tool and generated font icon in no time. This tool also gives you icon library where you can choose and add to your library. in the same time with this tool can edit icon itself.
Honeymoon continues
By using it I’m able to deliver over 600 icon library with CSS for dev team same for App team, Most importantly file size of this icon surprised everyone its only 180kb.
We have created a web page where designer and developers can easily find what is the font and name and their values. It reduced the dependencies now every team member can use it without any fear of (icon assets) and we able to easily maintained the consistency & quality.
This decision really makes me and my team more productive. And it serves the better performance in Web and Apps.
What next?
I’m an UXER, It’s in my nature to look around how I make life easier, just like I do for our customers same as for my teams. Next, I’m focusing on DLS (Design language system) will share soon my DLS experience and benefits.