OP/AL
Roles: Direction, Design & Animation
Hobbes created the animated icon set OP/AL to provide the design community with a resource that had the flexibility to fit thousands of different use cases. In order to accommodate this level of customization while still ensuring visual consistency, we created a tool that allows users to adjust the properties of the icon set within a defined a set of parameters before downloading it. Through the use of Lottie and .json files, we were able to create something powerful enough to accomplish all of this, but light enough to make an entire animated set around the size of a megabyte.
Design Parameters
In order to provide as much creative autonomy as we could to the user, while still ensuring the generated icons wouldn’t break, we established a strict set of parameters that the icons were created within. Such as a standard canvas size all measures would be compared against, a maximum stroke width, and a minimum counter stroke width.
24px Canvas
All icons were designed within a 24x24 pixel grid, as to keep them pixel perfect at a smaller scale, when necessary.
2px Max Stroke
Relative to a 24 pixel canvas, the stroke would never become thicker than two pixels. Working in tandem with the “2px Min Counter Stroke”, this was to ensure the lines never became thicker than the spacing between them.
2px Min Counter Stroke
Relative to a 24 pixel canvas, the spacing between strokes was kept to a minimum of 2 pixels. Working in tandem with the “2px Max Stroke”, this was to ensure the lines never became thicker than the spacing between them.
Animation Parameters
While the design parameters helped in creating the initial set internally, we also implemented parameters for how the animations could be adjusted on the website itself. This allowed us to set limits and relationships for certain variables, providing a level of quality control to the animations the tool creates.
Color
We made it possible for the user to determine color through sliders for hue, saturation, and lightness, or through typing in exact hex values.
Scale & Stroke
In order to guarantee the max and min stroke width parameters, a relationship was established between the scale and stroke values. This was done by never allowing the stroke to be greater than 1/12th of the canvas width, or ever smaller than a pixel.
Duration
We also allowed the user to choose the animation length for the icons, anywhere between half a second to two seconds.
2020 Motion Award
Interactive / Experiential
UI / UX
Credits
Creative Direction: Dan Stack, Eddy Nieto & Ian Sigmon
Production: Nevin McRay
Design: Dan Stack
Animation: Dan Stack, Eddy Nieto
Development: Lucas Vocos