What Distance Running Teaches Us About Web Design

Posted on Mar 04, 2016 in Design
jon portrait
Jon White
UI Design Engineer

Two unplanned firsts happened to me in 2003: I started running, and I started doing web design for a living. Both began as just-for-the-hell-of-it larks, but have, over the intervening 13 years, grown to encompass most of who I am as a person: vocationally, physically, mentally, and socially. They also form a virtuous cycle: if you catch me doing one of these, I’m really thinking about the other.

Not every web designer is a runner, but it seems to me that most middle-to-long-distance runners could hack it as a web designer. All the poetic, aspirational, McDougall rhetoric about running is true, but it’s also an immensely mental act. You’re investing a truckload of emotional (dare I say creative) heft while your left brain is crunching the data on sweat, mood, pace, and distance. Your whole self shows up, and it invariably feels like a production.

Web design is no different. And so—from the subjective, your-mileage-may-vary brain of one person who spends way too long thinking about this stuff—here’s how what-I’ve-learned-by-running affirms what-I’ve-learned-about-web-design.

1. Anticipate all the stuff that will go wrong.

I run in Seattle, a city that grants a zero-percent certainty about weather. Fifteen-minute-increment forecasts are lies; hourly forecasts are damned lies. As such, choosing my running gear requires a nihilist lack of predictability. And even when I think I know what I’m doing, I’m still humbled by reality: glasses fog up, Petzyl batteries die, gloves won’t stop my fingers from going numb, and my apartment key flies out of a pocket that was specifically designed to hold apartment keys. (And don’t get me started on that most delicate and unpredictable of variables: the human gastrointestinal system.)

But you learn to anticipate this stuff, and eventually you don’t just run in spite of it, you run in humbled embrace of it. The web’s unpredictability works the same way.

Thousands of designers before me have made this same point, but it can’t be repeated enough: your PSD or Sketch canvas isn’t a browser, and the decisions you’re making there only represent one set of (fake) circumstances. Browsers are fluid, and people are imperfect, and uploadable content comes in a stomach-churning variety of awfulness.

In practice, this means constantly adjudicating your design decisions to their logical/terrible conclusions, and still arriving at a design that sings. The pitfalls I’ve seen most often include:

  • Scaling-and-cropping some environmental/background imagery so that it terminates at your canvas’s horizontal edges. (Or, “The Squarespace Header Look.”) The sobering truth is that there is nothing, short of financial modesty, preventing your users from using this site, full-screen, on a 27″ Cinema Display—so make sure you’ve got a coherent plan for what happens then.
  • So you’ve delineated color fields, column-boundaries, and decorated-background regions? Great! Say, would any of those happen to look appropriately-spaced-out because a user’s name is handsomely, comfortably typeset within it? Too bad. In the cold reality of the web, “Smith” is functionally identical to “McGillicutty-Thørndike,” and if that breaks your column, then you’ve got a problem.
  • If you’ve got a system where variable elements exist in horizontal relationship to each other — pickers, button sets, tabs, input fields, little indicator lights, whatever— then you’ve got to simulate a state where their worst, most egregious-case-scenario is played out. Every conceivable tab is present; every character-dynamic field is populated to its limit. Does it break? Do you have a plan for when it breaks? Horizontal relationships are dastardly stuff in interface & systems design, and should be treated with feared reverence.

2. Be nakedly honest with yourself.

Americans didn’t start recreational running until the 1970s. It didn’t become big business until the ‘90s, and it didn’t explode financially until recently. You can see this in the advertising, media, and aspirational portrayals of runners over the decades. When Garmin or Nike or Apple or Gatorade depict “runners” today, they’re gods. Flawlessly-toned, schedule-carefree, square-jawed models going out for an (eerily sweat-free) jog outside their Embarcadero condo. They’re gorgeous.

Earlier runners, by contrast, were dorks. Just total social dumbbells, bopping to their own beat, taking the early experimental leaps into figuring out how far people could run, and how tight the BAA qualification times could be, and how to carry a cassette Walkman without their palm-sweat damaging the wiring within.

Folks today who see those ridiculous ads before they try running eventually realize what those ‘70s pioneers knew all along: Once you start pushing yourself into unfamiliar mileage, running is nakedly personal. Planning for a long run, much less a marathon, demands a level of self-knowledge comparable only to a therapy session. I need to anticipate when I’ll burn out from sugar, when I’ll burn out from mood, when I’ll get thirsty, when I’ll get lonely, and when I’ll need a laugh. I know that I don’t like the taste of fruit-flavored gels before mile 10, and that I don’t like the sound of over-four-minute-long-songs after mile 15. There are favorite songs that I avoid listening to during the year because I save them for the seasonal high-teens of training mileage.

Unguarded self-honesty is a requirement among web designers.

I’m one of those fiscal-arsonist idiots who attended Art School. For those who haven’t, Art School costs a floating-garbage-island-full of money (which I’ll still be paying off long after the nuclear heat-death of the Earth). But it was—at least for me—worth it because I learned how to self-crit. Knowing how to be constructively critical of your own incremental work is a nightmarishly difficult skill, but one that—once honed—will make you ten times the designer you were before.

In short, this means that your work should end up unimpeachably good. But it’s hard.

We know the progress of our own PSDs better than anyone. We know how we arrived at certain decisions, and why we cheated one image to fit a weird ratio, and of the political significance of certain phrases. We get so familiar to the sounds of our own internal dialogue that it becomes almost impossible, after a point, to assess the work with fresh, untrained eyes. If you catch yourself doing that silent, unconscious reasoning—“this layout looks great after you sit with it for a few seconds, and after you see what I’m doing with this thing over here”—then it’s still incomplete. Better for you to catch this now than your boss or your client later.

3. Work within limitations.

In addition to making me overthink energy gels and playlists, these marathon-training long-runs force me to overthink logistics.

Privately dealing with the denouement of a pair of suddenly-broken headphones midway through the 2015 Twin Cities Marathon.

Despite Apple’s promotional photography touting the ostensible benefits of their Watch, going on a long run with a smartphone sucks. (Me, I’ve bricked two from armband-sweat. Gross, sure, but it’s also a financial kick in the face.) There’s the physical-burden angle, too: an iPod Shuffle weighs 8.7% as much as an iPhone 6S, and—speaking at least for mine—they refuse to die. So, you learn to carry that instead, consolidate pockets so as to ditch the armband, slap on a cheap GPS watch, and make the associated compromises. My playlist has gotta be locked down, I can only bring exactly which gels I’ll need, and if I get hurt along the way, then I’ll ask a bicyclist for help or learn how to live off of berries.

These limitations, perhaps inversely, make the run better. I’ve got fewer options, so my mind narrows in on the task at hand. There’s no chance of getting a call, or a text, or eating a sandwich, or buying a coffee, or even hailing an Uber (or ambulance) if I bite it. The only way out is through.

Similarly: ever work alongside a web designer who’s got a background in screenprinting? They’re fantastic. Clever as hell. Launch any GUI program, and you’ve got unlimited layers upon-which to render millions of colors across 100 levels of opacity. Screenprinters, meanwhile, know the associated labor/money/time cost involved in adding one color to a composition. That kind of experience rewires your design brain, and brings a measure of versatility and economy—no matter what medium you’re working in.

Then there are fonts.

In 2008 I saw Jason Santa Maria’s talk at AEA San Francisco. These were the days when WOFF and EOF were experimental, hushed-whispers-only dreams, and TypeKit was a fantasy. I was working for an agency who consistently turned out great work using what all-of-us only had access to at the time: Trebuchet, Times, Georgia, Verdana, Arial. In this—a season when web designers’ imaginations were running past where clients’ system fonts could contain—he delivered a fantastic call-to-arms that’s stayed with me since. He reminded us that Guttenberg’s generation had to make do with one font, and ended up producing some of the most revolutionary mass-audience typography in world history. If we couldn’t make beautiful, effective, unique works with core-system fonts, we don’t belong in the business. (My words, not Jason’s.)

Limitations make us better.

4. Tap other people.

Nothing I’ve done as a runner—my first run, my first race, my first marathon—was my own idea. Along the way, it was a series of patient, prodding, compassionate friends who convinced me (though I thought they were insane) to give it a shot. Better still is that after they got me going, it’s been their subjective stories that help me make sense of my own progress. Every time I run, I’m not just mining my past experience; I’m subconsciously sifting through the recounted stories of my friends. I’m thinking about how Doug sees running as a source of joy, or of Matthew's lace-up-and-go informality, or how Mike’s multiple Boston appearances fit into his larger spirituality, or of Jared's love for its sheer athleticism. I’ve got my own weird motives for why I run, but other runners’ philosophies invariably seep into my own.

Just as running is a strange symbiosis of individual talent and peer influence, design—especially web design—can’t be a solo journey. Your battery is going to drain if you try.

Whatever it takes: Put yourself near other designers who you trust. If you’re working alone or remote, even jumping on a quick let-me-show-you-what-I’m-working-on Slack call will do the trick. This is a dizzyingly complicated work that we’re doing, but we’re each stuck with only one brain. We miss things—I miss things, constantly—that others can catch. For crits, for venting, for thinking-out-loud, for praising; we’re social animals, and it reflects in the quality—and the fun—of our work.

A word, though, about what I mean here: I really am talking about interaction, not inspiration. Especially if you’re just getting started, either stay entirely away from those “design gallery” feeds, or only browse them after your first directions have been knocked out. It takes a long time to develop the I-won’t-plagiarize,-not-even-subconsciously muscle. Unfortunately, we’ve blurred the lines between “inspiration,” “appropriation,” and “aggregation” to such a pitiful degree by 2016 that it’s more necessary than ever that we gut-check—and peer-check—the originality of our work.

5. Have a source of incentives-and-inspiration other than Likes.

Battling rain, fatigue, and the creeping shock of glycogen loss at the 2015 Boston Marathon.

Ultimately, running is for you. It’s yours. Cross over that first stupid mile—after your watch has synced, and you’ve left the office, and you’ve gotten rained on, and you’ve acclimated to the spaced-out drumbeat of your own shoes—and you’ll remember, every single time, that each run is a gift. This is uncomplicatedly, entirely to your benefit. These are your private demons that you’re shaking off, your life nuisances to which you’re bringing clarity, and your self-esteem that you’re bolstering. Running is—blessedly—private.

Which is, these days, excruciatingly hard for new runners to make sense of, thanks to social media. Until you’ve had running de-romanticized—until you’ve done the unsexy work of steeping yourself in its life-giving, messy rawness—the temptation to solicit liminal, quick-dopamine-drip internet validation will feel absurdly strong. But it just doesn’t work. We homo sapiens were cursed with imperfect connections between our primate emotions and lightning-advanced brains, which means that those Facebook and Instagram likes on your look-at-the-run-I-just-did post—or the look-at-the-run-I’m-about-to-run post—have a direct shortcut to your heart. And that electricity feels, in short order, so much more immediate than the harder, more durable peace that running itself brings. You’ve got to keep your incentives bound to the experience itself, not to an algorithmic array of little thumbs-up icons.

Suffice it to say, web design wants-and-rewards our personal selves just as much as running does. And for that reason, it’s incumbent on us to avoid the cheap thrills of “process likes.” Case studies, portfolio updates, post-launch celebratory links: go for it! But in the brain-churning, coffee-swilling, white-board-agonizing, client-wrestling messiness of the hard stuff, keep the camera pocketed. Our attention spans operate on a hair-trigger—which makes it prohibitively hard to focus on the client’s site’s content hierarchy while you’re also trying to artisanally fine-tune the placement of your espresso next so it looks good next to that shot of your sketchbook.

6. Beer is useful and good.

This one’s self-explanatory. Running makes us thirsty, hot, and depletes us of salt. Beer after a run is useful and good. Further: creative-intellectual work requires a measure of stresslessness and willpower; alcohol cures the former while sugar boosts the latter. Drinking beer at your desk is useful and good. Don’t overthink this one.


Jon White is Moby’s UI Design Engineer. If you’re a runner, swimmer, or cyclist, follow him on Strava (and he’ll even follow you back). If you see him on the Burke-Gilman, he will gladly reciprocate all high fives.

Arduino Doorbell Messenger Do More With Sphero's BB-8 - Part One