Hi there! I’m Casey, and I’m a Motion Designer on the brand team here at Lattice. I work primarily within the marketing organization, but occasionally work on projects that see their way into the Lattice product as well. I’d like to share the process I took for one of those projects!
Something that I really knew I wanted to work on when I started at Lattice was animated icons for the sidebar. Motion has this special, almost cheat-code ability to instantly add delight, and animated icons are one of the quickest ways there. They add an unexpected touch of fun and polish when clicking links you already click on every day. When a project kicked off to redesign Lattice’s sidebar last year, it felt like the perfect time to get started on this.
Because implementation can affect how I approach the animation process, we began by determining how we would actually incorporate these animations into the product. There are several methods available, each with its own set of advantages and disadvantages. I began discussions and collaborated with developers, designers, and product managers through a Slack channel to find a solution that satisfied everyone. Initially, I considered Lottie, which is straightforward, but requires an additional JavaScript library that developers were hesitant to add for a single use case. Animated gifs are simple to export, but encounter transparency issues. Animated SVGs require a tool I’m not super familiar with. Ultimately, Cap Watkins (Design Director who had jumped in to help out) proposed a solution similar to Twitter's approach for their "Like" button—animated spritesheets. This method does not require any additional libraries and is relatively easy to export. The best of both worlds!
While the implementation conversation was happening, I also dedicated some time to researching how other products approached animated icons. My goal was to gain some insight into considerations such as duration, easing, and how others handled animations that extended beyond the icon's grid. It seemed like a duration of 0.5 to 1 second was suitable, and I liked an approach where the majority of the animation occurred immediately upon clicking, creating the impression that the click was initiating and propelling the animation, gradually losing momentum and slowing down towards the end.
One final step in the process was converting all of the existing sidebar icons from fills to strokes. While the icons appeared to be strokes, unfortunately they had all been expanded at some point, and were made up of only fills. Animating icons is much easier when everything is a single stroke weight, so together with Becca Ramos, who was already working on revising some of the icons, the icons were converted back to strokes, and some various aspects were aligned along the way, such as the end caps of various parts of the glyphs, as well as the overall stroke weight and corner radii.
After gathering all this information and making these decisions, the project progressed similarly to any other project with the brand team at Lattice. We held a kickoff meeting with stakeholders to gather additional insights. I then began working on the animations and made revisions based on feedback. For a few of the icons, I created 2 or 3 different versions, considering feedback that some animations were too complex given the small size of the icons in the sidebar.
Finally, we launched the newly redesigned sidebar, accompanied by a delightful animation that showcased the changes. This animation appeared in an in-product modal and was also utilized on social media to announce the update.
Thanks for reading!