Creative Components — Animated Icons
THE CHALLENGE
The challenge was not to design an icon set from scratch, but to animate the platform's already existing static icons. This was crucial to preserve component recognition and familiarity for existing users, while making complex ad formats immediately understandable through motion. Each icon needed to visually communicate what happens when a user interacts with its corresponding component, serving both as a UX guide and a visual identity element across the platform.
About Somplo
Somplo is a creative management platform (CMP) that enables brands and agencies to build, launch, and measure high-impact interactive display advertising — from rich media and HTML5 banners to advanced formats like parallax, video, and gamified units. The platform hosts a library of reusable creative components, each representing a unique interactive ad mechanic. To help users quickly identify and select the right component, each one needed a clear, expressive animated icon — a miniature visual demo that tells you exactly what the component does at a glance. As part of my broader creative role at Somplo, I also developed promo videos, marketing materials, and contributed to the platform's visual identity, supporting the company's overall growth and Google Partner status.
ANIMATED COMPONENT ICONS
While the full library contains many more assets, below is a curated selection of 20 animated icons that demonstrate key interactive components on the Somplo platform. Each icon is a looping micro-animation that explains the component's behavior — hover over any card to see it in action.
Hover over any icon card to see the component animation
PLATFORM INTEGRATION
Each animated icon visually demonstrates how its corresponding interactive component works on the platform:
DESIGN APPROACH
The icons were crafted as a unified system — consistent line weight, grid proportions, and animation timing across all components. Delivered in multiple formats for maximum platform compatibility.
Design Principles
- The first static frame remains strictly identical to the original static icon, with all animations built entirely off of this starting point
- Each animation loop tells a complete micro-story: action → feedback → reset
- Grayscale default state, signature Somplo blue (#00AEEF) on hover / active
- Animations timed at 60fps with ease-in-out easing for natural feel
- Delivered in Lottie JSON, dotLottie, SVG, and GIF for maximum compatibility
Deliverable Formats
0%
By clearly and intuitively representing the functionality of each interactive component, the animated icons enhanced the overall UX and helped reduce ad creation time on the CMP platform by 40%.
Conclusion
Beyond individual components, this cohesive animation system established a new standard for visual communication across the platform. It replaced lengthy tooltips with immediate visual feedback, significantly lowering the learning curve for new users and reinforcing Somplo's position as a premium, user-centric ad-tech solution.
Client
Services
Design Categories