ACS Spring Meeting 2022 Social Media Graphics

Work for hire for the American Chemical Society (ACS) Meetings & Events by Lara Lee while employed at CSG Creative with permission for Lara Lee to display for self-promotion.

Case Study: ACS 2022 Spring Meeting Social Media Graphics

Background

The American Chemical Society (ACS) launched its bi-annual National Meeting & Exposition featuring thousands of presentations on new discoveries in science. This year, the ACS 2022 Spring National Meeting & Expo marks their third hybrid Meeting, being both online and in-person in California.

CSG Creative Art Director Courtney Lopes and Senior Graphic Designer Jen Mercer created the event visual identity and brand for the Spring 2022 Meeting. Once they finalize the brand guidelines, I then update the web accessibility guidelines and circulate them among my colleagues and the client’s in-house designers. ACS is my agency’s client most heavily invested in promoting web accessibility! I’ve previously built these infographics for the Spring 2021 and Fall 2021 National Meetings and National Chemistry Week. 

ACS continues to use social media extensively for its digital marketing. Now that my colleagues built the core and I established the web accessibility guidelines, I can proceed with all their web art production. This Spring’s social media marketing required 3 covers, 18 feed graphics, and 4 animated GIFs across 4 different messaging campaigns—and all are web-accessible.

My Role

Digital Designer,
Web Accessibility Lead

Art Direction

Courtney Lopes

Agency

CSG Creative

Branded Social Media Profiles

including Facebook, LinkedIn, and Twitter

Not just social media feed graphics—but profiles too, like this LinkedIn profile.

Each National Meeting introduces itself with branded social media profiles. Facebook, Twitter, and LinkedIn all receive profile and/or cover page graphics promoting the latest name and theme, just like Fall 2021’s social media graphics.

I record the “last known good configuration” using CSS shorthand to indicate safe areas of the latest social media web sizes:

  1. Facebook_Business Page Cover_1702x630 w/margin: 50px 310px
  2. LinkedIn_Company Cover_1920x350 w/margin: 13px 58px 26px
  3. Twitter_Universal Cover_1500x500
Twitter cover included in these social media graphics.
Facebook cover included in these social media graphics.

The Green Light on Web Accessibility

Every ACS social media graphic must pass the web accessibility color contrast test. These web standards, established by WCAG, ensures user readability. The standards include a minimum color contrast level between text and its background; font-size appropriate to the color contrast level; and descriptive alt tag text.

While ACS is not my only client that adheres to WCAG’s web accessibility standards, they do request the highest number of web-accessible graphics. They prefer testing using WebAIM’s tool here.

Screenshot of WebAIM's color contrast checker tool.
WebAIM Contrast Checker

Branding by Courtney Lopes

Web Accessibility Testing & Infographics by Me

Violet-core web accessibility color contrast guidelines for all social media graphics.
Purple-core web accessibility color contrast guidelines for all social media graphics.
Collage of Facebook, Instagram, LinkedIn, and Twitter social media graphics.

Posts, Posts, & More Posts

A final total of 32x social media graphics promoted the Spring Meeting. Here’s a sampling:

Bonus: Animated GIFs

Horizontal Animated GIF: This dual-purpose animated GIF acted as both a social media post and animated ecard, calling viewers to submit their chemistry abstracts.
Square Animated GIF: This dual-purpose animated GIF acted as both a social media post and animated ecard, calling viewers to submit their chemistry abstracts.
Vertical Animated GIF: This dual-purpose animated GIF acted as both a social media post and animated ecard, calling viewers to submit their chemistry abstracts.

ACS often recycles web jobs in multiple areas. Digital signage re-appears in social media and animated ecards—like these! I designed and animated these ecards in Adobe After Effects. This visual identity is quite detailed. So I opted for lightweight motion graphics this time.

First, I start with circular text reveal mimics the circular molecules from their creative. Then, I scale up the text with a Ken Burns effect to draw attention to the copy. Finally, I animated a linear reveal of the CTA, edge the button with a moving gradient, and finish with a heartbeat.

As usual, I start the GIF in media res: the opening frame displays the whole message for email clients that don’t play animated GIFs.