Audiogram design: turn audio into a clip people watch

An audiogram is a short video of a podcast or voice clip: the voice, a waveform, the words on screen, and a ground that looks like the show. People can follow it with the sound off and recognise the show before reading the title. Cut one moment, frame it at 1080×1920, and export.

The parts of an audiogram

Four things sit on the frame, in this order. Weak clips reverse it and lead with a giant waveform that says nothing.

• The line. One idea, the largest type on the frame.
• The names. Show and guest, small, always in the same place.
• The waveform. A short bar row in the show's colours, not the headline.
• The ground. One moving background for the whole series.

Episode 12 of The Night Desk is the example. Amira Cole's line is "Quiet episodes travel further." Names sit high, the line in the upper middle, bars on the centre, captions below. The square keeps the line and the bars. The rest of that episode kit is in podcast social media.

Audiogram sizes that survive the apps

Three frames cover almost every place a podcast clip is posted. Build the vertical one first. The others are rearrangements of it, not a stretched copy.

1080×1920 fits Reels, Stories, TikTok, YouTube Shorts, Snapchat and WhatsApp Status. Keep the line, the bars and the captions in the centre, away from the top, the bottom and the right edge. Social media safe zones maps those edges, and social video sizes lists every frame.

1080×1080 fits a square feed. For more height on Instagram, Facebook, Threads, X or LinkedIn, use 1080×1350. Use 1920×1080 for YouTube and your episode page, with the names and the line side by side. Do not crop the vertical file to make the wide one.

The landscape file on your episode page

On your own site, offer both files. Put WebM first when it is smaller, and MP4 as the fallback. The poster is a still of the same frame. Send MP4 to the social apps. MP4 vs WebM explains the choice.

<video controls width="1920" height="1080" poster="night-desk-12.jpg">
  <source src="night-desk-12.webm" type="video/webm">
  <source src="night-desk-12.mp4" type="video/mp4">
</video>

A waveform that reads as the show

The waveform means press play. It is not a trace of the audio file. A hairline oscilloscope turns to mud on a phone, so use a short row of thick bars in two cover colours, one quiet and one for the peaks. Podcast cover art is where those colours are set.

Draw about twelve to twenty bars, a few tall and most short, in one band at the centre. Leave room below for captions and reuse the band every episode. The bars can stay still. The words are what stay in time with the voice.

Let the Mark's motion loop for the whole clip, so the frame moves without a second video behind the type. One Mark for the series. Only the line, the guest and the episode number change.

Captions that work with the sound off

Many people watch a feed with the sound off, so the caption is the episode. Burn the words in as open captions and the type survives a repost. Keep a separate track for a long YouTube cut. Video captions covers contrast and line length.

Start the caption with the phrase and end it on the pause. Do not split a word. A second line is only for the beat that will not fit. Check the guest's name. Use ink that clears the ground, not a box behind the type.

If the clip still makes sense with the sound off, the audiogram is finished.

How to make an audiogram

Work in this order. One speaker, one idea, short enough that a stranger will watch it. Under a minute is the length that usually holds in a feed.

1. 1

   Cut one moment

   Pick the sentence you would quote in the show notes. Drop the warmup and the sign-off.

2. 2

   Set the vertical frame

   Start at 1080×1920. Keep the show name, the line and the bars in the centre, clear of the top, the bottom and the right edge.

3. 3

   Lay the ground

   Use one Mark for the series and let its motion loop for the whole clip. The calmest part of the ground sits behind the line.

4. 4

   Draw the bar row

   Add the bar row in one band above the captions, in the cover colours. Save it. The next episode reuses it.

5. 5

   Add the voice

   In Gradiently, open the timeline, choose Record, then Voice. Listen back before you add it: the clip stays in the browser until you do. Or import MP3, M4A, WAV or Ogg. Recording voice covers the sources.

6. 6

   Time the captions

   One short line per phrase, changing on a pause. Type them, or import an SRT or WebVTT file, then watch with the sound off. Adding captions on the timeline is that pass.

7. 7

   Export, then reframe

   Export MP4 at 1080×1920 and 30 fps. Use WebM on your own site. Then export 1080×1080 and, if you need it, 1920×1080. Check the square still holds the line. Timeline editing covers the cut.

You can design on any unclaimed Mark. Export needs a Mark you have claimed. Timeline, captions, voice recording and video export are part of Pro. One extra size is free. Resizing every size in one step is part of Pro, which is how the square and the landscape come off the vertical master. Gradiently redraws the Mark for each size, motion included, so the calm area stays behind the words. Only add music you have the rights to, and keep it under the voice.