How long should a design case video be?

The place sets the length, not the page

A finished landing page can be long, but nobody watches a video because the page is long. They watch because the first moments made them curious. So start with where the video will play, and let that decide how much of the page goes in.

People who opened the case have already given you their attention. People in a feed have not yet. The further the video plays from the case page, the shorter it should be.

A call with a client is the exception. There you can show the whole page and talk over it, because the client has set the time aside for it.

Count stops, not seconds

Seconds are hard to plan while you look at a Figma frame. Stops are easy. A stop is a moment where the camera rests on a section long enough to read it. Everything between two stops is travel.

• The first screen is always a stop. It is the cover of the video.
• A section with a headline worth reading is a stop.
• A section that repeats a pattern you have already shown, such as a second card grid or a logo strip, is travel at most.
• One press of the main button is a stop of its own: the cursor needs a moment to reach it, show the hover and press.
• The ending is a stop: the page at rest, or your name and how to reach you.

Give each stop enough time to read its headline, and keep the travel between stops brisk. A video that feels long is rarely too slow. It usually has too many stops.

What to cut first

1. Repeats. A second section built the same way as the first adds length, not information.
2. The footer. Links and legal text are not why anyone watches. End before them, or let the camera pass through.
3. A slow start. If the title card adds nothing, turn it off and open on the page itself.
4. Extra clicks. One press of the main button shows that the design works. Pressing similar buttons again repeats the point.
5. Holds that wait too long. Trim the pause and keep the shot.

After each change, watch the cut once more with the sound off, the way most people in a feed will see it. If it is still clear what the project is and why it is good, the length is right.

The first frame and the last

In a feed the first frame works as the cover, and many people decide right there. Open on the strongest screen you have; for most landing pages that is the hero. The last frame stays on screen when the video stops or starts again, so make it worth looking at: the page at rest, or a button with a clear call to action.

Setting the length in Casecut

In Casecut the AI director makes these choices for the first cut. It writes the storyboard: which section gets time, which one the camera glides through, what the cursor presses. The three formats come out of the same project at different lengths, and the vertical cut is the shortest, because each one is directed for its own screen.

Take the Heroes of Digital homepage, an AI SEO agency page. A good tour has four stops: the hero, the services, a press of the Book a strategy call button, and the ending. A good teaser keeps two: the hero and the press.

When the cut is longer or shorter than you want, change it:

• Tell the director in the chat, for example "Make it shorter" or "Stay longer on the first screen".
• Open the menu of a block on the timeline to change it, and move a cursor click or switch it off.
• Turn the title intro off to open on the page itself.
• For a Dribbble shot, export in 1080p: shots take an MP4 of up to 20 MB.

The music is written for the project too, with its own key, chords and tempo for its length, so the sound does not stop in the middle of a phrase.

Video for Behance and Dribbble, from a Figma frame

Try it on your own frame

More from the blog