Logo of UI Challenges
Sign in
Wireframe example for Recording Audio & Video
An example interpretation of the prompt
Icon of target

Recording Audio & Video

Icon of book open

Design the full recording flow for audio and video inside the product, from setup to final save. Treat this as a stateful experience, not a single screen: the user needs to choose inputs, start recording, monitor status, and finish with a review step.

Start with the setup state. Show which camera, microphone, and audio source are active, and make it clear whether the user is recording audio only, video only, or both. If permissions are required, request them before the user commits to recording, and explain what access is needed in plain language.

During recording, the interface should make time, live input, and recording status impossible to miss. Keep pause, resume, and stop controls visible and easy to hit. If the app supports switching devices, show what happens to the current recording session before the user changes anything.

After recording, move into a review state where the user can play back the clip, trim the start or end, retake, or save. Include failure states for blocked permissions, missing devices, and interrupted recording, with a clear recovery action for each case.

Icon of book open

For an engaging design, use animations to indicate the recording process — like a pulsating dot or waveform for audio, and a blinking red light for video. It provides a real-time feel and helps users understand they're recording.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get a design challenge in your inbox

Daily UI prompts and challenge updates. It’s free.