nclud: Challenging the status quo with an innovative brand and web experience.

Platform Web
Role Lead Brand / Design / Code
Year 2015
Agency nclud
Collaborators Brooke Hollabaugh, Courtney Leonard, John Salmon, Joe Chrisman, Kwame DeRoché, Ramsay Lanier

Rebrand and identity design work was done with Illustrator and InDesign. The fully responsive static site was built using JavaScript, Three.js, Seriously.js, WebGL, Velocity.js, Gulp, and Sass.

nclud rebranded and rebuilt by blending design and technology, drawing inspiration from old computer terminals and neon aesthetics to create a bold and edgy brand. The redesigned website features dynamic WebGL effects, glitch transitions, and impactful copy, earning multiple design awards.

Visit site
The convergence of design and technology inspired us to push the limits of a web experience, incorporating dynamic and layered WebGL hover effects and image distortions surrounded by bright neon colors.
Browser controls in the top left Browser controls in the top right

Introduction

Reimagining a brand at the intersection of design and technology.

How do you rebrand and redesign an agency that's been an industry leader for almost twenty years? At nclud, we started from the ground up, going back to our roots as a company: the convergence of design and technology. Taking inspiration from everything from neo-grotesque type design to old computer terminals to the neon lights of Blade Runner, we built a brand designed to push the limits and make people nervous.

Long-form case studies extended the brand past just pretty screens and mockups, diving deep into the full stories behind our work and results. Each case study includes unique designs and interactions to best highlight innovative ideas and features.
Browser controls in the top left Browser controls in the top right

Design

Creating an electric web experience.

As part of the revamp, we needed the new website to be bold, unique, and different — a site that could stand head and shoulders above the competition. On the design side, we incorporated bright ultraviolet purple and cathode greens to make the site feel electric on screen, as well as laying everything out with strong type and imagery in Massimo Vignelli's Swiss three-column grid.

Glitches and page transitions immersed visitors into the brand, elevating the site past a traditional static experience.
Browser controls in the top left Browser controls in the top right

Build

Pushing the limits with groundbreaking technology.

In development, we incorporated WebGL headers to create stunning real-time image effects that react to mouse movement and device orientation, glitch transitions between pages to replicate the effect of a flickering terminal screen, and built out a static template and integration structure (to avoid tying ourselves to an unwieldy content management system).

A look at the nclud offices, festively lit with our new brand colors.
A photo of the nclud team in the office, with dramatic green and purple lighting mirroring the rebrand

Conclusion

Crafting a narrative to drive impact.

The final component was the copy — creating a tone of voice that was plain but strong, speaking with a purpose and cutting through the buzzwords. We wrote long-form case studies in order to tell the full stories behind our work and results, not just to show off pretty screens.

The site was nominated for a 2016 Webby Award in the Website / Professional Services category and was awarded CSS Design Awards Website of the Day.

Related Work