Creative Best Practices and Asset Guidelines

Description: Overwhelmed by the seemingly endless possibilities when it comes to dynamic versioning in DCO campaigns? Innovid is here to help! The goal of this article is to lessen the amount of time and manual labor needed from your creative and production teams, while equipping you with the knowledge to kick-start your campaign. Below is a list of assets you might need, organized by channels like Display, Video, or CTV. If you’re looking for a list of creative specs, refer to Display Specs, Video Specs, and CTV Specs


Display Best Practices

When it comes to DCO display, code is needed to render animations, controls, and styles. As such, browsers (which have their own code), might impact your DCO display ad’s code; while some browsers might not even allow specific styles or animations. Having said that, here are some general recommendations:

General:

  • Ad Dimensions
    • When launching Display DCO versions in a variety of ad dimensions, keep in mind that your design will look differently when resized to smaller or bigger dimensions. As an example, for smaller sizes, you might want to use copy only versus using copy + images, as the design might look cramped. 
  • Ad’s File /Code Package Size
    • Always pay attention to the file size of your banner in megabytes. (Max file sizes usually vary between 100kb to 700kb for standard display.) Remember that publishers or DSPs have limitations and heavy banners could be pushed back. You also need to consider that one Publisher might have a max file size of 500 KB while another might have a 350 KB file size, meaning that you will have to build to the lowest common denominator. For generalized guidelines please check the IAB’s page on common specs.

Text:

  • Don’t use effects or styles that can be difficult to replicate with code (e.g., glows, font gradients, etc). You can use this for reference: https://www.w3schools.com/cssref/css3
  • You can use https://greensock.com/ for complex text animation. 
  • We recommend using live text instead of PNGs to reduce the file size of the banner.
  • Animations are limited to 15 seconds corresponding with IAB guidelines.

Images:

  • To ensure high quality on all screens, use assets that are 2x the size of your final ad (e.g., if you are designing for 300x250 use an artboard that is 600x500).
  • Whenever possible, use vectors instead of .PNGs or .JPEGs. Vector assets can be exported as SVGs, allowing you to resize them without losing quality.
  • If you are converting text lockups to .SVG remember to rasterize before exporting.
  • Due to file / code package limits, it’s best practice to compress all your images and avoid using any images bigger than 100KB.
  • Don’t use images with blank margins (white or transparent space). (e.g., for product images, there should be no blank space after the image finishes to prevent discrepancies in how images appear throughout different dynamic versions).
  • Especially when working with dynamic creative, take into consideration the focal point of your images and how they will be impacted by long/short text or when used in different dimensions and channels.

Fonts:

  • Use individual TTF files for each font style (bold, light, etc).Remember that for Display you have to convert TTF or OTF to WOFF2.
  • Adobe Fonts can be used in display ads. 
  • We don’t recommend using more than 2 or 3 different font styles as each font style included will add to the final file size. 

Videos:

  • To avoid potential publisher push back, videos should be compressed as much as possible.
  • Note that videos will not autoplay with sound. The viewer must manually turn on the audio.
  • Remember that in most cases, videos can’t last more than 30 seconds. 

 

Video Best Practices

The categories below outline elements that can be made dynamic in a video ad:

Text

(Callouts, supers, messages, titles, prices/deals, product names/descriptions, address, legal copy.)

  • Since dynamic text length isn’t consistent, it’s highly recommended to start the design with the longest and shortest examples to make sure the typography design looks good and supports all the possible scenarios.
  • All necessary fonts are required. OTF & TTF formats only.
  • Note that since it’s dynamic, the text adjustments will be consistent for each layer (kerning, leading, tracking etc).
  • Each text layer can hold up to 2 different styles. Each style can have multiple properties like scale, position, color, opacity, rotation. For example one style can be smaller and in a different color from the second style within the same layer.

Images

(Background, product shot, logos, icons.)

  • Supported file types: PNG (recommended), JPG, JPEG.
  • All dynamic images associated with the campaign’s versions must use the same file type.
  • Transparent background images enable more design flexibility.
  • Image size should be large enough to fit into 1920x1080px video without losing quality.
  • For non-dynamic elements, PSD, AI, and EPS files are also supported.

Videos

(Original video ad, background video, animated elements.)

  • Supported file types: MP4 and MOV.
  • Aspect Ratio: 16:9 (1920x1080px)
  • To avoid potential glitches, all dynamic video versions should have the same frame rate.
  • When using existing TV spots, try to get a clean version without legal copy or other supers. These can be added dynamically later on.

Audio

(Soundtrack, voiceover.)

  • Supported file type: WAV
  • Use separate audio files when possible (VO, music, sound fx) to allow for maximum flexibility when creating versions (e.g. clipping part of the audio to make room for an end card).
  • Consider using different VOs for different CTA messages.

Layers

(Groups of assets.)

  • Layers are typically used for modular video to mix & match different scenes, change design themes, or layouts.

Tips and Best Practices:

  • Keep it Simple: Use short copy. Split long sentences to appear sequentially.
  • Keep it Short: The brand should be identified within the first 3 seconds.
  • Keep it in Motion: Videos should have a constant subtle movement to keep the frames “alive”. 
  • Design with DCO in Mind: Dynamic layers will function as placeholders and will be populated with the actual dynamic assets and copy. Consider how different images, videos, and copy will appear.
  • Dynamic Copy: Test out the longest and shortest variation of your copy to ensure it looks good.
  • Overlay: Make sure no sensitive content, such as legal, faces, titles, or logos are covered by graphic elements.
  • Timing Considerations: Make sure the content matches the duration. Here’s some design-per-duration recommendations:
    • 2 seconds is just enough for a short sentence. Use roughly 3-4 words, otherwise it’ll be too fast to read.
    • Each image in a carousel should have at least 2 seconds
    • End Cards should be at least 4 seconds long

Building a Video From Scratch:

In instances where you want or need to build a video from scratch (if your existing video does not fit into one of Innovid’s creative formats), you can use stock footage, motion graphics, or shoot the video yourself.



Connected TV (CTV) Best Practices

When designing for interactive CTV, it’s important to remember that the viewer is limited to the functions of a common TV remote (left, right, up, down, back). Think of the user flow as a landscape webpage with left/right navigation.   

Text:

  • For the call to action, instead of verbiage such as “click here” use “use your remote” or rely on CTV Composer’s built-in Dynamic Remote feature. 
  • Keep all copy to a minimum to match the lean back environment. 
  • Keep the font to a minimum of 24pt for visibility. 
  • Be sure to provide the font files that are associated with your copy.

Images:

Whether you choose to use custom images or standard stock images, make sure they are large enough to fill a majority of the TV screen in high resolution. Accepted image file types:

  • AI
  • PSD
  • EPS
  • PNG
  • JPG
  • TIFF

Logos and product images should also be high resolution but also need to use file types that allow transparency such as:

  • EPS
  • AI
  • PNG

QR Codes:

  • Keep to a minimum size of 400x400px to ensure viewer’s can scan. 
  • Include text, illustrations, or animations that direct viewers to interact with your QR.

Editable PSD Files:

  • Make sure your PSD file is 1920x1080px and 72 PPI with editable layers (not flattened layers). 
  • Color mode should be set to RGB. 

Pre-Roll Video:

  • Make sure video spots are standard length 6 sec, 15 sec, or 30 sec.
  • Use only HD video assets (1920x1080px).




Was this article helpful?
0 out of 1 found this helpful