WHAT IS RIVE?
Rive is a tool for creating real-time, interactive animations. It doesn’t just sit there, it moves, reacts, and invites you to engage.
Designed for You to Play With.
01.Research
The first step in this project was researching successful interactive websites. I noticed that simple logo designs keep the focus on the portfolio, but adding a fun little surprise, like a logo that moves when you click it, makes people go, ‘Whoa, cool!’
02.Approach
The next step is analyzing my portfolio to create a logo that represents my brand. My work features vibrant colors and simple, fun characters. To guide the design, I focused on three emotional words: imaginative, bold, and playful. I came up with two concepts.
CORNER CREATURES
This concept transforms the site into a vibrant, whimsical playground inhabited by a small cast of shape-based characters. These characters spark joy, add motion, and bring personality to every corner of the screen.
Finalized Design
Still
hover
click
03.Design
I chose to further develop Concept one by exploring several variations of the logo design. My main goal was to integrate the wordmark and logomark into a unified visual identity. Throughout the process, I focused on capturing a sense of playfulness while maintaining a clean and simple aesthetic.
04.Animation
For the animation, I split it into three timelines, Still, Color, and Explosion states, so I can easily add interactivity later using Rive’s state machine. The animation is snappy and playful, designed to be engaging enough that people will want to click it again.
Tap, Click, Play ... It’s All Alive!
05.Interactivity
Once the animation was done, I switched to using the logic side of my brain, wiring up the state machine in Rive with number inputs for smooth transitions. Then I set up a hitbox to define the interactive area and added mouse listeners to trigger the animation.
06.Building Assets
After creating the initial logo, I thought it would be fun to design a few additional interactive assets for the website that share a similar visual style. These elements help tie everything together. Here they are!
Thanks for stopping by!
Rive is a tool with huge potential, it transforms motion design into such an engaging and fun user experience. I’m excited to keep exploring what it can do and bring more of it into my future work.
