Introduction
Makam Keyboard is an interactive web synthesizer I designed and developed to explore Turkish modal music through 53-tone equal temperament. Built in React with the Web Audio API, it visualizes microtonal pitch relationships as dynamic, touch-responsive keyboards that adapt to each çeşni (modal fragment). The interface highlights both just intonation and 12-TET reference points, helping users hear and see the subtle intonation shifts that define the makam system.
From a design standpoint, this project deepened my ability to translate complex musical theory into intuitive interaction patterns — balancing precision with playfulness. I designed for immediacy and feedback, prototyped custom visualizations of pitch space, and iterated on usability for both touch and keyboard input. The work combined interaction design, audio UX, and data visualization, strengthening the same systems-thinking, rapid prototyping, and human-centered problem-solving skills I bring to product design projects more broadly.
From a design standpoint, this project deepened my ability to translate complex musical theory into intuitive interaction patterns — balancing precision with playfulness. I designed for immediacy and feedback, prototyped custom visualizations of pitch space, and iterated on usability for both touch and keyboard input. The work combined interaction design, audio UX, and data visualization, strengthening the same systems-thinking, rapid prototyping, and human-centered problem-solving skills I bring to product design projects more broadly.
Overview
The Makam Keyboard is an interactive web synthesizer that visualizes and plays Turkish modal music through the 53-tone equal temperament system. Built in React with the Web Audio API, it transforms microtonal intervals into a tactile, two-keyboard interface where users can explore and compare çeşni (modal fragments) in real time. The design emphasizes clarity and musical curiosity—combining theory, sound, and interaction into a single exploratory tool.
My Role
I led the interaction design, visual design, and front-end development for this project. I designed the interface to communicate subtle tonal relationships without relying on Western notation, using responsive color cues and adaptive layouts that support both touch and keyboard input.
Tools and skills
React • TypeScript • Web Audio API • Figma • Audio UX • Data Visualization • Systems Thinking • Rapid interaction prototyping
Outcome
Through building Makam Keyboard, I honed my ability to translate complex theoretical systems into approachable, sensory experiences. The project strengthened my skill set in interactive systems design, real-time feedback loops, and communicating complexity through simplicity—capabilities that directly inform my approach to product design for technical tools and creative interfaces.