It’s been four months since my last redesign post, and my excuses for blog-neglect are the usual in this tried-and-true genre of blogpost: work got busy, I wasn’t sure what to write, a global pandemic happened, etc. etc. etc.

This is the new design. I hope you like it. Here are some notes on it to wrap up this series of posts.

Superfluousness

I live in New York City, meaning my Covid lockdown has been a few weeks longer than many around the country and done in a home that is much smaller than most. (Which side of the room shall we enjoy today, Frank?) As I write this, I’m feeling fine, and propping up my spirits with shitty ’90s pop rock, bucketloads of leafy greens, enough Vitamin D pills to choke a horse, and a steady and stabilizing batch of work projects. I’m grateful for all of it.

Still, a guy can go squirrelly cooped up like this, and that nervous energy eventually ricochets back into self-analysis. Redesigning this site began as an attempt to do some writing on the web design process from a typography-foward perspective. And it has been that! But the redesign, ultimately, was a place to direct anxious energy and parts of this site that began as experiments were complicating the redesign process. Best to tidy up and wrap up.

Life has become a lot leaner during the pandemic, and on the good days, more focused. I’ve taken that same attitude towards this site’s content. The site has been stripped down to a blog. I looked at the analytics (which have also been removed from the site): people only visited blog posts. Okie dokie.

Notion and middling content

The Reading and Listening sections were the bulk of the site’s footprint. These pages were my attempt to keep personal records in a way that felt slightly nicer than raw data (like a spreadsheet) but lighter than a whole-hog social network (like GoodReads). It’s middling content: personal yet interesting to some and something I’m happy to share if people want to see.

Where does that kind of thing go? A personal website can be a good solution, but since these sections were creating complexity and dwarfed the other parts of my site, they panged of self-involvement. That feeling grew as I worked on the design – the nicer the pages looked, the more I winced at the sight of them. I cut the pages and began looking for other places to store this information.

Luckily, I’ve found the right tool for me. I’m now storing my reading and listening logs in Notion, which does an excellent job of creating nice looking and flexible containers for this kind of content, with adequate sharing features if anyone wants to take a peek. My Reading List is available here and my yearly wrap-up playlists and seasonal mixes are still publicly available on Spotify. I’ll continue making local backups, but there’s no reason to stick them on this site.

Reset

Scrapping most of the site’s content meant that very few of my old design choices were relevant. I could think fresh. Rather than get mired in high fidelity mockups and CSS, I decided to work on a sheet of paper to specify the site’s design system.

First: same fonts – Ivar Text and Söhne. Second: tightly constrained type sizing and color. Third: keep the unique color palettes for each page, since that is going to help hedge against the austerity suggested by a tight design system. Here is where I landed:

• Three typefaces (Serif, sans, and mono for code samples)
• Three sizes (Default, small, and a rarely used large for a few key text blocks in my talk transcripts)
• Four colors (Background, Text, Mid for faded text, and Dim for borders)
• Four spacing units, in rems and proportional to type size (Small, medium, large, and XL)

For the most part, this site’s design bounces between two typefaces at two sizes in two colors. The system looks like this:

I had one of those “duh” moments regarding the hierarchy while working on paper. If most of the site is going to be the same size, headlines can be in Söhne to distinguish from the main text – H2’s in a dark color and bold, the H3 in a mid-gray and regular weight. I did a quick mockup and things looked clear enough, and after searching through my posts, only a couple posts use H3s at all. Nice.

H1’s are priviledged elements. They only exist as page titles, and while the same size as the rest of the text on the page, they are elevated in the hierarchy by the ocean of negative space around them. (More on that here.) This is a trick I played in the interior page design of The Shape of Design, and I’m reproducing it here. It’s a Frank-ish touch, at this point.

Hierarchies can be reinforced by altering typesize, but for me and this site, a more normalized type scale and shallow hierarchy is preferred. It helps with responsive typography, because the type can scale proportionally with the size of the window, and lets me play with something that’s been on my list for a while: CSS clamps.

Clamp down

CSS clamps allow you to specify upper and lower bounds for a relative measurement. This is tremendously helpful and fancy when sizing a font relative to the width of a window. For instance, on this site, the default text measurement is:

font-size: clamp(18px, 1.4vw, 22px);

The minimum font size is 18px, the max is 22px, and in-between, it will be sized relative to 1.4% of the viewport width, meaning relative sizing will kick in once the window is wider than about 1200px. Pretty neat, huh? Bigger windows can get bigger body text, but not so huge that it becomes garish. From there, the small font in my system is derived as a percentage of this main measurement, and the spacing units I’ve set up as CSS variables are also linked to this flexible type size via rem units. (For those of you who can read CSS, take a look at the stylesheets – most of this information is stored in variables at the top of the document.) This forms the majority of the site design, with one significant addition: color.

Color

Let’s face it: designers like myself can pursue simplicity and end up with work that looks pretty austere and joyless. Tarkovsky’s film Andrei Rublev frames it in a really interesting way:

Gaudiness is typically thought of as being excessive or showy, but the line from Rublev highlights that there can be a tastelessness in simplicity, a blandness, a lack of spine and absence of virtue. Some days, I worry that the difficulties of web design only allow for gaudy simplicity. I could write more about this, but it’s probably worth more consideration and its own post.

One of the ways that I’ve found to add spirit to simple designs is through color. The color need not be showy, only rich and nuanced. I’ve tried to do that with the different sections of this site, preferring bluish tinted greys to pure ones, overlaying silvery tints on warm backgrounds for interesting and subtle tension, moving towards mossy murk for the post archive to suggest depth, picking inky purples for dark mode, and slipping in some unexpected pops of purpley blush here and there.

I am trying for colors that are the opposite of the rest of the internet, if only to spare some eye fatigue to whomever may be reading this. I hope that the lack of ornamentation highlights these choices, and that the colors add some lushness to an otherwise formal presentation.

I’m not sure if I’ve succeeded in bypassing austerity or gaudiness with this design, but maybe things will improve as I continue to write more and add nuance to what I’ve built.

Thank you

That’s about it! Thanks to those who have been reading along with these redesign blog posts. It didn’t go as I intended, but has anything gone to plan this year?