Responses by Zhenya Rynzhuk.
Background: This is the portfolio website of Playful, a creative collective that specializes in art direction and motion campaigns, merging live action with CGI and new technologies to craft captivating animations and short films. The purpose of the site was to showcase all the great projects that Pablo Alfieri and his colleagues have created over the last few years. The site also serves as a blog through which all the latest explorations and works in progress can be shared.
Design core: The key idea was to create a framework that would enable showcasing the collective’s truly unique content. At the same time, we were not afraid of using really bold and prominent typefaces. In the end, everything came together and supplemented each other pretty nicely.
One of the core features of the site is the project slider on the homepage. It is both smooth and engaging, motivating visitors to check all the featured projects—and stay on the site for a while!
Challenges: Finding out the optimal, one-size-fits-all layout for all inner projects, as well as preparing, uploading and testing the project pages before the launch. This doesn’t seem like the most challenging job in the world, but it takes a lot of time to make sure everything works perfectly across multiple devices, browsers and resolutions. The final result was definitely worth all of the effort.
Navigation structure: There is sticky navigation accessible from all the pages, making it easy for users to navigate the site. It is placed in the top left corner, minimizing the times it overlaps with the content. There is also a clear and visible Contact button that is always there, encouraging visitors to reach out to the creative collective with new projects or collaborative opportunities.
Technology: The site is a 100-percent progressive web app. We used our standard technology stack for this project: GSAP for the animation engine, Contentful for the CMS and Node.js for the back end. The scrolling animations are powered by the Intersection Observer. The HTML Audio controls are implemented using Howler.js. We also have a Mailchimp newsletter form on the site so that visitors can sign up and stay inspired by the collective’s latest projects.