Name Cards
The power of this design is derived from its simplicity. It works in a two- or three-line layout, and scales horizontally to accommodate more or less text as needed. To maintain this simplicity, four-line layouts are not advisable. The design may be right- or left-aligned.
Usage: To introduce relevant characters seen within the video. This box should appear once and only once for each person speaking in the video.
Name Cards don’t necessarily need to appear with the speaker’s first appearance. In cases where the speaker is shown briefly in B-Roll or has an exceptionally short line before cutting to B-Roll, it can be acceptable to show a Name Card on second appearance.
When a Name Card is used, it must not be placed over multiple clips. That is, cutting to another shot or angle is not acceptable. The card must be entirely contained within one shot. To allow for this, some exceptions to animation standards are noted below.
For shortform “street interview” videos where many different students are shown speaking, it may not be feasible or worthwhile to name each speaker. In these cases, it is not necessary to add name cards for each person speaking, but rather only introduce the interviewers.
Text: The top line is Source Serif Pro SemiBold, while the bottom is Ballinger Regular All Caps (note that all caps size is 100%). With regard to sizing, assuming the top line is sized at 100%, the lower line(s) should be roughly 66%. For example, in the samples above I’ve set the top line to 450pt, and the bottom line to 300pt. Exact font sizes will vary depending on the project’s dimensions. For content-related text notes, refer to the style guide.
Padding & Placement: When placing Name Cards, avoid blocking faces or other such critical details. It is usually best practice to place elements in the lower half of the frame, but this is not a universal requirement and some discretion is necessary.
As with all on-screen elements, it is also critical to be aware of a social platform’s UI elements when placing Name Cards. If posting to Instagram or TikTok, it’s best to use left-aligned card variants to accommodate the like and share buttons placed on the lower right side of their respective interfaces.
Name Cards should be placed on their own, with mind given to maintaining clear space on all sides. Cards should not be accompanied with drop shadows, outlines, embossings, or any other such elements which may distract from the card’s content. Very occasional exceptions can be made to allow for a drop shadow, but these should only be in cases of a uniform, near-white background content.
Name Cards should be sized uniformly throughout the course of a video, but they may vary slightly in size between videos as needed, so long as they remain easily readable from a normal viewing distance.
Within a card, text should be padded uniformly on all sides, where 1u = one upper-line-size space. Some margin for error is acceptable so long as the padding is uniform on all sides. This same 1u padding guideline applies when placing the element on a clip– it must have the same spacing from the edge of the screen as the text has from the edge of the card.
Animation: The design uses a simple swipe-in design. For notes on how to best achieve this effect, refer to the “Creation” section below.
Card backgrounds should build in over the course of 10-20 frames on a 30fps timeline. Text lines should animate over the same duration as the background, but be delayed 4-8 frames after the start of the background or previous text line animation begins. Build outs should have the same duration as the build in. When animating text lines in or out, use a character fade animation that moves in the same direction as the background. All movements should be given a sharp bezier or “S” curve to soften the beginnings and endings of the build.
Animating out is optional in some cases. When applied to shorter clips, time constraints can make it difficult to animate a proper build out. In these cases, it can be acceptable to cut directly to another shot with the Name Card clip ending alongside the previous shot.
