PICTURESTART is a youth audience-oriented media company founded in 2018 by Erik Feig, an executive and producer behind The Twilight Saga, The Hunger Games series, La La Land, The Hurt Locker, and more. Seeking to attract investors, develop their brand language, and act as a resource for film fans, PICTURESTART asked us to redesign and rebuild their website with an eye to expressing their brand ethos: Discovery of Voice.
We approached the site as the primary expression of the PICTURESTART brand. In turn, the site’s design and navigation took the same inspirations as the brand and name — from film leaders, TV test patterns, and other visual ephemera from the technology of filmmaking, along with the iconic “PICTURE START” marker that appears at the beginning of a film reel.
The exploratory site experience is anchored by a unique gridded navigation. Each page is framed with a unique border composed of color bars that correspond with the site’s pages — each a unique color in the brand’s core palette.
We looked for every opportunity to express the PICTURESTART brand and add youthful energy to the site’s design and interactions, from the unique navigation, to cheeky project descriptions and GIF hover states, an endless company manifesto, loading animations — even a few hidden photos of the staff from their teenage years.
Technical Approach
We sought out to build a highly dynamic site that could flex as the company grows, while keeping a premium on performance. We utilized Next.js, a React-based framework that enabled us to server-side render every page and output a lightweight site. Every update to our headless CMS triggers a build process that automatically generates static HTML pages and deploys them to our CDN, a modern architectural pattern called the JAMstack.
We extensively prototyped page transitions to achieve the most seamless experience possible using the FLIP methodology.
We code-split each page to add another layer of performance to our build. The site prefetches new bundles in the background while the user is browsing, ensuring smooth transitions between pages.
Everything on the site is CMS-editable. Our static build process boosts performance, saves bandwidth, and makes the site more stable.
Since launch, the site has been recognized by Awwwards, The FWA, The CSS Design Awards, Communication Arts, SiteInspire, Klikkenthéke, Muz.li, thegallery.io, and more.
- Site of the Day
- Developer Award
- Mobile Excellence
- Site Of The Day