Thrill-chasing for the keyboard crowd (or how to make the best 404 page ever)

  • Allison House Allison House

I have this really vivid memory from the early 90's. I'm a toddler, sitting at the dining table with my parents. It's nighttime. We've just finished supper. My dad is talking to me.

"Go look in my office," he says, smiling. There's a hint of mischief in his voice.

I wobble unsteadily down the hallway, excited, until I reach the office door. It's unlatched, so I push it open just enough to see inside.

On the far side of the room, a CRT monitor glimmers in the dark. My stomach flutters. There's an image moving on the screen.

Flying through space screensaver
This is the 'Starfield' screensaver that appeared in Windows 3.1. It was reincarnated in subsequent versions of Windows as 'Starfield Simulation' and 'Flying Through Space'.

That was my first encounter with a screensaver. It was also my first encounter with looping animation and technology as a medium for art. I'll never forget that gut-level thrill.

Other events that rocked my early years include solving cleverly-disguised logic problems in Rocky's Boots (age 6), erasing the boot drive on my first hand-me-down computer (age 10), and chatting for hours with ELIZA (age 11).

By the time I was a teenager, I was pretty sure all things were possible through the command line.


404 Not Found by Allison House (http://allison.house/404)

I’ve spent most of my career designing digital products, trying to imbue software with warmth, meaning, and a human-made aesthetic.

As much as I love technology, I find myself growing away from the industry’s dominant culture and returning to childhood fixations. 404 Not Found deliberately explores a computer-made aesthetic instead.

You can see it here.

Artifacts from the digital medium trigger a specific nostalgia for me. It's a precious, thrilling, and weird feeling that emerged during my summer-long affair with GIF work.

Effulgent Artifact by Allison House (http://allison.house) Volumetric Drive-by by Allison House (http://allison.house)
Over the summer, most of my personal work explored nostalgia and atmosphere through the GIF medium. These are two of my GIFs, Effulgent Artifact and Volumetric Drive-by.

When summer was over, I hit the road to develop and teach a course on product design with Metis and thoughtbot. It's been a blast—I pretty much live for this stuff—but I'm bouncing between hotels, corporate housing, and crashing with family.

Side projects help me feel balanced when I'm traveling. It's tough to work on 3D without an external display, but code is relatively easy to manage on a laptop screen.

Starting with a blank canvas

My creatively-motivated coding projects usually begin with a blank document. It forces me to actively put brush to canvas (or keystroke to text editor, I guess) before I can get distracted with technical details around frameworks or organization.

Abstract 01 by Allison House
Whether I'm coding or painting an abstract (like this one, Abstract 01), I like to start priming my canvas before worrying about what tools to use.

For example, on /fun, I never set up external stylesheets or image directories or any of that noise. Those are just a bunch of dumb barriers to getting started and busting it out.

So that's how I started out on 404 Not Found. Just jamming on some inline CSS, adding structure as needed, and getting deep into the ecstasy of technology.

WIP of 404 Not Found by Allison House
I experimented with aliasing, flickering, and glitching early in the development process.

Making conversation

From there, I started working on the story.

Matt Boldt's Typed.js plugin for jQuery did most of the heavy lifting on delivery. It's a rad jQuery plugin that simulates typing.

It wasn't exactly designed for line-by-line pauses, but turns out Matt is a really good maintainer. I pinged him on a Saturday night...

...and was surprised when he responded right away!

By Sunday, it was patched up and ready for my expressive pacing, breaks, and pauses.

With the technical stuff out of the way, I grabbed hourly ranges and assigned them to words like "morning" or "afternoon" or "evening".

1 if ((hourOfDay >= 4) && (hourOfDay <= 11)) {
2   timeOfDay = "morning";
3 } else if ((hourOfDay >= 12) && (hourOfDay <= 16)) {
4   timeOfDay = "afternoon";
5 } else { 
6   timeOfDay = "evening";
7 }

Paired with a day of the week and slow reveal, it brought an element of immediacy and surprise to the experience.

Enjoy the rest of your .

Heh.

Making Tweedy's “Summer Noon” video (or how I went from designing apps to directing a music video)

  • Allison House Allison House

For the past few weeks, I’ve spent every waking minute on a project that's pushed me beyond so many limits—speed, stamina, creativity, technical ability.

It's not a landing page, mobile app, consumer web product, or anything else you may know me for. I independently directed and animated the music video for Tweedy’s first single, "Summer Noon".

Tweedy ft. House! The music video for Tweedy's "Summer Noon".

It’s an incredible tune. I’ve listened to it about a hundred times and STILL love it and sing along. This is the legendary Jeff Tweedy’s new band with his son and drummer, Spencer Tweedy. They're on tour right now and the debut album, Sukierae, is out in September.

For those new to my work, I’m not a director, animator, or video editor. I've actually spent the last five years designing websites and apps (like Dropbox, Codecademy).

I started experimenting with 3D on the side a couple months ago and have been publishing everything I've learned along the way.

'Limbo' by Allison House
Before this project, "Limbo" was the most complex scene I'd built in 3D. It's static and took me about a week.

When Tweedy asked me to make the video for "Summer Noon", I briefly considered my limitations:

  • I'd just started learning 3D
  • I didn't know how to edit video
  • I didn't own any video editing software
  • The longest animation I'd ever made was 2 seconds
  • The deadline was aggressive (~3 weeks)

And yet, none of those things really mattered. This is the kind of project I daydream about; an opportunity to bring heart and narrative into my work. Plus, um, TWEEDY!

I had to do it. I took a deep breath, saddled up, and told 'em heck yes.

Phase 1: Ideating and Prototyping

When Tweedy's management shared the track with me, I was instantly hooked on the vibe. They left it open for me to set the creative direction and kick out concepts, so I put the track on repeat and sketched around 100 concepts in thumbnails.

Thumbnail sketches of concepts for 'Summer Noon'
Generating lots and lots of concepts in thumbnail sketches.

I also collected references and imagery in a big mood board.

Collection of references, inspiration, and imagery for 'Summer Noon'
Spencer gave me Tame Impala's Lonerism cover (top left) as a reference for a deep blue sky color.

Being new to the craft, a lot of the up-front work was in understanding what was achievable. I usually build prototypes to validate my ideas, so I picked a couple concepts and hacked them together in Cinema 4D.

The winning concept was a single balloon weaving through colorful, hazy, faceted landscapes.

Early concept for 'Summer Noon' Early concept for 'Summer Noon'
These were the first concepts for "Summer Noon".

Spencer suggested the landscapes were "lonely" and that really resonated with me. I put together more prototypes with a certain emptiness in mind.

Early concept for 'Summer Noon'Early concept for 'Summer Noon' Early concept for 'Summer Noon'Early concept for 'Summer Noon'
More early concepts for "Summer Noon". I ended up cutting the ground view and bringing a bright, clear sky into the lake scene.

Phase 2: Building and Animating Scenes

The Animator's Survival Kit
There were a couple books that really helped me out: The Animator's Survival Kit and Cinematic Storytelling.

I looped between building scenes, storyboarding, animating, rendering, and editing them to the track as quickly as possible in a week-long sprint. My priority was getting everything done on time, even if imperfect.

On my best day, I built and animated four (!) complete scenes. The final tally was 14 scenes, rendered on two machines over 112 cumulative hours.

Here's a look at how I set up the scenes. There's a lot of neat fakery with distance and perspective. I built each environment, set up the shot, then animated the balloon.

Making of 'Summer Noon'Making of 'Summer Noon' Making of 'Summer Noon'Making of 'Summer Noon' Making of 'Summer Noon'Making of 'Summer Noon'
Overhead views (left) of the scenes alongside the camera views (right). I'm using a modified lighting rig from GSG.

I couldn't really sleep during this phase. I was anxious about wasting time, knowing relentlessness would make or break the project. I'd often wake up in the middle of the night, do a few jumping jacks, and get back to it. That may sound intense, but raw determination was a critical part of the process.

Phase 3: Revisions and Final Cut

I worked quickly enough to fit in a two-day cycle for revisions and detail work at the end. Some scenes received major overhauls, like this one.

Making of 'Summer Noon' Making of 'Summer Noon'
Before and after revising the "going up" scene.

I ended up re-rendering everything in the final hours, then finished editing with my 30-day trial of Adobe Premiere. (Ha!) I'd been cutting footage together the entire time, so the bulk of the work was color correction.

Making of 'Summer Noon'Making of 'Summer Noon' Making of 'Summer Noon'Making of 'Summer Noon'
Before and after color correcting the footage.

That was it! I rendered out the final cut, did a little happy dance, and sent the official music video for "Summer Noon" off to the gang.


Bringing my design process into an unexpected medium really tested the sturdiness of my approach. My biggest takeaway from this experience? Grit is a trait worth cultivating.

Beginners often hear fake it 'til you make it, but scrappiness and transparency count for a heck of a lot. My mantra was whatever it takes. With an iterative approach and non-stop communication, newness wasn't a stumbling block—it was just another creative problem to solve along the way.

Knocking out my to-do list
Line 'em up and knock 'em down.

That's the story of my wild ride with Tweedy! They were fantastic to work with and I'm so grateful to them for supporting my vision. A very special thanks goes out to Spencer and Ben.

You can watch "Summer Noon" and pre-order Tweedy's Sukierae over at wilcoworld.net. If you enjoyed this post, keep up with my work on Twitter and Tumblr.