INDUSTRY
Healthcare, Web Design
SCOPE
Concept to final upload
DELIVERABLES
Single Rive file,
HTML wrapper
Tools
Pencil, Paper,
Adobe Illustrator
Rive
BEHIND THE SCENES
Idea
Every project starts with pencil and paper before I touch a computer. For these healthcare website buttons, I sketched several ideas for each one and picked the one that communicated most clearly. Then I worked out how each button would move. And sometimes, hard work gets rewarded.
DESIGN AND ILLUSTRATION
I bring the chosen sketches into Adobe Illustrator and turn them into clean vector artwork. Each button needs three versions: the idle state (at rest), the hover state (when the cursor moves over it), and the click state (when it’s pressed). Designing all three together keeps the set consistent and gives me the key poses for the animation.
ANIMATION AND INTERACTION
The artwork then goes into Rive, a design tool for building real-time interactive animation that runs directly in apps and on websites. Instead of snapping from one state to the next, every change is fully animated. I keyframed custom transitions from idle to hover and back, hover to click and back, click to idle, and click to hover. Rive’s State Machine, a visual way to program without writing code, decides which of those animations plays in response to the user, so each button responds smoothly to whatever the user does.