Design
Topic archive / 239 posts
Megazoid

Look at this super-fun microsite Jason Santa Maria designed for DJR’s super-fun font, Megazoid!
Crafting Personal Alphabets: Calder Ruhl Hansen & C.C. Elian
This pair of presentations from Calder Ruhl Hansen and C.C. Elian examines the fascinating writing systems they’ve created at the intersection of typography, calligraphy, hieroglyphics, cryptography, and algorithmic art. Elian is known for Elian Script, which distills the Latin alphabet into simplified forms that can be combined into words in an endless variety of orientations, evoking the expressiveness of Eastern calligraphic traditions. Hansen’s works include an ingenious system of English syllabic pictographs and a means… See more →
V7: Launch day
Expanded site, new design, same me
I started redesigning this site in January of 2020. Remember January of 2020? We didn’t know we were living in the Before Times. There were still a few people in the White House who weren’t Fox News hosts or meme coin shills or raw milk evangelists. Our tech bro billionaires hadn’t yet entered the endgame of their persistent campaign to annihilate whatever sense of objective reality we once shared. We were so young.
I wouldn’t… See more →
That Was 2024
My year in review
I was hopeful, if not naive enough to be confident, that enough people were sufficiently fed up with That Fucking Guy to keep him from returning to the White House. But he will, of course, be returning, and while this time his victory isn’t the shock to the system it was in 2016, his popular vote win, a hair shy of a mandate, still stings plenty. The Democratic Party’s subsequent soul-searching might be morbidly comical… See more →
V7: The Great Data Migration, Part 2
Once more, with feeling
From the beginning, it was clear that data migration was going to be this redesign’s biggest, most cumbersome task, as the site was growing from 600-some blog posts to untold thousands. I assumed that reformatting the mountain of data arriving in disparate configurations from over a dozen external sources (as described in my previous post) would be the lion’s share of the work, and it would be smooth sailing from there. How wrong I was!… See more →
V7: The Great Data Migration
Bringing it all home
I’ve done a lot of work on the site in the last two months, and a launch date, while still a ways off, is finally coming into focus. I’ve been working on this redesign very intermittently for over four years now, but at this point I expect to keep at it until it’s done, with as little interruption as possible.
Among other recent advances, I’ve moved the site from Jekyll to Eleventy, chosen a font… See more →
Once in a Lifetime
A game show for the Philadelphia Psychotronic Film Society
This is the long story of a frivolous, fleeting creative project that came out of nowhere, completely took over my life for a few weeks, and was gone as quickly as it came. Let it be known that I regret none of it!
I’m a proud member of the Philadelphia Psychotronic Film Society. In the organization’s own words:
We carry on the proud tradition set forth by Psychotronic Film Societies around the globe by screening… See more →
That Was 2023
My year in review
I’ll begin by briefly weighing in on five of the most prominent pieces of the 2023 zeitgeist, at least from where I was sitting. Some cynical vibes ahead, so feel free to skip past this part if you’re not in the mood for negative energy:
- Taylor Swift: Gen Z’s version of Beatlemania is a bit of a head-scratcher for me, since I find Taylor Swift’s music to be entirely unremarkable, but that didn’t stop her… See more →
V7: Metadata structure and sitemap
Solidifying the information architecture
I’ve been revising a metadata structure for blog posts and a sitemap for a few months now, and since I haven’t felt the need to tweak either of them in awhile, they’re probably solid enough to document here.
Metadata structure
The blog post metadata has been developed to accommodate a wide variety of post types, to give me a lot of flexibility in how to present them, and to give users a lot of options… See more →
V7: Expanding scope
Bringing more data and functionality into the mix
In my previous post, I mentioned Tinnitus Tracker, my standalone concert diary site which can be browsed by genre, artist, venue, city, state, and year. I had been planning to continue updating that site concurrently with V7, but it recently occurred to me that it makes a lot more sense to just consolidate the two sites, which in hindsight seems incredibly obvious.
For one thing, I’ve never been satisfied with the Tinnitus Tracker design, and… See more →
V7: Eleventy it is
Switching static site generators
Every static site generator has idiosyncrasies, and Eleventy is no different. As is the case pretty much any time I try out software, I find that Eleventy often does things differently than I think it ought to, and it doesn’t always make itself as clear as I think it could. A couple of examples:
- Eleventy has no built-in mechanism for date-based archives. A common blogging convention I’ve adhered to for many years involves organizing post… See more →
V7: The Procrastination Destination
Working on my site instead of yours
I’ve given my V7 redesign project the unofficial tagline “The Procrastination Destination” since the significant progress it’s seen in the past few months has come mostly in stolen moments, some of which turned into extremely productive (and perhaps troublingly obsessive) deep dives. This recent movement has been pretty non-linear, and the tasks in play are all interdependent enough that none of them are really done until all of them are, but I seem to be… See more →
Python easing functions
For precise programmatic animation
- Translated from the JavaScript in Sean Yen’s Easing equations
- Illustrations adapted from Andrey Sitnik and Ivan Solovev’s Easings.net
Example usage:
duration = 30
for frame in range(duration):
return easeInOutQuad(frame/duration)
linear
def linear(t):
return t
easeInSine
def easeInSine(t):
import math
return -math.cos(t * math.pi / 2) + 1
easeOutSine
def easeOutSine(t):
import math
return math.sin(t * math.pi / 2)
easeInOutSine
def easeInOutSine(t):
import math
return -(math.cos(math.pi * t) - 1) / 2
easeInQuad
def easeInQuad(t):
return t * t
easeOutQuad
def easeOutQuad(t):
return -t * (t - 2)
easeInOutQuad
def easeInOutQuad(t):
t *= 2
if t < 1:
return t * t / 2
else:
t … See more →
That Was 2022
My year in review
Maude
Leah and I became dog parents early in 2022, adopting a 15-pound, two-year-old Jack Russell / Chihuahua mix. Knowing Roe v. Wade would soon be overturned, we named her Maude, after the Bea Arthur character, who in 1972 was the first sitcom character to have an abortion. Living with Maude has been a big adjustment, but after getting over the initial hump, I’m not sure how we ever lived without her. She loves belly… See more →
V7: Renewed purpose
Goodbye, Twitter
It’s been nearly two years since I posted an update on this project! I’ve been moving it forward slowly and quietly since then, and I’ll share some details about those activities in due time, as well as details about how work and life changes have introduced new and different demands on my time and somewhat expanded the scope of the site. But for now, the most important takeaway is that my fundamental vision for V7… See more →
Robtober 2022 Design Notes
How to design a ransom note
Happy Halloween! Here are a few quick notes about this year’s design for Robtober, my annual horror movie marathon.
The ransom letters
The ransom note concept for the title screen came to me in the middle of the night, and I don’t remember if it was inspired by something specific. But in my subsequent research, I read the entire Wikipedia article about the murder of JonBenét Ramsey, so if that’s a knowledge hole your pub… See more →
AI and Our Labor Addiction
The level of naivete, if not outright hubris, on display in a recent New York Times article about AI-generated art is gobsmacking:
The resulting image didn’t end up going into an ad, but Mr. Carmel predicts that generative A.I. will become part of every ad agency’s creative process. He doesn’t, however, think that using A.I. will meaningfully speed up the agencies’ work, or replace their art departments. He said many of the images generated by… See more →
Inside ProPublica’s Article Layout Framework
How we vastly expanded our website’s visual storytelling capabilities
Editorial design is a many-splendored thing. Cliché as it may be to say a picture is worth a thousand words, there’s no denying that even the most skillful and vivid deployment of the written word can benefit from a thoughtful visual presentation. Photography, illustration and video can humanize a story’s characters. Charts, graphs and other data visualizations clarify complicated concepts. Typography and color set an emotional tone. And bringing cohesive form to it all is… See more →
That Was 2021
The highlights and lowlights of another pandemic year
Let me begin by saying I promise this post is mostly good vibes. Skip ahead if you like, but if you’ll momentarily indulge my pessimism: What a stupid time to be alive.
2021 was supposed to be the year the vaccine gave us our lives back, and while it did for some of us to some degree, its international distribution predictably favored wealthy nations, and the long-simmering anti-vax movement here in the wealthiest nation of… See more →
Robtober 2021 Design Notes
The making of a custom-designed blog post
Robtober is what I call the horror movie binge I do every October. After I redesigned my site in 2017, I started documenting the event each year with a horrifically custom-designed blog post, getting a little more elaborate each time. This post goes behind the scenes of the 2021 edition.
The data
I generate my site with Jekyll, and a custom-designed post like Robtober gets its own unique layout file. To keep things tidy, all the… See more →
V7: Beginning data migration
Prepping hundreds of tiny blog posts for republishing
Apropos of nothing, I decided that the first of the old entries I’d bring over to V7 would be granular ones:
- Daily Haiku: A section of the fourth version of my site, beginning back in 2005. As the name suggests, I wrote a haiku every weekday based on the Dictionary.com Word of the Day. Each haiku was originally its own entry, but when I brought them over to V6 a few years ago, I consolidated… See more →
That Was 2020
It sure was.
I began last year’s “That Was 2019” post by expressing disappointment in my immune system’s poor performance that year, so let me begin this year’s wrap-up by praising that same immune system’s effectiveness in 2020. More than 1.8 million people died of COVID-19 in 2020, a disproportionately high 340,000 of them Americans, and I didn’t get so much as a head cold. I spent much of the year being grateful for my health and financial… See more →
V7: Choosing a CMS
Do my new content requirements need a new content management system?
For awhile, I had basically resigned myself to the idea that the massive amount of stray content I’m planning to bring home (thousands of tweets, Flickr photos, etc) would necessitate moving my site onto a LAMP stack CMS. I started poking around in WordPress, which I hadn’t touched in years, and Craft, which I use regularly in my work at ProPublica. The former felt bloated and the latter’s setup presumed a level of back-end know-how… See more →
Jen Mussari’s Killer Lettering
The making of the terrifying Robtober 2020 logo
Every October, I make a schedule of dozens of horror films, focusing mostly on ones I haven’t seen before. I call it Robtober, only half-ashamedly. It’s fun! For the past few years, I’ve announced the schedule’s contents via blog posts with increasingly elaborate designs, effectively dressing my site up for Halloween. This year, I wanted to harness some of my favorite visual themes from horror movie marketing (such as posters and trailers), and distorted hand-lettering… See more →
A New Issue of an Old Zine
The future is uncertain. The present is awful. No better time to revisit the past.
The year is 2020. Summer is giving way to autumn. COVID-19 will have killed a million people by the year’s end, a fifth of them Americans. Unemployment is soaring. Millions have taken to the streets to protest police brutality and its disproportionate effect on Black people. The west coast is engulfed in the fiercest wildfires it’s ever seen. The sky is orange.
In the face of all this, the President of the United States denies… See more →
V7: On dependency
How I incorporate other people’s work into my own—and how I don’t
I might have expected quarantine life to be a boon to my site’s redesign process since most of my preferred social distractions were nullified. Instead, I’ve been using the time in isolation to make music videos, finalize a home purchase, move into said home, and try to find my place in our national reckoning on racism and public safety reform. But as I slowly shift some of my attention back to the redesign, I’ve been… See more →
V7: The timeline is taking shape
Making progress with sketches, wireframes, and a prototype
Though it’s mostly taken place in scattered, stolen moments, I’ve made a lot of progress on the UX of the timeline section, much of which was still a disconcerting mystery not so long ago.
With the help of the data categories and content inventory I established in the previous post, I’ve settled on a binary timeline concept: each post is either small or large. Small posts consist of up to 100 words and/or up to… See more →
V7: Timeline section inventory
Untangling the content
Progress on the redesign has slowed, partly because I’ve been busy with other things, and partly because, frankly, the open questions about the timeline section enumerated in my previous post are an intimidating mess, a perfect example of the early stages of the Design Squiggle.
In a fight or flight situation like this, here are the arguments for flight:
- “Uh, the timeline isn’t even your top priority for the site, remember? What’s more important: working on… See more →
AP style month abbreviations with strftime in Liquid
AP style is particular about how dates are formatted in various circumstances. strftime
uses %b
for month abbreviations, but its format (the first three letters of the month: Jan, Feb, etc) differs from AP style’s preferred abbreviations for some months. This Liquid snippet converts strftime
’s month abbreviations to AP style:
{{ object | date: '%b. %e, %Y' | replace: 'Mar.', 'March' | replace: 'Apr.', 'April' | replace: 'May.', 'May' | replace: 'Jun.', 'June' | replace:… See more →
V7: Structural challenges
The ambitous scope of the timeline section
Most of this redesign’s structural challenges pertain to the timeline section, previously described thusly:
- Timeline: The blog on the current version of my site, V6, collects most of what I’ve written for public consumption since 2001 across nearly 40 different sources. I’d like to expand that to include even more sources and content types, collecting virtually everything I’ve shared online in one sprawling, sortable/filterable timeline.
Since the projects section is a higher priority and the new… See more →
V7: Content priorities
Making my projects more visible
I added a tiny bit of CSS to aid readability by keeping line lengths in check on larger viewports:
body {
margin: 0 auto;
max-width: 75ch;
padding: 1rem;
}
When calling the CSS file from the page head
, I include a query string based on today’s date, which I’ll update when the CSS is updated. This will let updates get past the browser’s cache.
<link rel="stylesheet" href="/assets/css/main.css?20200108" />
Hopefully this small stylistic addition will keep things tidy enough until I properly begin the visual… See more →
V7: The “viewport” meta tag
Apparently it is still necessary!
The first thing I did when setting up this new version of my site was to put together some minimum viable HTML templates. Here’s the blog post template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><!--POST TITLE--> | RobWeychert.com V7</title>
<meta name="description" content="<!--POST DESCRIPTION-->" />
<link rel="alternate" type="application/rss+xml" title="RobWeychert.com V7" href="/index.rss"/>
</head>
<body>
<… See more →
That Was 2019
The highlights of what I took in and put out
My immune system didn’t do me many favors in 2019. I was sick on five or six separate occasions in the first half of the year, including an obnoxious bout of bronchitis that lasted the entire month of February. Luckily that didn’t stop me from having an adventurous and fulfilling year, and for the first time in my four years at ProPublica, I used every single one of my vacation days.
Projects
My first three… See more →
V7: Introduction
Redesigning my site in public
Welcome to RobWeychert.com V7! There are a number of new things I want to try with my site, from structure to aesthetics to code, and so it’s time to begin a fresh redesign. Inspired by my friends Jonnie and Frank, I’ve decided to do it in public from the ground up. I’m starting with bare-bones HTML and as the design process unfolds, each step will be reflected on the site in real time and documented… See more →
A Modern Typographic Scale
I’ve been studying music theory this year. While some of its core concepts were already familiar to me, much of their specifics were not. Or so I thought. A funny thing happened when I was learning the major scales. While playing through a song I had written some years before, I started picking it apart to see how it correlated with the theory I was learning. I had composed the melody without any thought to… See more →
Dynamic, Date-Based Color with JavaScript, HSL, and CSS Variables
A rational system for generating thousands of possible color schemes
Sometime during the development of Tinnitus Tracker, it occurred to me that color would be a good way to give its many entries—which span nearly three decades—a sense of time and place. Colors would change with the seasons and fade over time. In effect, every single day of the past 30 years would have a unique color scheme, each day looking slightly different than the day before. As a bonus, the color’s constant flux as… See more →
Links: April 2019
rumz.org v3
If Rumsey Taylor is not on your radar, this is an excellent opportunity to rectify that error.
Hindsight 2070: We asked 15 experts, "What do we do now that will be considered unthinkable in 50 years?" Here’s what they told us.
Most of these are more aspirations than likely outcomes, and one is included in a rather transparent attempt at ideological diversity (see if you can guess which one!), but an interesting collection… See more →
Links: March 2019
You Are Not a Tool
To me, that combination of many things — of not being tied to one particular tool — is where the power often lies.
The Tragedy of Baltimore
In 2017, it recorded 342 murders — its highest per-capita rate ever, more than double Chicago’s, far higher than any other city of 500,000 or more residents and, astonishingly, a larger absolute number of killings than in New York, a city 14 times… See more →
Sophisticated Partitioning with CSS Grid
Create compelling grid patterns by harnessing specificity
Thanks to Tinnitus Tracker’s many browsing options, there are more than 1,000 lists of shows on the site, making the show list the most prevalent design pattern. It was clear from the start that this would be the case, and the design of event listings is something I’ve given a lot of thought as a designer and music fan, so it was the first thing I explored in early sketches and mockups.
My initial… See more →
Links: February 2019
Hello, dear reader!
February is gone, but its links remain.
I owe you a belated “Happy new year!” since I failed to get this newsletter out the door the past two months. If you’re desperate to see the links that never made it to your inbox during those months, you can find December and January (along with every other edition) on my site.
In February, I finally launched Tinnitus Tracker, a live music diary I’ve… See more →
Introducing Tinnitus Tracker
My live music diary is now a website.
In the spring of 2015, Last.fm, a social site that tracks users’ music listening habits, gave subscribers a sneak peek at its upcoming redesign. The first thing I noticed was that the Events section, which I had been using for a decade to catalog the shows I went to, was gone. It was reinstated when the redesign was publicly unveiled a few months later, but the temporary evaporation of my data was a good reminder:… See more →
Links: January 2019
The Leaked Louis C.K. Set Is Tragedy Masked as Comedy
Over the years, C.K.’s comedy evolved, as any comic’s will, but at their best and most well known, his jokes were about interrogating himself as a means of interrogating American culture. As C.K. shuffled uncomfortably on stages and sets, clad in rumpled T-shirts and slouchy dad jeans, he served as his own act’s useful idiot: C.K., author and character at once, played the privileged guy… See more →
That Was 2018
The highlights of what I took in and put out
A lot happened in 2018. The ruinous Trump administration continued doing its ruinous thing. I finally deleted my Facebook account. I had a stressful couple of months caused by something that rhymes with “head hugs,” which I would gladly trade the life of any loved one to avoid going through again. I visited the UK for the first time. I published 33 blog posts, including several well-received posts on design and development.
Projects
Let’s check in… See more →
Links: December 2018
George Bush, Who Steered Nation in Tumultuous Times, Is Dead at 94
I like this Bush obit as a crash course on the political forces that shaped the world during my formative years.
24 Ways
Always delighted to see this advent calendar of web design articles light up my RSS feed every December.
The Fun Is Back in Social Media…Again!
TikTok probably feels a lot like Flickr or Twitter in the early days, where everyone… See more →
Links: November 2018
Hello, dear reader!
November is gone, but its links remain.
I published a couple of nerdy blog posts in November: one about how I’m using my Letterboxd data to address my cinematic blindspots, and one about a common convention of editorial design that’s currently incompatible with CSS Grid.
Lots of interesting stuff in the links this month; for what it’s worth, my favorites are Earworm’s series of videos about jazz.
As usual, you can get many… See more →
Editorial Layouts, Floats, and CSS Grid
CSS Grid is in many ways a dream come true, but there’s at least one basic thing it can’t do.
I’ve been getting my feet wet with CSS Grid this year. The new possibilities it introduces for page layout on the web are exciting, but before venturing too far into those waters, I wanted to see how it handles the kind of layouts I’m already designing. Most of the work I do on the web—at ProPublica and here on my site—is editorial design, so I was keen to learn how Grid accommodates the conventions of… See more →
Links: October 2018
Hello, dear reader!
October is gone, but its links remain.
I was mired in personal matters throughout October, so there wasn’t any activity on my site apart from the horror extravaganza that is Robtober, which was thankfully not disrupted. I finally finished a project that had been in the works for a few months: a custom-designed story with ProPublica Illinois about a family’s heartbreaking experience with an ill-conceived psychiatric clinical trial.
This round of links… See more →
Links: September 2018
Hello, dear reader!
September is gone, but its links remain.
It was a big month for me, as I finally finished the project I was preoccupied with for most of the summer: Incomplete Open Cubes Revisited, inspired by Sol LeWitt. I also wrote about why and how I did it.
This month’s newsletter is a few days late because I wanted to include Robtober 2018, my annual deep dive into horror films which always takes… See more →
Revisiting Incomplete Open Cubes
Behind the scenes of an obsessive art project
The idea becomes a machine that makes the art.
—Sol LeWitt, Paragraphs on Conceptual Art, 1967
I felt the first rumblings of the obsession a little over a year ago. I’m a big fan of Sol LeWitt’s wall drawings, and on a pilgrimage to MASS MoCA’s sprawling retrospective exhibition of them, I glimpsed some curious cube structures by LeWitt scattered around the museum. A short while later, in a used bookstore in Philadelphia, I stumbled… See more →
Links: August 2018
Hello, dear reader!
August is gone, but its links remain.
My site was quiet in August, as I’ve been heads-down on a project I’m pretty excited about. Its release is just one facet of the ambitious September I have planned, so if all goes well, there will be much to report in next month’s newsletter.
My alter-ego Windhammer recently returned to the competitive air guitar stage for his 10th anniversary, tying for second in the… See more →