Hobbes created our animated icon set, OP/AL, because we wanted to build a tool for the design community that had the flexibility to fit thousands of different use cases. In order to provide this adaptability while also building in guidelines designed to preserve visual consistency, our team created a system that allows users to adjust the properties of the entire icon set and to download the collection once it has been suited to their needs. Rather than animating each individual icon, this system of templatization reframes the processes through which we deliver animation.
A functional animated icon set demanded a filetype that was extremely lightweight. Customization also required a filetype which could be adjusted live on the site, avoiding the need to animate every possible permutation of each icon. Our team’s solution was a system built around JSON files, which are remarkably small and allow for live variation of duration, color, scale, and stroke weight.
What began with a search for the best tool became our team’s creation of OP/AL, a system for animating icons that leverages Hobbes’ knowledge of applied motion and design in a practical yet ambitious resource for designers and developers.
TEAM: Dan Stack, Nevin McRay, Lucas Vocos