OP-1 — Interactive Keyboard Experience

OP-1 is an interactive keyboard interface inspired by Teenage Engineering's distinctive hardware design. The project explores the combination of minimalist aesthetics, custom controls, and digital interaction.

I handled the entire experience, from visual design to interactive animations, using Figma and Rive.

The interface features a neutral grey and off-white palette, rounded keys, subtle shadows, and contrasting black details. Orange accents highlight selected controls, while the central audio display adds a distinctive visual focal point.

The layout combines custom function keys, circular control knobs, media controls, navigation buttons, and a central waveform display. Each element follows a consistent visual language to create a balanced and recognizable interface.

Custom Keyboard Layout: Carefully arranged keys and functional controls.

Audio Visualization: Central display featuring waveform-inspired graphics.

Rotary Controls: Distinctive circular control elements with color accents.

Media Controls: Dedicated record, play, and stop buttons.

Navigation Controls: Integrated directional and function keys.

Interactive Experience: Rive-based interface development with motion and visual feedback.

OP-1 brings hardware-inspired product design into an interactive digital experience, combining visual precision, thoughtful interface composition, and motion possibilities.