AASA 2021 Virtual NCE Animated Advertising

Work for hire for the School Superintendents Association (AASA) by Lara Lee while employed at CSG Creative with permission for Lara Lee to display for self-promotion.

An Instagram post from the 2nd suite of animated advertising illustrates excited kids jumping up and down in front of a computer screen with the event’s homepage.

Background

AASA, The School Superintendents Association, launched its first-ever virtual National Conference on Education (NCE) since the event started 153 years ago. It was also the first year we did animated advertising for them.

The annual NCE conference targets attracts around 3,000 superintendents in public education each year. This year, the conference theme is, “Social Emotional Learning Focusing on the Total Child.” Of course, a 2021 Virtual NCE key topic is social emotional learning, but also: schools re-opening/digital learning, trauma informed learning, schooling for resilience, effective management, equity, and more.

Since the AASA 2021 Virtual NCE is primarily a digital event, its advertising pushed digital marketing methods as well. I was responsible for designing:

  • static and animated display ads,
  • Google responsive display ads,
  • animated ecards,
  • emails, and
  • paid social media ad graphics

to help promote the virtual event. However, I want to focus on the animated advertising components here.

I saw the need to learn motion graphics as client demand for these video animation services greatly increased—and that was before the pandemic moved events online. The pandemic, then, pushed me to learn more of After Effects.

Additionally, unlike other motion graphics I’ve done for AdvaMed’s 2020 MedTech Conference and ACS’s National Meeting Fall 2020, AASA’s 2021 Virtual NCE’s animated advertising required me to work with raster objects (i.e. photos) and complicated transparency blends. To execute this core visual identity over animated GIFs, I needed to faithfully recreate all that within a small file size, too.

My Role

Digital Designer

Agency

CSG Creative

By the Numbers

1 st
Virtual Conference & Expo
0 .0 M
Total Impressions from All Digital Ad Campaigns
0 k
Total Clicks from All Digital Ad Campaigns

Building Excitement with Motion Graphics

Registration Launch

One of the earliest animated GIFs includes this ecard promoting the opening of registration.

The logo is non-responsive and only has this one version. (This proved particularly challenging on some sizes.) The theme, however, I was permitted to stack and re-arrange. I addressed an otherwise dirty copy rag by aligning the theme with the left edge of the NCE part of the logo and scaling the headline, “Registration Is Now Open,” to the same width as the whole logo. In fact, all the copy element align with some part of the logo.

The animation itself, while simple, quickly grew to a large file size. It was a demanding graphic! This GIF has:

  • fine details,
  • a multitude of colors,
  • multiple kid photos, and 
  • large dimensions.

A large file size would likely have a negative impact on open rates. Therefore, I countered the data-heavy kid photos with otherwise flat graphics to save on file size.

I completed this 5-second 600×600 animated GIF—with 2x animated jumping kids reveals, shape bumping, and seamless reset—in just 724 KB.

I also animated ecards. These 600x600 GIFs continued the animated advertising campaign.
E-card #1

Animated Advertising Returns in Suite 2 of the Social Media Campaigns

Paid social media advertising also introduced several animated GIFs. The first suite, which was static and not shown here, generated brand awareness. This suite, number 2 of 9, promoted registration opening.

While they’re basically the same two graphics, each animated GIF was a new aspect ratio. Consequently, I had to lay out copy differently, which meant the kids’ size and positioning was different, and therefore all new animations. Fortunately, I learned about the After Effects “hack” to trick the program into opening two documents at once! I could at least copy-paste timing between files as a result.

An animated Facebook ad for AASA’s 2021 Virtual NCE promoting the registration launch.
Facebook
An alternative animated Facebook ad for AASA’s 2021 Virtual NCE promoting the registration launch.
Facebook
Animated advertising builds excitement for the virtual conference, like this GIF for social media..
Instagram
An Instagram post from the 2nd suite of animated advertising illustrates excited kids jumping up and down in front of a computer screen with the event’s homepage.
Instagram
Animated advertising builds excitement for the virtual conference, like this GIF universally-sized for most social media.
Twitter
Animated advertising builds excitement for the virtual conference, like this GIF universally-sized for most social media.
Twitter

From Video to Frame Animation

The second ecard in the animated advertising came with a simple request: a computer screen mock-up with a flashing button.

This is the simplest animation of them all. In fact, I didn’t even After Effects, just Photoshop. The ecard is a good ’ol frame animation.

In comparison to the video animation of ecard #1 above, I completed this 2-second 600×600 animated GIF in a mere 107 KB.

After the client approved the e-card, I recreated the animation in a universal social media post size, 1600×900 or 1200×675, with some interior padding to prevent social media platforms from cropping copy. Since Instagram posts share the same aspect ratio as the original ecard, I simply scaled the same e-card to 1080×1080.

This frame animation is much simpler than the other video animations I made so far: the only movement is a blinking Log In button on the event homepage.
E-card #2 (resized for Instagram)
A Facebook post resized from an earlier ecard. It’s another example of the animated advertising we introduced to the event this year.
Universal post size, 1200×675

The Animated Advertising Appears in Emails, Too

The email design also came with an animation request styled after a page-flipping GIF my boss and Director, Digital, made previously for another client. He built a template in Photoshop, so I updated the template with screenshots from AASA’s virtual conference planner.

The virtual planner is an 8.5×11″ PDF, so it doesn’t resize to different aspect ratios the way a webpage does. I filled in the gaps to make the planner compatible for an iPad size and animated them flipping with a Photoshop video animation. I also modified the template to pass pages through a layer mask and added a nice screen glare on top.

(Having experienced designing this in two apps, After Effects and Photoshop, I think After Effects is easier to use.)

For comparison, this 7-second 600×471 animated GIF in 487 KB.

Besides web ads and social media posts, animated advertising also appears in the emails. The animated GIF in this email illustrates flipping pages through the virtual conference brochure on a tablet.
Full email design with animated GIF