Logo of UI Challenges
Sign in

Gallery

See what others have created

Audio & Video Recorder
I

imperfecthag

@imperfecthag

HardSaaS

Audio & Video Recorder

Design the interface for an audio and video recorder that works on desktop and mobile. The product should cover the full loop: start a recording, monitor it live, stop it, review it, and file it away. This is not just a control bar; it needs a clear recording workspace, a review state, and a simple library for saved captures.

The main screen should make the current state unmistakable. Show idle, armed, recording, paused, and finished states. Use a timer, waveform or level meter, and playback scrubber to show what is happening right now. Keep the primary action dominant, and make secondary actions like camera/mic selection, device switching, and input settings available without crowding the recorder.

After a recording ends, users should be able to name the file, choose a folder, add notes, and decide whether to save, redo, or discard. The library should support browsing by date, type, and folder, with quick search and simple file actions. For video, include access to captions or transcript review so the recording can be checked without sound.

What to deliver

  • Design the main recorder screen with record, pause, stop, and playback controls.
  • Show live recording feedback with waveform, timer, and input level state.
  • Include a library view for saved audio and video files with search, rename, and folder actions.
  • Add naming, save, discard, and overwrite flows after a recording ends.
  • Design caption/transcript access for video playback and recording review.
  • Cover desktop and mobile layouts with the same control model.

Leverage soothing color palettes and minimalistic icons that enhance the focus on recording functions without distracting the user.