FC Dallas Banners
The Challenge
I designed a suite of digital banners for the FC Dallas sports team. I utilized many tools, including Figma to organize assets, Photoshop to extract elements from previous designs, and finally Google Web Designer to make animated banners as per client specifications. The biggest challenge was designing so many different aspect ratios while keeping a consistent grouping of content using the asset components that FC Dallas had in it's library. We needed a solution to organize the individual creative elements in order to build many differently-sized banners. Figma made sense to componentize key art and make it easier to swap in and out portraits of players.
My Role & Process
I gathered all the assets provided by FC Dallas and converted them from Adobe tools into Figma in order to start building the individual layouts. Bringing vector graphics from Illustrator into Figma was a time-saver, but I had to recreate a lot of gradient elements and build a component library. I used the previous design tools, and converted everything into either vector artwork or hi-res photography of the individual players. I used Figma components, auto layout, and component libraries.
Solution
Having all the individual elements in Figma made it incredibly easy to hot-swap players in and out of banners, as well as reorganizing content on certain banners using auto layout. Finding a solution tool like Google Web Designer made creating the animated banners much more consistent. This tool allowed me to easily pull in assets on individual layers and animate as needed.
Results & Impact
Building in this new workflow allowed for all subsequent banners to be easily created in a much quicker fashion; only requiring swapping out player graphics and date/time updates. Auto layout in Figma also allowed for more fine-tuned elements, instead of hand crafting each unique layout. The client was grateful for faster turnaround of banners, as well as the newly organized asset library.
What I learned
The frontloaded effort of reorganizing assets, building a vast component library, and setting up for future iterative work can take a lot of time, but ultimately is worth the effort to save on future work.
