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.
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.
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.
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.
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.
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.
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.
My name’s Kyle. I’m a designer and coder. I’m a sneakerhead and a font nerd. I organize my closet by color. I was born on a Friday. I’ve been to the emergency room in every place I’ve ever lived.
I live in Richmond, VA and am the senior interactive designer for nclud in Washington, DC. You should check us out — we’re nice people and we do great work.
I write about design, code, technology, advertising, and creativity on Medium. I post weekly music — both new and old — on This Week's Playlist.
Other than that, I post random thoughts on Twitter, random things on Tumblr, photos on Instagram, code and projects on Github, and designs in progress on Dribbble.
Do you have an awesome project that needs design or code? I’m available for limited freelance work, so email me.