A Change of Scenery
Prelude
It’s almost parody how common it is for designers to frequently and publicly redesign their website. Ethan Marcotte and Frank Chimero are two such people who quite publicly went through their own flavours of dismantling and patiently reassembling their websites, and here I am experiencing my own Popeye moment and reflecting on the longevity of the former lives of my website’s design.
It doesn’t seem like a coincidence that this moment reaches me almost exactly 10 years after the first snapshot of my website was added to the Internet Archive Wayback Machine. Unfortunately, the majority of (the 1,000+) snapshots are broken: years of interchanging URLs, web stacks, technologies, and designs are commensurate with the broken links to the resources that held the designs in place. Nevertheless, I can start to trace a route over the years.
The current design (as of April 29, 2021) has been practically unchanged—structurally speaking, at least—since July 2019, which is a pretty long time! Prior to this iteration, the design changed fairly substantially every 2–3 months.
I’m starting to chip away at the site’s latest iteration, one small change at a time. There are two goals in this exercise:
- Make the website fast
- Showcase my work
The first goal is the only dealbreaker. I feel I’ve written a lot of useful posts, but that content is only useful if it’s accessible, and accessible quickly. I’m trying really hard to toe the line between optimising for speed and optimising for expressing myself and my “brand”. Materially, this means being selective in which web fonts I choose, what content loads on the key pages, and how much I prioritise certain routes through the site by choosing certain navigation items.
The second goal is taking me back to my first few years as an aspiring designer: the websites I designed peppered my portfolio, and I wore the projects like a Boy Scout sash. In the last year alone, I’ve enjoyed working on a handful of new projects, mostly independently designed and built iOS apps. There are a lot of details in some of these projects that I’m quietly proud of, and I’d love to share some of those projects with a bit more depth.
Following the footsteps of others, I’m hoping to document this process in the public eye, with this blog post as my first stop on the journey.
April 29, 2021: Type
This morning, I made the first opinionated design choice: the typeface.
In keeping with the redesign’s primary goal—make the website fast—I first chose
Inter, a beautiful typeface from former Dropbox
colleague Rasmus Andersson. It’s close enough to the macOS
system font, San Francisco, that I can leverage font-display: swap to switch
between them while the web font downloads, and it’s vanilla enough to have made
for a good starting point for a redesign.
However, dear reader, now is as good a time as any to admit that I am obsessed with street signage typography.
I’ve wanted for a long time to have an excuse to use Transport or Interstate, and a redesign felt like a good excuse. Luckily, I found Overpass, an open source font hosted on Google Fonts, which has excellent delivery strategies for performant websites; so that’s what I’ve picked, for now at least.
Who knows whether Overpass will end up in the final version of this iteration, but right now I feel good about it. It feels utilitarian without being cold, and satisfies a personal, selfish itch.
May 8, 2021: Colour
Today’s challenge is colour. For a while, my site has been almost entirely monochromatic: almost-black on almost-white, with a fairly exact medium gray for highlights like links.
Monochrome is very much my “aesthetic”, but I’ve also been itching to use colour as a way to (subtly) introduce a bit more personality into the site. I’ve also been enamoured of the idea of “art direction” for specific pages for some time, allowing different pages to take on entirely different appearances. Trent Walton’s website does an incredible job with this. I’m far too lazy and/or stubborn about code cleanliness to pursue quite the same degree of art direction for different pages, but colour feels like a good start.
On this blog post, for example, the page takes on a slightly greenish hue compared to the rest of them (where I’ve also moved from gray and blue to a warmer pinkish hue and crimson links).
I’m also trying to be a bit more intentional with the palettes I’m using. For example, in the previous, monochromatic grayscale version of the site, I basically only had to worry about three shades of completely desaturated gray: almost-black, almost-white, and bang-in-the-middle gray. But now, I want my tertiary and quarternary colours to be sensibly familial with the primary and secondary colours, which introduces all sorts of complexities.
Generally speaking, as colours get darker, they ought to become more saturated to maintain relative darkness; likewise, not all hues take on the same appearance with equal lightness and saturation.
From a developer experience point of view, I’d love to be able to designate one or two specific colours I’d like to use in a palette, and have an algorithm generate a smooth curve through those colours—but as I mentioned above, I’m quite lazy. Maybe in the future, but today, I’m relying on ColorBox to help me.
After a couple of hours of tinkering, I also decided to up the ante on making the site a bit more expressive and changed the typeface to Archivo Variable. This lets me load one font from Google’s servers and then get total creative control over its appearance; weight, width, and italics. The result is a playful wide font in the site banner, all-business condensed headings, and a slight width increase for smaller settings like captions.
One more touch: a vibrant, saturated site banner. A real statement piece. We’ll see how long it takes for me to tire of it.
May 18, 2021: Identity Crisis
As I keep chipping away at this redesign, one change at a time, I’m struggling with one of the secondary goals of the project: expressing myself.
Who am I on the web? I look back at my blog, and it’s hard to pose a conclusive answer to that question. I write about all sorts of things: from essays about what design tools could be, to programming tutorials, to project management tips. I can’t bring myself to sequestering any of these parts of my personality to a lower delegation, but they don’t all hang together well.
Some of these essays demand a quiet confidence; some require a kind, coaching attitude; others a playful, carefree or even vibrant design.
I also can’t help but always return to a thirst for simplicity. Everything I nudge in the direction of uniqueness or “pop” inevitably creates a small pit in my stomach: an ache to curb it back to one typeface, one colour, one size. Maybe that’s who I really am, and my attempts to portray myself any other way are futile. Even down to my clothes: I’ve worn a black T-shirt and jeans every day for 5 years or more. I am allergic to differentiation on any grounds other than being as straightforward as possible.
One resolution I considered to address this crisis of identity is to provide different themes for different kinds of posts; but how do I make those distinctions? Everything I write carries tones of my other selves: my coaching self shows up in my authoritative essays; my web developer self shows up in my design process posts.
Good design principally gets out of the way to make the content shine, but what is the right plan when the content is the design?