Studio Freight pulled me in to build a "ledger of creative deconstruction"
They wanted a place to record hard-earned wisdoms, and dive deeper into the minds of their team and industry collaborators.
The first thing impressed upon me was that the design was deliberately quiet. Mostly black and white, perfect alignment, square edges. It was clear that this platform was meant to serve the content, not compete with it. The assets and content of each article were to drive the vibe and style of the piece, while the site framed everything in place.
Another takeaway was that the articles needed to be modular, maintainable, and extendable. Studio Freight wanted the ability to quickly build out new content with mix-and-match pieces: text blocks, Q&As, image galleries, pull quotes — all the building blocks of a digital magazine. The experience for the content manager had to be quick and intuitive- ready to fill with rich assets from featured projects.
So I got to work...
and started matching the logical components from the design 1 to 1 in the Storyblok CMS.
The blocks were fairly simple to map and add variations to. I spent a lot of time building up the CMS alongside as I built the actual code components. I love the details when it comes to crafting the CMS. A cool site means nothing if the content system is too cumbersome for the content manager to use.
I ended up with 12 content blocks (each having variation options within) for the editor to build articles with. The image gallery was the most complicated block in the code. It needed 7 different image grouping variations, but always maintain the same amount of space of the total layout. From the content managers perspective, it was super simple. Add an image gallery block. Select the layout you wanted from a list (One up, two up, two up offset, three up, etc.). Add photos.
In the code base, I kept it clean by keeping the gallery a single component. It parsed the correct layout and adjusted the images within accordingly, while keeping all the general properties of the gallery centralized. This made it really easy to extend if they decided mid-development that they needed a new image layout (quintuple up offset alternating spinning...). I would just add the option to the CMS, then extend the image gallery component to accomodate the option.
The site turned out incredible
Studio Freight is filling it in with fantastic articles, I highly recommend you browse the site.