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?