Using Scale to Make Motion Graphics Look More Like Broadcast

In this quick tip we take a look at a few subtle tips and tricks you can apply to all of your videos to make them feel like they were meant to live on TV.

 

Scale and Screen Size

Its important to think about the scale and proportions you use when designing a frame. How will your viewer be watching your piece? Is it on a 65″ TV or a 5″ iPhone? Also think about the viewing distance, how much of your field of view is filled by the screen in question? More frequently the content we create lives on the web, but being aware of how proportions are used in other mediums can inform some of our design decisions.

Look at the two simple frames below and ask yourself which looks like something you would see on TV? (Keep in mind these are oversimplified examples, purposely exaggerated to get the point across.)

Scale Example

 

Artistic choices aside, the framing on the right is more typical to what you would see on TV. Why? Since artists know the end result will be viewed on a large television, the design can utilize a more understated approach and still be legible. The Design on the left is horsey in comparison, it’s just too big and clunky. It also goes outside of the Title Safe region. Obviously there are successful pieces that utilize oversized graphics but for the most part, broadcast design tends to look more like the example on the right.

 

Bring Big Screen Style to the Small Screen

Knowing how the piece will be viewed effects how you can approach the design. In the situations where the piece will be shown much larger, we can take a more understated, subtle approach to the design. So how does this affect our design choices when making content for the web?

 

A viewer watching a 65″ TV from 8′ away has the same viewing angle as a viewer watching an iPhone 5s from 6″ away.

 

I think that when we discover that a piece will only be shown on the web, we tend to design larger in the hopes of maintaining visibility on a smaller screen. This is true to a degree but maybe not quite as drastic as we may fear. Even if the viewer is watching the piece on an iPhone, there is a good chance it is being viewed much closer. For example, a viewer watching a 65″ TV from 8′ away has the same viewing angle as a viewer watching an iPhone 5s from 6″ away. (~33° viewing angle.)

In both of these cases the viewer is meeting the viewing angle that THX recommends for an optimum HDTV cinematic viewing experience. There are more factors at play than just viewing angle but you can start to see how you may not need to compensate as heavily in your design for web playback.

 

The Takeaway

At the end of the day, web viewing will vary a lot. It could be a little 3″ YouTube window or it could be fullscreen on a 65″ 4K TV thanks to the YouTube app on your Xbox One. So don’t be afraid to take a more understated approach, it will feel more “broadcast quality” since it will be sharing the visual language used in broadcast commercials and there is a good chance you won’t be sacrificing legibility.

 

2 Comments

  1. david morleysays:

    Viewing angle has several definitions, but I assume you mean the perceived size of the screen is roughly proportional whether you’re 8′ away from a 65″ TV or 1 foot away from an iPhone? That’s an interesting point I’ve never thought of before. 2 points, Gryffindore.

    • Yes, in this case – the perceived size of the screen. There are a number of factors that make this comparison less than 1:1. Like environment, lighting, screen brightness, resolution and so on. I also think people probably hold there phone further away than the comparison. But in many cases I think people correct for this is they are engaged in the content. Such as move the screen closer, push to the TV, save for later etc. at minimum it at least shows that maybe the viewing experience is larger than maybe initially expected. Maybe 1.2 points for Gryffindore?

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked