Logo of UI Challenges
Sign in

Gallery

See what others have created

Recording Audio & Video
S

s1emens

@s1emens

HardCamera & Media

Recording Audio & Video

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.

What to deliver

  • Design the recording entry screen with camera/mic permissions and a clear start action.
  • Show the live recording state with elapsed time, level feedback, and pause/stop controls.
  • Include a pre-recording setup state for input source, camera, and microphone selection.
  • Design the review state with trim, retake, and save/share actions.
  • Show permission-denied and device-unavailable states with a clear recovery path.

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.