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.
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:
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.
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:
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.
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.
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.
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.