# Audiogram design: turn audio into a clip people watch [Canonical HTML page](https://gradiently.design/guide/audiogram-design) A voice clip is invisible in a feed until it has a frame. Here is how to design an audiogram so the line, the waveform and the show's ground all read on a phone. ## The short version - An audiogram is a short video of a podcast or voice clip, with the words on screen, a waveform and the show's ground. - Design it at 1080×1920 first, then reframe the same clip to 1080×1080 and to 1920×1080. - The waveform is a short row of bars in the show's colours. It signals audio. It does not have to twitch with every syllable. - Captions sit in the lower middle, one short line at a time, so the clip still works with the sound off. - Record or import the voice, time the captions on a timeline, and export MP4 or WebM on the same ground for every episode. 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. A vertical podcast audiogram with the episode line in large type and the guest name above it Vertical audiogram: guest and episode above, the line large, bars and captions in the middle, off the edges the apps cover. A square audiogram of the same episode, with the spoken line as the main words The same episode as a square. The spoken line stays the largest type, so a feed crop still says something. 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](https://gradiently.design/guide/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. - Reel, Short, TikTok, Story: 1080 × 1920 - Square feed: 1080 × 1080 - YouTube and your site: 1920 × 1080 Vertical 1080×1920, square 1080×1080, landscape 1920×1080. Export each at its own pixel size. 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](https://gradiently.design/guide/social-media-safe-zones) maps those edges, and [social video sizes](https://gradiently.design/guide/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. > **A Canvas is not an audiogram** A Spotify Canvas is a silent loop of 3 to 8 seconds, and Spotify asks for footage without talking. A talking clip will not stay in sync. Keep the audiogram for social, and see [Spotify Canvas size](https://gradiently.design/guide/spotify-canvas-size) for the loop behind a track. ### 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](https://gradiently.design/guide/mp4-vs-webm) explains the choice. ```html ``` Landscape audiogram on the episode page: WebM first, MP4 as the fallback, poster from the same design. ## 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](https://gradiently.design/guide/podcast-cover-art) is where those colours are set. ### Avoid - Full-frame waveform, no words - A new ground every episode - Bars covering the captions - Episode number as the biggest type - Colours the cover never uses ### Do - Spoken line as the largest type - Same ground and the same bar row - A gap between bars and captions - Names small, in a fixed place - Two colours from the cover 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](https://gradiently.design/guide/video-captions-design) covers contrast and line length. | Setting | Set it to | Why | | --- | --- | --- | | Words on a line | 3 to 6 | One glance on a phone | | Lines at once | One, or two at a pause | A third line is a paragraph | | Position | Lower middle | Clears the buttons and the name | | Colour | Ink that clears the ground | A box hides the Mark | | Timing | Change on a pause | Do not cut a word in half | | Kind | Open, burned in | A repost keeps your type | Caption settings for a podcast audiogram. One spot for the whole clip. 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. > **Watch it with the sound off** Play the clip once with the sound off before you export. If you lose the thread, the line is too long, too low, or late. ## 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. **Cut one moment** Pick the sentence you would quote in the show notes. Drop the warmup and the sign-off. 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. **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. **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. **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](https://gradiently.design/guide/recording-camera-and-screen) covers the sources. 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](https://gradiently.design/guide/video-timeline-and-captions) is that pass. 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](https://gradiently.design/guide/timeline-video-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. ## FAQ ### What is an audiogram? A short video of a voice clip: words on screen, a waveform, and a ground that looks like the show, so the moment works in a feed with the sound off. ### What size should a podcast audiogram be? Start at 1080×1920 for Reels, Stories, TikTok and Shorts. Also export 1080×1080 for a square feed and 1920×1080 for YouTube or your site. ### Does the waveform have to move with the voice? No. A fixed row of bars in the show's colours is enough. Captions stay in time with the voice, and the ground carries the motion. ### Where should captions sit on a vertical audiogram? In the lower middle of the 1080×1920 frame, clear of the bottom and the right edge. Keep that spot for the whole clip. ### Can I make an audiogram with voice only, and no camera? Yes. Record voice or import audio, and design the frame around it. A face is optional. ### Which file should I export? MP4 at 1080×1920 and 30 fps for social apps, plus WebM if it also plays on your site. Export the square and the landscape as their own files.