IXD DESN 22848 | Winter 2026
Interactive Portfolio 2026

Designing Calm, Expressive Audio Interactions

Carla Farag explores how playful sound and motion can guide attention in educational interfaces without overwhelming the user.

Try Live Header View Final Project

Project 2

Activity 1

Hover an image to reveal its description. Images desaturate on hover to keep the caption readable.

Birds sitting together show connection between points. Aluminum foil makes a crinkled metallic texture. AirPods case opening and closing shows snap interaction. A city street shows structured pathways and direction. Typing shows input through touch. The mouse shows controlled interaction. Water from the tap shows steady flow. Coffee pouring shows pressure pushing liquid through. A mug shows contained liquid and solid form. A nail file has rough repeated friction texture. Writing shows input through hand movement. A zipper shows connection and disconnection of two sides. Sticky notes show peel and stick interaction. Scissors show open and close cutting motion. Metal wire shows flexible but resistant material. A glue stick shows twist and apply interaction. Pressing a switch shows a clear on and off interaction. A Mac charger shows plug and connect interaction. An empty perfume bottle gives a light spray sound. A full perfume bottle creates a stronger spray sound. A water bottle shows squeeze and release interaction. Shells rubbing together make a dry textured sound. A chair on wheels shows movement and contact with the ground. A toy car shows rolling movement and direction. A toy phone button shows playful click interaction. A squishy object shows soft pressure and rebound.

Activity 2

Audio-reaction studies from early visual explorations.

A basic sound bar appears when audio starts playing. The bars grow and change height based on sound frequency. A rotating door visual responds to interaction and sound state. A circle appears and reacts when sound is triggered. Multiple circles animate across the screen based on sound energy. A waveform line shows the shape of the audio signal. The waveform becomes more detailed as sound changes. The waveform stabilizes when the sound is softer. The waveform becomes dense and sharp with louder sound. Layered waves move up and down based on microphone input. Layered waves move smoothly based on continuous sound input. Particles rotate around a center reacting to microphone sound. Planets and stars move based on audio levels. Shooting stars appear when sound is triggered. A large circle shows strong bass while smaller ones show other frequencies. The mid frequency circle grows as voice input increases. All frequency circles respond together to different sound ranges. Bass, mid, and treble are separated into clear visual outputs. A pitch tracker shows how close the input sound is to a target note.

Final Project 2 Design

P5 Interactive Audio Web Header Portfolio.

Click here to see it working on my server.

Final image 20 shows the first polished screen from my Project 2 output. Final image 21 presents a second polished variation with updated visual flow. Final image 22 highlights another final state of the interactive header design. Final image 23 captures the concluding version of my final project composition.

Embedded Interactive Header Test

This live embed runs the Carla p5 header directly from the test file below.