Design
Topic archive / 918 posts
Jack
It bothers me that I can’t remember exactly when and where I met Jack. I’m usually pretty good about that. It was probably 2007-ish, probably at SXSW or An Event Apart. I was going to a lot of conferences back then, meeting all kinds of web people from all over the place, and Jack was a web person, though we didn’t talk about the web all that much once we found other things we had… See more →
V7: Say hello to my listening diary
Monthly reports of my most-played music, going back to 2005
After finally completing the gargantuan task of manually adding metadata to thousands of my old tweets so they could be more integrated with the rest of my site, I wanted to keep the momentum going. So I turned to the last large personal data source that was still missing from my site: Last.fm, a service for tracking and sharing the music you listen to. As of a few days ago, I’ve been a Last.fm user… See more →
Customizing ordered list styles
A simple and reliable way to use CSS counters
One web browser default I’m seldom satisfied with is the appearance of list markers. Their style can be customized with CSS using li::marker, but the options there are limited. The best way I’ve found to fully customize them is to remove default list styles and use a li::before pseudo-element as a list marker:
ol,
ul {
list-style: none;
}
li::before {
content: "•";
}
I’ve used a plain old bullet in this example, but content’s value can be whatever you want, and you can also use position, background, and… See more →
V7: Backfilling metadata
Six thousand tweets. Ten months. One taxonomy.
Last week? Not my favorite week. My dog injured her leg while playing with other dogs in the park. My basement needed some emergency masonry work. My acid reflux graduated from intermittent warning shots to full-on assault. But somehow, in the midst of all this, I managed to finish up a project I’ve been chipping away at for countless hours over the past 10 months: manually adding metadata to the nearly 6,000 old tweets I’ve… See more →
Ethan Marcotte’s redesign
My good friend and web design hero Ethan Marcotte has redesigned his personal site for the second time in a little over a year, and it’s a thing of beauty. Every last bit of it is thoughtfully considered without being overworked, from the simple structure, to the inventive grid, to the elegant typography, to the subtle textural motifs. And that joyful splash of watercolor at the top! For the nerds, there are some clever implementations… See more →
Moving on
We’ve been prepping my childhood home for an estate sale taking place in a few weeks, and my primary task has been getting my remaining unsalable old junk out of there. A lot of it has turned out to be assignments from college: a big stack of portfolios filled with charcoal nudes and various graphic design things mounted on black boards with tracing paper overlays for professors’ commentary. Sketches, marker comps, paste-ups, digital prints. Typesetting,… See more →
The absorbingly impenetrable typography of Analogical Force and Geometric Love
Analogical Force, an electronic music label based in Madrid, found its way onto my radar earlier this year when I picked up Oh Mr. James’s fun I’m Not Here EP. Most of the label’s output honestly doesn’t do much for me, but its design is another story, which for the last several years has largely been handled by the UK-based Geometric Love, a.k.a. Steve Hyland. I especially enjoy Hyland’s fearless lettering, which is almost entirely… See more →
XOXO Explore
In its founders’ own words, XOXO was “an experimental festival celebrating independent artists and creators working on the internet,” and its final edition, which included Cabel Sasser’s charming tale of going all the way down the rabbit hole of a painting that caught his attention in a McDonald’s in Washington, took place in 2024. I attended XOXO in 2014 and 2018 and was impressed on both occasions with the extraordinary care that went into the… See more →
Claire Tabouret’s Stained-Glass Windows for Notre-Dame Divide French Society, with a Legal Threat Looming
A project has been in the works for a couple years to replace a number of Notre-Dame’s stained-glass windows with contemporary designs, which has unsurprisingly caused an uproar. While the arguments for and against generally take familiar shapes—whether historic architecture should accommodate modern expression, whether these decisions should be top-down or community-driven—one functional aspect of the kerfuffle caught my attention:
The windows’ light gray, non-figurative glass allows more light to enter the cathedral, achieved via… See more →
Loud Room
Jason Santa Maria’s new independent design practice has a great name and a great logo, befitting the quality and character of his work. And the site, an appropriately simple introduction, sports a fresh, fun, procedurally-generated color scheme every time it loads. Don’t miss his blog post with the backstory!
V7: Typographic scales and technical pens
A flexible system for consistent stroke widths across type sizes
Before vector art, high-DPI raster image processing, and retina screens took over the world, if someone wanted to draw very fine and precise lines, they relied upon steady hands, cork-backed metal rulers, French curves, and a set of expensive technical pens. The Rapidograph pens I used in college could be a headache to maintain—don’t let that ink dry in the nib!—but the results were worth it: pull one of those pens across a fresh sheet… See more →
That was 2025
I got a speeding ticket the other day, my first in probably more than 25 years. After a decade and a half of not owning a car, L and I reluctantly accepted a hand-me-down Hyundai Tucson a couple years ago so we could be more nimble for the sake of our aging parents. Not coincidentally, I’ve been driving it a lot lately, making regular visits to the memory-care residence my mom now calls home, or… See more →
LEGO Bricks Transform into Letterforms in the International Design Project ‘A2Z’
How great is this project? Pedro Neves, a professor at UIC’s School of Design, invited 40 designers from around the world to create letterforms out of Lego, which were then made into letterpress prints. Despite working within the same constraints (a set of bricks and up to three colors from a limited palette), the variety of results on display is wild, and I especially love the many ways people made use of overprinting to stretch… See more →
Stars of the Lid Forever
A beautiful redesign for Beyond Tellerrand
Just in time for this year’s Berlin edition, Beyond Tellerrand has launched a beautiful new site for its 15-plus years of events. A real web treasure both visually and structurally, it succeeds as both a marketing site and a deep archive of hundreds of inspiring talks from creative speakers in design, tech, and beyond. I’m honored to have done a few projects with Beyond Tellerrand but sadly have yet to attend. Someday!
Kinference 2025
Two and a half years ago, I came away from Kinference 2023 disappointed that more of my peers weren’t as put off as I was by the current state of tech’s dominant preoccupations. My experience wasn’t much different this time, except that in the intervening years, Web3 enthusiasm has fashionably given way to AI enthusiasm. This isn’t to say all the speakers were doing PR for LLMs, and among those intermittently expressing guarded misgivings, Frank… See more →
V7: Video Killed the Web Browser Star
An HTML odyssey
So I thought I knew as much as I needed to know about the HTML <video> element, and as usual, I was wrong. I knew I could specify a source file with a src attribute on either <video> or a nested <source> element. I knew what to expect from a bunch of other attributes, like autoplay, controls, loop, muted, and the obvious height and width. I knew the poster attribute gave me control over the… See more →
Lowriders & websites
Adam Stoddard recently found common cause with the enthusiastic craftsmanship of lowrider culture, and I found myself nodding along vigorously:
The thing is, this particular brand of “functional absolutism” that’s widely held in tech circles is a bankrupt philosophy. It leaves no room for beauty, no room for expression, no room for investing time and care in something for no other reason than you find it satisfying to do so.
Should every website be the subject… See more →
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 →
Everyone please continue making colorful geometric confections and I will continue admiring them. thisiscolossal.com/2022/10/dinara…
Hint: Each letter is from a different decade, from the 1930s to the 2000s (but not in chronological order). twitter.com/robweychert/st…
Here’s a fun game for a Friday: Try to identify the eight horror movie posters that the ransom letters on the Robtober 2022 title screen came from. (I’m looking in @iamrumz’s and @NickSherman’s direction, but all are welcome to play.) twitter.com/robweychert/st…
@eleven_ty @pdehaan Evergreen thanks also to @stuntbox, without whom I might never have gotten past being intimidated by the command line and static site generators. They’ve improved my web life so much over the past seven years. 🙌🏻
I’ve been coding plusequals.art entirely by hand up until now (apart from the SVG), but I’m happy to say I’m just about done moving it onto @eleven_ty, and it’s been easier than expected! Big thanks to @pdehaan for his help with the final hurdle: github.com/11ty/eleventy/…
Plus Equals #6 shipping to subscribers today!
Or if you prefer your scribbles all in front of you at once, there is a poster: shop.robweychert.com/products/plus-…
If you’re into the idea of paging through hundreds of systematically generated scribbles, Plus Equals #6 is just what the doctor ordered: shop.robweychert.com/products/plus-…
I’m looking for more ways to share what I’ve learned. If you would be interested in a workshop on creative coding, design, and/or zinemaking, please take this brief survey: forms.gle/He9L6rzudCrty6…
As always, you can read Plus Equals online for free, and if you enjoy my work, please consider supporting it by buying a zine or poster from my shop. shop.robweychert.com
Also included: a crash course in the (relatively uncomplicated!) mechanics of Bézier curves, and some topical handwringing on the subject of AI art.
For this issue, I wanted to see if a series of loose, seemingly spontaneous images could be produced via a rigid system. Spoiler: They can, and I’ve algorithmically generated 562 unique scribbles to prove it.
The sixth issue of Plus Equals, my algorithmic art zine, is out now! plusequals.art/06/
For some reason, this round of “stop crying, corporate consolidation is actually great!” takes on Design Twitter is really bumming me out.
In addition to being a bit of an homage to Reid Miles and Saul and Elaine Bass, this project gave me a good opportunity to play around with a Python script I wrote for @drawbotapp to make abstract geometric images from linear halftones. twitter.com/robweychert/st…
