• The return of Serotta, but not their lovely logo

    Thoughts on bicycles and branding and broken hearts

    A classic racing bicycle brand, Serotta, is returning! Known for their innovations in the use of titanium and their unique approach to bike fit, Serottas were a common sight at the front of major races around the world.

    One of my favorite things about them, however, was their beautiful logotype:

    Serotta logo

    Those angular letters look absolutely amazing on a down tube[1].

    Sadly, it looks like they’ve thrown this away. Their new logo is a bold, oblique, square sans-serif. Just like… every other sports company that exists today.

    I’m sad about this not only because the original was such a lovely treatment but also because the modern bike industry is full of truly awful typography. Mass-market and small-batch companies sin in equal measure. This mystifies me a little because a bicycle is such an inherently graceful, elegant machine. The armchair-designer side of me thinks branding one might be easy: it’s already a handsome product. Just put some graceful, elegant lettering on there to match. But so many companies go instead for shouty billboard logos sprayed all over the frame.

    I know, of course, that A) making a bike is a huge engineering challenge and there are so many factors that go into making one that rides well and B) I no doubt sound like an old person grousing about something so superficial. But the designer in me gets a little heartbroken every time I see an otherwise fantastic bicycle with terrible frame decals. The poor thing deserves better.

    A few notable exceptions I’d like to shout out are Mason, Ritchey, Allied, and All-City[2], which all have thoughtful, classic logos and frame graphics— a perfect finishing touch for the thoughtful, classic bikes they sell. Tip of the hat to Trek and Cérvelo, who both do the bold oblique thing but their lettering, at least, is nicely cut and applied.[3]

    1. Which, by the way, is the tube that runs diagonally from the ‘head tube’ (just above the front wheel) to the ‘bottom bracket’ (at the pedal axle). This is traditionally where bike manufacturer apply their logo decals. ↩︎

    2. I especially like that All-City give their bikes fantastic names like “Cosmic Stallion” and “Gorilla Monsoon.” ↩︎

    3. In Cérvelo’s case, their brand was recently facelifted by Canadian design agency Concrete. There’s a nice case study here ↩︎

  • Painting with data

    Tabletop Whale's gorgeous visualization work

    I love the work of Tabletop Whale, also known as Eleanor Lutz. A multi-talented Ph.D. student in biology and also a graphic designer, she uses publicly-available datasets to construct beautiful maps, diagrams, and visualizations.

    Her recent topographic maps of the Moon and Mars remind me of the kind of hand-drawn maps you might find printed on the endpapers of old science-fiction books, but they contain no speculation - no alien cities or dragons. They show, instead, accurate and meticulous snapshots of current human knowledge, assembled from thousands of data points and a lot of Python code[1].

    What especially strikes me about her work is that it depicts enormous complexity and appears to omit no detail, but it’s so visually coherent and carefully crafted that you can understand it at a glance: “that’s a map of the Moon”. But if you stop and look closer, you’ll find that you can stare for hours without exhausting its intricacies.

    Each piece has a clear and simple visual language: a set of rules that apply from the largest feature to the smallest detail. This repetition and consistency makes it easy to learn how to “read” each piece quickly. The design system extends to the lovely typography in her notes and legends at the bottom of many of her compositions. Despite their density, the consistent hierarchy, careful grid formatting, and lovely art-deco display type make them as enjoyable to read as the rest of the maps are to look at.

    Being married to an engineer has given me a lot of opportunities to appreciate the common ground between science, technology, and the visual arts. I suppose that common ground could best be described as a sense of wonder. Artists and scientists alike spend their time looking at things really closely, and I suppose we are each inspired by the realizations that follow: the vastness of the universe, its staggering complexity, its frequent strangeness, and our own smallness in the midst of it all.

    I feel the same sense of wonder when I pore over Tabletop Whale’s work, all the more because it’s equal parts art and science. Each piece is generated from data, but it amounts to quite a bit more than that: it adds up to something that gets the imagination going.

    1. Her code is open-source and, often, she even includes in-depth tutorials for reconstructing her visualizations. ↩︎

  • Brace yourselves for the next Y2K

    While trying to fix a bug on my website, I went digging on the Mozilla Developer Network to get my head around the Javascript Date object a bit better. This bit cracked me up:

    MDN's explanation of the Date object

    MDN is one of the most authoritive and comprehensive developer references on the web, but it is also so dry that I’m honestly not sure if they were kidding here or not.

  • The history of Myst

    Ars Technica just published a wonderful interview with Rand Miller. He was a co-creator (with his brother Robyn) of Myst, a groundbreaking adventure game originally released in the 1990s.

    I’ve never been a great gamer; I really admire the craft and skill of creating games but I rarely seem to have the patience, persistence, or problem-solving skills to truly engage with them in a meaningful way. But that wasn’t the case with Myst.

    I remember the first time I saw it: when I was (maybe?) 8, I went to my Dad’s office with him one day (I can’t remember why). In the evening, as people were heading home and I was following him out the door, I saw a couple of his coworkers gathered around one of their chunky, oyster-grey desktop Macs. One of them was playing the game, while a few others looked over his shoulder. Dad and I stopped to watch a moment and I was glued to the floor, completely transfixed. The landscapes I saw, and the eery, beautiful sound design blew me away. There was a story being told here, but it wasn’t being fed to you in a linear way as a book or film would do. Instead it offered an open space to explore with its own history that you needed to uncover on your own.

    This was my first experience with non-linear narrative, and it made me think about software in a whole new way.

    I’d played plenty of video games before that day, but they’d been mostly limited to platform-jumping, obstacle-avoiding console games. Myst was very different. It had very little animation – owing to technical limitations - but its creators had used this as a design choice, creating this wonderful sense of stillness and quiet throughout the game. You were invited to move around slowly, and take in all the details. The graphics were so rich and beautiful that it was worth stopping to examine every scene. There were no pitfalls or enemies to avoid. You couldn’t really “die” or “fail” because of a mistake (aside from one point near the end of the game). Instead, the challenge was to solve puzzles and connect the dots between all the different elements you encountered in each world. Your reward was, simply, another chapter of the story, and therefore more amazing things to see.

  • Javascript and the mysteries of Async/Await

    “Promises” are a part of the Javascript language that I’ve always had a hard time getting my head around, despite the fact I use them all the time. There’s just something oddly magical about them to me and I’m not sure I’ve ever been completely clear on all the nuances of the Promise object as it has evolved. This article on CSS-Tricks does a really nice job breaking down how the syntax works and what it all means. It’s by Sarah Drasner, who I’d say is one of the best Javascript teachers out there.


  • Yann Philippe's infrared landscapes in Norway

    Photographer Yann Phillipe made this series of landscapes which are rendered using the infrared light spectrum, rather than visible light. The effect is dreamy and almost science-fiction-ey; forests become bright red while blues seem to get cooler.

    I’m not sure if these images were shot on actual infrared film, or if he was using a filter to simulate the effect. As I understand, infrared film stock is really hard to find these days (which is a shame), so my guess is that these images are digital. Either way, they’re gorgeous.

  • A history of the National Parks design system

    Oh dear Lord I want this book.

    I remember those “Helvetica + black stripe” pamphlets and maps from my childhood (esp the Appalachian Trail and Shenandoah ones - which I think are still printed) - I had no idea that they were actually part of a giant design system developed by Massimo Vignelli’s studio.

    This is one of those connecting threads between my hayseed middle-of-nowhere childhood and the supposedly bigger world I’m aware of now that just kind of gives me chills.

    More about Vignelli’s design system for park publications.

  • Google Slides, under the hood

    Interesting: I hit ‘view source’ on a Google Slides project this morning, to try to extract an image someone had uploaded and I noticed that the ‘slide’ code is all inline SVG (which is to say, XML). The image I was looking for turned out to be an <image href="..."></image> tag rather than the <img src="..." /> I expected. You can even download your slide as an SVG file.

    Makes a lot of sense to do it that way, now that I think about it; any given slide is type and graphics positioned in a fixed frame, which is precisely what SVG was built to do. In that sense, Google Slides is really just a big graphical SVG editor.

    That would also help explain why it’s so fast - I’m guessing that when you resize something, the JS is just changing the x/y/w/h coordinates on that particular XML tag, and then the browser does the rest as far as rendering goes.

    I guess I’d just presumed that Google Slides’ power was only possible through some kind of black magic, involving unspeakable things with canvas elements and a million lines of Angular script talking to a thousand AI server farms. But (on the front-end, at least) it looks like pretty straightforward, standards-compliant, remarkably clean HTML5. I’m impressed to see that, and also really drives home to me just how capable modern browsers are. This is the kind of thing they’re capable of, more or less, out of the box.

  • CPT is bringing the weird back

    The “Center for Philosophical Technologies” has one of the weirdest websites I’ve seen in awhile. Somebody really went nuts with RGBA and background-gradient. The UI is almost defiantly irrational, with odd punctuation everywhere, navigational elements strewn around the layout like somebody upended a box of tracing paper, and even their ‘logo’ is pulled apart and scattered across the top of the homepage (literally) at random.

    And yet… it’s really quite usable nonetheless.

    At first glance it just feels inscrutable, but after a few seconds of playing with stuff you can see there’s a logic to it. It speaks its own alien language, but the grammar is consistent and easy to learn.

    Looking at this site makes me feel kind of wistful, like when you hear an old song for the first time in 15 years. This brings back a rush of good memories of the odd and experimental websites that seemed more common in the early aughts, back when the rules for UX hadn’t really been written yet and, I dunno, people were maybe just more willing to try stuff.

    It’s cool to see that this kind of experimentation — this kind of wonderful fun weirdness for the sake of being weird — seems to be coming back as new CSS features are more widely supported and (maybe more importantly) as I guess we all are getting bored with following formulas.