It belongs in a museum

October 23, 2023

Introducing the Museum: two decades of my screenshots, now searchable. It’s built with Astro, Svelte and Xata. I’m planning a follow up post with build details for those that might want to build their own.

---

One of my favorite movie scenes is the closing shot of Raiders of the Lost Ark, where the titular McGuffin ends up not in a museum, but an indiscreet warehouse to be lost yet again. William Hootkins, who Star Wars fans will remember as “Porkins”, delivers the famous assurance to our hero that “Top Men” are looking after it. Nothing stays special when you zoom the camera far enough back.

Similarly every website I work on as a designer feels important during the gestalt of creation, but then immediately fades into obscurity once delivered. Time is not friendly to us web designers, and the embarrassment of old work is so common that design portfolios are carefully curated to only show selective peaks of a design, typically right before those perfect pixels were destroyed by the maddening irregularity of a browser. I can fault this style of portfolio intractability no more than I can any Greatest Hits record. That said, when we see only the best a person has to offer, we don’t get much insight into the process of how they got there. Every life, truncated to the just the hits, is by nature a pinnacle. I’m more interested in the journey up the slope.

Real web design is messy. You experiment and try to fill a literal box, nesting other smaller boxes of various colors inside. Typically you also craft a concise, descriptive sentence of what the box might do if you click it. Good design is only achievable through the support of great writing. Once invention strikes, a flow begins and well… this isn’t a post about flow, but I’m definitely a streaky servant of that gospel.

For me designs travel from prototype to code fairly quick, and it’s at this point where my work fractures from static representation to infinite experimentation. Interface design is unique in that it often involves state, and the transition between these states is hard to mimic with prototype tools. I’ve always found it better to work that last 80% of a design in code. The only record I have of the tiny fissures of creativity that emerge are the screenshots I took along the way. The brief rest stops exist to document achievement or error. They are the exact moment I paused and decided feedback was warranted. “What do you think of this?”.

Since 2010 I’ve taken over 17,000 screenshots. That seems like a lot, but averages to around 6-7 a day when you take out weekends and holidays. By proxy that means I’m a social person and ask for feedback often. Most designers I work with keep their work a little more guarded and wait for a tighter, big reveal. Every person works different, but I never understood that level of caution. Maybe it’s that I can’t take the agony of big disappointment, and instead like to spread it over daily paper cuts that hurt less. It could be that the sheer volume of addressable design I create is a strategy to stun those around me into submission once the final product lands. By that time they’ve already seen everything.

The majority of these vignettes document my failure more than my triumph. Put more simply, they highlight bugs I notice, and the times things didn’t seem quite right in what I was building. I am a tenacious tester, and coworkers either love me or hate me for my ability to poke at the fringe, testing every scenario to see how I can break things. This category of screens almost always includes commentary and some manor of arrow.

Of the full museum catalog, I’ve chosen to publish the majority (nearly 9,000 total) publicly. This involved me manually viewing each image for content over several weeks. I excluded content that included:

• Personal conversation or email correspondence
• Anything that would embarrass someone other than me
• My concepts for iRacing, which might spurn the Internet’s ire
• Errors that don’t tell a story (lots of terminal errors!)
• Recent work that has not yet released

Even under those restrictions I’ve produced enough dumb shit that you’ll likely dig up something interesting in between accessible calendar components (looks like I’ve built 4 or 5 from scratch over the years). My personal favorite dumb shit is my “Heroes of the Internet” trading cards. Based off the 1983 TOPPS baseball cards I collected as a kid, we gave these “digital collectibles” (back in 2010!) out to early subscribers of Whiskey Media. I thought I’d only need to make a few dozen. By the end of the first day we’d signed up 5,000 members and I decided to keep it to the original set. The “Big Red Phone” was a Batman-style physical phone we installed in the basement that members could call in to. The conversations were surprisingly friendly and sometimes my sister (who didn’t work there) would give relationship advice to lonely nerds. In today’s corporate, everything is equally safe and sterile world, this kind of fun would never have materialized. I admit that I take less risks with design as I age.

Surveying the entirety of the screens I’m surprised how much animation I recorded. At Elastic as a hiring manager it was controversial to list animation as a bullet point in the job description. Looking through my history, and thinking about all the people I’ve worked with over the years, the better designers all had a keen sense of movement. Pete Lada was the Design lead at Guidebook and the best I knew at animation. I remember him constantly challenging me to make our work smoother. Around this time I picked up a trick from Anand Sharma that the best way to test animation was to simply record a video and play it back frame by frame. Soon this became a daily habit, and it’s why there are so many 5-20 second videos in my catalog starting from around 2015.

The catalog captures not just design, but the tools I used along the way to build. Obvious progressions from Photoshop to Sketch to Figma are apparent, as are some neat experiments with Framer to try and pull Elastic’s React library into that tool. I’m alltogether pessimistic on prototyping and what is more obvious is how little I used those tools after 2018. Once React became mainstream, the design world fractured and the barrier to entry for designers to code because more difficult. I stuck with it and it’s fun to see the various editor setups I moved to over time. I can see a shift from TextMate to Sublime to MacVim to NeoVim, with every combination of plugins and themes along the way. Nearing a creative madness, in 2021 I began to start building my own themes in Linux.

Every screen invokes a memory and takes me back to a group of friends I collaborated with along the way. The work shown then is not just mine, but a mixed-up soup of our collective team struggles to build something cool. My hope is that old friends find these pages and feel as nostalgic as I do. The fun was building these sites with them, not necessarily releasing them to the public, which was a matter of course.

General credits to the visual design work in the museum are hard to reconcile. I take screenshots of other people’s work nearly as often as my own and it would be impossible to separate them. Here’s a quick summary of the credits I think are important.

• MP3.com (2004) and TV.com (2005) I acted under the tutelage of Stephen Blake.
• Most of 2004-2014 I worked alongside Mike Horn on the front of the front end.
• The Whiskey Media properties (2007-2013) I designed along with Alexis Gallisa, and you’ll notice the designs improved significantly once he joined.
• Guidebook (2015-2017) was a collaboration with Pete Lada and Guillermo Mont.
• Elastic, Kibana and EUI (2017-2022) eventually involved a design team in the dozens. Caroline Horn, Gareth Jones, and Ryan Keairns early contributions there set the overall tone.
• Xata (2023) shows off collaborations with Elizabet Oliviera, who also contributed to many designs at Elastic.

There are so many eras of my career it’s impossible to highlight anything in particular. Instead scroll around and use my project as inspiration to take more screenshots of your work. There are plenty of great options out there. Around 2018 I decided to create my own tooling to make the process a little more secure. For those interested, I’m working on a follow up blog and open source repo that will help you build your own. Here’s a preview.