Happy Birthday, LGND (5 years)

September 17, 2021

Today marks the 5th-anniversary of LGND, the company I work for. I began a relationship with them in August of 2017 as a contractor and later joined the team as a full-time employee in December of 2018. At this point in the company history, only 5 other teammates have been at LGND longer (including 3 of the founders).

I wanted to mark this special occasion by highlighting 5 projects that are my most favorite.

Together for Girls (2017)

Together for Girls (TfG) is a global public-private partnership dedicated to ending violence against children, with a particular focus on sexual violence against girls. Partners include the U.S. and Canadian governments, the Centers for Disease Control, the World Health Organization, and the United Nations. In 2017, TfG unveiled the progress of its Violence Against Children (VAC) Survey in over 20 partner countries across South America, Africa, Asia, and Europe.

This was the very first project that I worked on as a contractor with LGND. It was the first project that I used AmCharts and one of the first projects that I relied heavily on JSON data to build out the page (I built a static API that Ryan later created in WordPress which allowed the client to easily update the data). I am particularly proud of the mobile solution I came up with, which also serves as the fallback if JS is not available. I really enjoyed working on such a meaningful project right off the bat.

The mobile version with the same content is presented in accordions.

Read LGND Case Study

Sharing Solutions (2019)

This was the first project I worked on after I joined LGND as a full-time employee in December of 2018. Sharing Solutions is a resource site to equip businesses to combat the opioid crisis. I picked this project because I really enjoyed working with my teammates, Garet (Account Director) and Katia (Designer) to create this one. There were a lot of little behind-the-scenes details that I am proud of. I like the very subtle animation with the logo when the page loads.

I later developed the 2019 National Tour page and the 2021 National Tour page.

Real World Learning – Kauffman Foundation (2019)

There are a lot of reasons why this project made this list:

  • I grew up in Kansas City. I really enjoyed working with all of the Kansas City imagery that is incorporated into this design.
  • I grew up following the Kansas City Royals and spend many summer nights at the stadium that is now named for Ewing Kauffman. I was very familiar with Mr. K and it was a privilege to work on this project with his foundation.
  • This was the first project that I ever used Greensock for animation work. I remember being quite nervous during the two months that I worked on this. It was a huge challenge to pull off the animation for this one and I am really proud of how it turned out. Greensock really empowered me to be able to make this happen the way our design team envisioned it.

See the Pen
Animated clock by Jeff Bridgforth (@webcraftsman)
on CodePen.

One of my favorite details is a working clock that is featured in a classroom scene on the site. I used this tutorial to help me pull that off.

One other fun detail. I did some work on this site from the LGND office. LGND gathered our team together in DC for a week of team meetings mixed in with project work. It was fun to be able to interact with my teammates as I did some work on the project. I got work next to Ryan during the week and he helped me figure out how to code and animate circular graphs.

Read LGND Case Study

Aireon (2020 Realign)

I would be remiss not to include Aireon in this list. I am very proud of the realign project we did for them in 2020. We updated their homepage and created new product pages to highlights the growth in their business modal.

See the Pen
Plane animation (proper way with transforms) by Jeff Bridgforth (@webcraftsman)
on CodePen.


I am very proud of the animation work I did for the homepage. I knew from the moment that I saw the design file that I wanted to animate the plane background in the Latest Updates section. I also knew that I wanted to animate the lines around the section titles. I put in a lot more fade-in animations on my first draft but decided to pull back. I am very happy with how it turned out.

Aireon was among our first retainer clients. I have worked on many projects for Aireon over the 4 years I have worked with LGND including HTML emails, year-end reviews, special event pages, and many pages that we have added to the site since it was first launched.

Resolve to Save Lives: Epidemics That Didn’t Happen (2021)

This was a challenging project. The big challenge was that the design and content evolved after I started building the site and continued to evolve right up until launch. It had an ambitious project timeline. I am really proud of the product that we delivered to the client. Almost everyone in the company had a hand in this one as strategy, design, video, and development were all involved. Ryan and Josh both pitched in to help me with specific problems I encountered in development. I also enjoyed my collaboration with Katherine on the content side and with Emily as we discussed the evolving design. Katherine, Ryan, and Emily gave valuable feedback on the animation work.

One of the thrills of the project for me was the chance to work with Jon Hicks. Jon has been one of my Web heroes and he was quite the gentleman. I was really encouraged by his feedback on the many calls we had with the Resolve team. Jon was involved in the project as part of the client team that provided feedback to our work. We worked closely with him to implement the site in their WordPress install.

I am really happy with the animation work that I did to help bring the digital story to life. The first animation I envisioned was the title of the page coming in like a typed effect for a “mission” sequence of a TV show or Marvel movie (first imagined it with audio but thought that was a bit much for this project). I had to play around with that animation quite a bit to find the right balance between too slow and too fast (where you lose the whole effect).

Read LGND Case Study

Greater Washington Partnership (Honorable Mention) 2019 to 2020

This redesign project for Greater Washington Partnership is one of the longest projects I have ever worked on. I started development on September 24, 2019, and the site launched on November 19, 2020. The project started and stopped for various reasons. A leadership change in 2020 delayed the project as the new leadership evaluated the site.

I really like the hero animation on the first page. I used clip-path to pull off the masking of the two different slideshows. I enjoyed a close collaboration with Jason, who designed the site. He provided me with a lot of good input and ideas as we developed the animations.

National Head Start Association Playbook (Honorable Mention) 2019

The Language Playbook was designed to help Head Start staff have better, more effective conversations about our mission with the public and lawmakers. LGND took material contained in a PDF and created a digital story that brings the content of the playbook to life.

The site is built in WordPress. I spent the first couple of days contemplating how to best architect the site.  I experimented with using Advanced Custom Fields to create reusable components. I started to keep a project notebook to summarize my thinking and make notes at the end of the day. Unfortunately, I was not able to keep up the habit. Might be something I try to pick up again in the future.

Weeknotes post when the site launched

Update: September 18

Iridium Museum: Exhibit Pages (Honorable Mention) 2020

I can’t believe I forgot this one when I made my list on Friday. To be honest, it might have bumped Sharing Solutions down to honorable mention but since I am posting this later, I will add this project as an honorable mention.

I worked on this project last summer and even put in a rare Saturday to work on it. I was feeling a little bit behind as we were one week out from launch so I decided to put in some extra work on a Saturday. The great thing was is that Jason who designed the microsite, was also working that Saturday, and we were able to do a Zoom call to discuss some questions that I had. The day reminded me of the many Saturdays I would spend in the architecture studio working on my design projects. I had a lot of fun working that day.

One of the other things I enjoyed is that it was a collaborative project with Ryan, our lead developer. He built out the awesome homepage and worked on the interactives within the museum pages. I got to play to my strengths and work out the layouts for the interior museum pages. I really enjoyed building out a more complex grid to accommodate the different layouts that were a part of the project. It was during this project that I came up with a practice that I have used ever since to create grids. I use the smallest width as the 1fr unit and then determine the other fr units by dividing the bigger widths by that base width. I found that fr units under 1 do not work very well so I always have a base of 1fr in the grids that I build.

I am really happy with a solution I came up with for a jump menu. Several of the page layouts are full-width on smaller screens so I needed a solution so that the jump menu did not cover the content. I came up with a Jump Menu button that reveals/hides the jump menu on smaller screens.

Jump Menu solution for smaller screens
Jump menu on wider screens

Comments are closed.