landingpages_hero@2x

NPM Enterprise Product Page

NPM Landing Pages

NPM Landing Pages

NPM Landing Pages

NPM Landing Pages

CATEGORY → UI/UX

CATEGORY → UI/UX

CATEGORY → UI/UX

CATEGORY → UI/UX

CATEGORY → UI/UX

For the launch of their flagship product NPM Enterprise, Filament developed a completely custom web, illustration, and animation approach to communicate the platform's benefits to JavaScript developers worldwide. 

NPM’s Enterprise and Orgs products allow teams to share, discover, and reuse code within a private registry. These landing pages detail the benefits of each.

NPM’s Enterprise and Orgs products allow teams to share, discover, and reuse code within a private registry. These landing pages detail the benefits of each.

NPM’s Enterprise and Orgs products allow teams to share, discover, and reuse code within a private registry. These landing pages detail the benefits of each.

NPM’s Enterprise and Orgs products allow teams to share, discover, and reuse code within a private registry. These landing pages detail the benefits of each.

Because NPM is currently transitioning its visual identity, a major goal of the page was to utilize NPM's most up-to-date brand elements in conjunction with the Enterprise product launch. To do this, care was taken to ensure that the newest NPM brand guidelines were incorporated effectively into the design of the page. Additionally, new illustrations and animations were created to expand and elaborate on the company's visual vocabulary. 

NPM Command Line Interface Animation

Developers using NPM employ a command line interface to install packages and software on a computer. This animation tells the story of a user installing not just a simple node package, but NPM's Enterprise itself. As the installation unfolds, the three benefits of the Enterprise product are highlighted: security, collaboration, and compliance.

It was important that the technical details of the animation appear credible to the programmers and developers in NPM's audience, so the code of the animation follows the authentic syntax used in real command line interfaces.

This portion of the page was art directed by Filament and
animated by Jase Hueser. 

Like what you’re seeing? Let’s get in touch. 

Like what you’re seeing? Let’s get in touch. 

Like what you’re seeing? Let’s get in touch. 

Like what you’re seeing? Let’s get in touch.