Responses by Phantom

Background: Phantom is an independent, digitally led creative agency with studios in both London and Auckland. With the relaunch of phantom.land, we set out to communicate the unique spirit of Phantom and what we do, while providing inspiration to a wide audience of clients, marketers, strategists, creatives, developers and potential Phantoms. Our goal is to showcase our work and values with rich visuals and content that accurately represents who we are.

Highlights: The site tactfully balances complex creative features in typography and layout, with rich and digestible content. It is confidently minimalistic and the design is unique and intriguing. From a technical perspective, the transitions, animations and features are innovative and highly optimized.

Challenges: Executing such an innovative concept meant we needed to explore and pioneer new technical methods and approaches, requiring experimentation, thorough testing and real-time adaptive concepting and prototyping between development and design. A collaborative effort between both our London and Auckland studios, consistent clear communication was necessary to stay true to our collective vision.

Favorite details: That the site showcases not only our work, but also our brand, culture, style, approach and pride in quality. We challenged ourselves to design a unique experience and push the limits of what is possible to produce with code. We are particularly proud of the attention paid to making the site a mobile friendly experience.

Time constraints: We treated the project as we would a client brief—with a dedicated team and direct, hands-on stakeholder involvement. We actively adapted and reworked a few small aspects that we felt weren’t working as well in practice, ensuring we had a site we were 100 percent happy with. This meant we extended our internal deadline, a compromise we were willing to make.

Navigational structure: It was important for us to put the incredible work our team creates at the forefront. Providing smooth transitions between list and detailed content was the crux of navigating the site. Fluid slime hovers, blurred and smoothed scrolls, metaball masked feature images, ghost-like displacement fade-outs and day/night inversions all provide inventive but functional navigational features.

Technical features: Displacement masking and distortion effects. Part of the challenge in executing these features is building an exceptional experience while maintaining users’ interests and a performing browser experience. Also, Pixi.js is used for many of the rich technical features on the site. We used Server & Ops for cloud hosting and CDN Solutions with CI pipelines for rapid development. For backend, we used Python, Django and REST. For frontend, we used Javascript, Typescript, Angular, HTML and CSS.