BAYCC UI Animations

BAYCC.org sought to enhance user engagement on their website by integrating interactive icons that reflect their cultural initiatives and community-focused mission. The goal was to create a set of animated icons that are both visually appealing and seamlessly integrated into the site's user experience.

Phase 1: Visual Research & Reference Gathering

I began by collecting reference imagery and exploring icon styles that reflected BAYCC’s welcoming, multicultural spirit. I looked for inspiration that balanced clarity, friendliness, and movement.

Phase 2: Vector Design in Adobe Illustrator

Translated sketches into clean, scalable vector icons using Adobe Illustrator. Ensured consistency in line weight, style, and visual language across all icons to maintain brand coherence.

Phase 3: Animation in Adobe After Effects

I animated the icons in After Effects with web interactivity in mind. Transitions and movements were kept smooth and subtle, enhancing rather than distracting from the site’s content.

Below are how some of the animated icons look on the actual website

↑Back to Top