An interesting and cool opportunity came up for our team: a chance to make an interactive, engaging, and poppin' site for the 2013 Made in America Festival.
Our previous partnership with Roc Nation solidified us as the number one team for any sort of digital engagement, so when we were given this opportunity we knew we had a one in a million shot to knock it out of the park. We succeeded.
The initial success led to our future collaborations with their team, including crafting two new sites for 2014 and 2015. Each time, our creative team came up with unique solutions to having a fun grid for artists and allowing artist details to be displayed in an intuitive manner.
Our first site was a simple HTML/CSS site with some JS functionality to allow for some grid control. While that worked perfectly well, we found that later works would need a more detailed solution -- having a static site lead to an assortment of headaches when it came to dealing with the fluid nature of festival scheduling.
And so we began with a plan in place for dealing with this issue in the 2014 Festival. We successfully designed a unique flowing approach for this year's build -- a visual enhancement that allowed many more artists to be displayed in a similar amount of real estate. This also allowed artists to be separated via days, giving users an intuitive toggle to switch and see which artists are available. Unfortunately, this switch tool logic presented another issue, namely how tightly coupled the artists were to each other, depending on the day those artists performed.
The 2015 Festival site was a bit of a drastic switch -- a re-approach by bringing in older, tested elements combined the innovation expected out of Layerframe. The site features an intuitive single-scroll experience, which still allows for in-section scrolling depending on how much content that section has. This allowed for a more visually appealing and standard grid system, while allowing for the typical Layerframe touches in terms of SVG animations and fluid grid displays. While there were some optimization misses (minifcation and conditional loading of detail artist images being a sore point), this iteration brought out the full unity of innovation and flexibility.
- What Went Down
- jQuery, Green Sock, Snap SVG, Fullpage
- GitHub integration, team based collaboration
- Data organization
This was a fascinating and incredibly unique project I'm honored to be a part of.
DISCLAIMER: This is a rough demo from a few weeks before launch, and as such is missing some refinement. Still, it's a good example of some more daring visual interactions.