Alvaro Araoz, Web & UX/UI Designer

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:

  1. Make the website fast
  2. 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.

A British road sign for the A46, set in the Transport typeface, with distances to Lincoln, Newark, Nottingham, and Leicester
Transport, the typeface used in British road signs, has been in use since the 1960s. Image courtesy of St Bride Library

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.

The two gradients above show that colours with equal saturation and lightness actually vary quite a lot in perceived brightness. Note that the bottom gradient is a desaturated version of the top gradient.
In this example, the top gradient maintains a constant saturation, whereas the bottom gradient increases in saturation as the lightness decreases. The result is a much richer, darker-seeming dark stop.

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?