Responses by Stink Studios

Background: Founded in 2018 by Erik Feig—producer of films like La La Land and The Hunger Games—PICTURESTART is a media company that makes content for worldwide engagement, telling a wide array of stories with diverse creatives in film, television and digital productions. The site launches the new company into the world and exists for investors and fans alike. It catalogs Feig’s past and present projects, describes the company’s approach to production, introduces the team and shares the purpose behind its larger storytelling perspective.

Design core: We organized all the site’s content into four categories: “What we do,” “How we do it,“ ”Why it matters” and “Who we are.” In creating these four core page types, we assigned each a different color in the PICTURESTART brand palette: red, blue, white and black. Each of these pages contain interactive features and content curation connected to that page’s purpose. “What we do” features PICTURESTART’s projects in an oversized list of films; the cursor becomes one of a set of curated GIFs each time you hover over a title. “How we do it” is the about page but uses an SVG animation of a film leader to reveal the meaning behind the PICTURESTART name. “Why it matters” features a manifesto in the form of a blog, uncovering nuggets of the company’s positioning every time the users clicks. “Who we are” is the team page; each team member’s headshot turns into a teenage photo on hover, reflecting PICTURESTART’s focus on young adult and coming-of-age stories.

Navigational features: For the site’s design and navigation, we drew inspiration from film leaders, TV test patterns and other visual ephemera from the technology of filmmaking—the same inspirations behind the PICTURESTART name and brand identity. The navigation is a constantly changing system that frames each page with color bars that correspond to each page’s color. When users navigate, the entire canvas moves, panning seamlessly to the next page. The resulting feeling is that of revolving through an endless, repeating page grid in an ever-changing “test” pattern.

Technology: As with most of our builds, we used Next.js: a powerful React-based framework that enables developers to statically generate HTML pages so the client never has to. The entire site’s content is managed by DatoCMS, which triggers builds on the production environment to generate the full set of pages. Leveraging the flexibility of React and Next.js turned out to be extremely performant. Code splitting our pages—that are prefetched while browsing the website—also reduced the bundle file size for a smoother user experience.