2016 × nclud Design

Since its initial release in 1993, DOOM has been one of the most well-known video game series, influencing hundreds (if not thousands) of games with its futuristic sci-fi setting, grunting space marine protagonist, terrifying waves of demonic enemies, and over the top bloody violence. Video game fans everywhere still remember typing IDDQD and IDKFA on their keyboards to unlock endless secrets and prevent another fiery death. But with almost twelve years since the last DOOM, how does Bethesda Softworks show off the new game on the verge of its launch (as well as make fans champ at the bit to play it)? First, they released an open beta so that everyone could get a taste of the mayhem and frenetic violence. Next, they brought nclud onto the team to design a landing page to show off all the chaos of DOOM. Our goal was to tell a story for the visitor: start with a dark and mysterious shot of the setting, drawing them into the world, before bringing in the demons, blood, and hyperviolence that the series is known for. Incorporating screenshots, gameplay videos, and the latest news and social media into a fully responsive design, the page served not only to show off the upcoming beta but also the DOOM experience as a whole. With almost two million visitors in the three weeks between going live and the beta start date, an average of over a minute spent on page per user, and 77% of game preorders originating on the beta page, the project outperformed every pre-launch goal and metric. After the success of the beta page, our relationship with the DOOM team continued as we worked with them to redesign and rebuild the site's navigation structure and create the Single-Player Demo landing page.

Development: Ramsay Lanier  ×  User Experience: Joe Chrisman
Single-Player Demo landing page and updated navigation structure. The landing page uses alternate cover art and screenshots (along with an easter egg for the classic game art) to entice visitors to download the demo.
“Descent Into Hell” homepage concept. The design uses images, interactive sliders, and video to tell a linear story, drawing visitors in and inviting them to explore the chaos and madness of DOOM.
Interactive module concepts to highlight weapons and demons. Using screenshots and gameplay videos, these sections could easily be incorporated into existing site designs & layouts.
Concepts for incorporating motion into the page design — “Demonic Disturbance” page loading transitions & “Interference” logo animations.

Star Wars Galaxy.

2015 × nclud Design / Code Visit Star Wars Galaxy

At nclud, we're some of the biggest Star Wars geeks around — from posters on the office walls (Darth Vader and stormtroopers, of course) to roaming LEGO R2D2 droids. When the trailer for Episode VII: The Force Awakens came out, we all huddled around the office television to watch it over and over (and over). We immediately thought: what can we build to share our love of this with the world? With so many epic stories being told in a galaxy far, far away, we decided only something that truly immersed the visitor in the cinematic universe would do. Starting with the Star Wars API, a comprehensive reference point for basically every planet, starship, and character from the movies (and extended universe), we started fleshing out the concept: a fully three-dimensional intergalactic playground, full of swooping camera motions and dramatic effects. For design, we avoided the cliché of sterile colors and techno fonts, instead turning to rich golds, beautiful serif typefaces, and the original 1977 slanted Star Wars logo and Hildebrandt concept paintings. At the same time, we also tackled something totally new for us: sound design. John Williams’s score for Star Wars is as iconic as Luke's lightsaber, so it only seemed right to incorporate that into the experience (as well as R2D2’s lovable blips, beeps, and bloops). Launching the same week as “Force Friday” (a marketing push from Disney and Lucasfilm), Star Wars Galaxy quickly saw over a hundred thousand visitors in addition to media coverage from Wired, io9, Gizmodo, The Mary Sue, ScreenCrush, and a slew of international newspapers and blogs. The site was an honoree for a 2015 Webby Award in the Advertising & Media / Media & Entertainment category, was awarded CSS Design Awards Website of the Day, and landed on the front page of Product Hunt. A fully responsive static site, Star Wars Galaxy was built using Three.js, WebGL, Gulp, SASS, and integrated the Star Wars API.

Visit Star Wars Galaxy


2015 × nclud Design / Code / Identity Visit nclud

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. As part of the rebrand, we needed the new website to be bold, unique, different — a site that could stand head and shoulders above the competition. On the design side, we incorporated the 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. 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 old terminal screen, and built out a static template and integration system (to avoid tying ourselves to an unwieldy content management system). The final component was the copy — creating a tone of voice that's 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 2015 Webby Award in the Website / Professional Services category and was awarded CSS Design Awards Website of the Day. A fully responsive static site, nclud was built using Three.js, WebGL, Gulp, and SASS.

Additional Identity Design: Brooke Hollabaugh, Courtney Leonard, John Salmon  ×  Additional Development: Ramsay Lanier  ×  User Experience: Joe Chrisman  ×  Copywriting: Kwame DeRoché Visit nclud
Early brand & identity explorations. A large number of logos, iconography, imagery, and typefaces were worked through and presented before landing on the final version.

NBC Sports.

2015 × nclud Design / Code

Every company likes to think of their project as “the big game,” but only one can truly lay claim to THE Super Bowl. While NBC Sports already had massive numbers of fans on Facebook and Twitter, they were looking to conquer another social media platform in the lead-up to the game: Tumblr. The network needed something eye-catching and beautiful that was also rock solid, fast, and responsive across desktop and tablet platforms in order to share content and interact with fans. We used JavaScript particle effects in conjunction with SVG objects and CSS animations to create a unique, smooth, and compelling animation that would just work everywhere (even on underpowered tablets). In addition, we built out a fully custom responsive grid and lightbox interaction to provide the best possible visual experience for visitors that also allowed for maximum sharing and social exposure. During the game itself, the site was promoted on air as a “second-screen experience,” serving up the television ads as they went live — and we made sure that those videos became the center of attention, presented in a huge and beautiful manner. With media coverage on CNN, Huffington Post, Reuters, Variety, AdWeek, and Advertising Age, as well as over 38 million unique page views in under twenty-four hours, the site was an immense success, surpassing every expectation. It was built using Gulp and SASS on the Tumblr backend.

Additional Development: Ramsay Lanier

World Of X.

2015 Design / Code

Growing up, the mutant outcast heroes of Marvel Comics known as the X-Men struck a personal chord with me, leading to immense collections of action figures, comic books, and a probably unhealthy Saturday morning cartoon addiction just to catch up with the latest adventures of Wolverine and friends. When Marvel announced an API with references to their entire history of publishing, it was time to turn that childhood obsession into something amazing. Initially conceived as a quick experiment to combine the Marvel API, the Google Maps API, and the Meteor JavaScript platform, World Of X quickly became an expansive and comprehensive guide to almost every location in which the X-Men have lived and battled. Based on a fully interactive map, the site allows visitors to explore these locations with large comic book imagery, a full description of the location and its relevance to the X-Men, and a link to every comic series in which the location has played a part. World Of X is fully responsive across all sizes and devices (even including a full-screen big picture mode) and was built using SASS on the Meteor platform with Marvel and Google Maps API integration.

This Week's Playlist.

2015 Design / Code / Identity Visit This Week's Playlist

With so much new music being released every week, how does someone find the best of it without constantly visiting blogs or relying on Pandora or Spotify to happen upon a song they might like? That was the challenge tackled by This Week's Playlist — every Sunday, a new playlist of ten to twenty songs, curated by myself and a fellow music blog veteran. Intended to be inherently temporary, there is no archive or reference of old playlists or songs. With a mix of all genres and styles, the site uses large beautiful serif type contrasted with an old-school monospace font to introduce listeners to something they might not have heard before (and, hopefully, will dance along to). A static site built with Gulp and SASS, This Week's Playlist is fully responsive so that anyone, anywhere can listen on whatever device or platform they prefer.

Visit This Week's Playlist

Tesla Motors.

2014 × nclud Design / Code

For Tesla Motors in Austin, South By Southwest is the perfect opportunity to market themselves in an innovative way to the many technology-related visitors and residents of the area. In an effort to spread the word and grow their marketing, we created a way to interact with people in an individual way — by allowing them to customize their own Tesla and share it with the world. Planned to be used on iPads on site as well as on the in-dash web browser of a Tesla Model S, the site would let visitors pick their Tesla's color, roof, wheels, and interior before sharing a photo of it on their own Twitter account with the hashtag “#TeslaSXSW.” Tesla Austin would then randomly pick certain users who had posted their customizations to win a day of being driven around South By Southwest in a chauffeured Model S. Unfortunately, due to time constraints, the full design and execution of the promotion was unable to be executed. The responsive site was built using Gulp, SASS, and Compass, with Express and Node.js handling the back-end integration with the Twitter API for social sharing.

Additional Design: Brooke Hollabaugh  ×  Development: Jesse Shawl


2014 Design / Code / Identity

Animated GIFs have become the social language of the internet, used across Reddit, Tumblr, Twitter, emails, and even text messages. While everyone uses them, it's hard for people to make their own — the current tools and applications out there are complicated, slow, and make small, low-quality GIFs. GIFFFFR is a web application that was built to solve that very problem — enter a YouTube video, select your size and time, add a caption, and you have a high quality GIF that can be directly uploaded to various platforms for social sharing. Using modern HTML5 and JavaScript, all of the rendering of the video to GIF is client-side with low server overhead and no back-end processing of the image. GIFFFFR was covered by multiple blogs and online magazines, including FastCo.Labs, Yahoo! Tech, The Wire, and Wired, as well as making the front page of Product Hunt. After launch, GIFFFFR partnered with Giphy, the leading (and most fun) GIF sharing platform on the web to become their primary tool for creating GIFs from videos and uploading directly to Giphy. This partnership also led to an increase in capabilities — users were now able to use not only YouTube videos, but also Vevo, Vimeo, DailyMotion, and a whole list of other sites as their GIF creation source, as well as see these animated GIFs in action when sharing to Twitter and Facebook. Once the partnership was concluded, GIFFFFR was acquired by Giphy to become part of their in-house and public facing GIF creation toolkit. The static site was built using Gulp, SASS, Compass, and PHP.

Peter Venkman's "World of the Psychic" (from Ghostbusters II) made using GIFFFFR.

Mistaken For Strangers.

2013 Design / Code / Identity Visit Mistaken For Strangers

A Washington, DC-based music blog started by myself and two fellow music lovers, Mistaken For Strangers’ tagline is “We like good music. We think you should too.” All identity and branding from the start was done with the intent of conveying the knowledge and love of music that we share. The site was designed to be more like a print magazine than a traditional blog, with a focus on large imagery, great typography, and dynamic high-impact layouts. Mistaken For Strangers was built using SASS and Compass with fully responsive custom templates (including swipe gestures, AJAX loading, and web app capability for mobile) on a WordPress backend.

Visit Mistaken For Strangers

Metro HotCars.

2013 Design / Code

Initially built as a humorous single page site to test out some new CSS3 animations and development techniques, Metro HotCars quickly struck a chord with DC residents fed up with the failings of the local regional transit authority. Exploding overnight based on a single tweet, the site saw over twenty five thousand unique visitors within twenty-four hours and was covered by DCist and the CBS local news. After receiving a cease and desist from the transit authority’s lawyers, the site was quickly redacted, with all references, copyrights, and trademarks scribbled out in the style of confidential documents. This, of course, elicited another round of coverage from the local media, heaping scorn on the transit authority’s handling of the situation. What started as a simple design experiment launched in the middle of the night escalated into an example of how not to respond to social media and satire online. The static site was built using SASS and Compass.