Posts about Redesigning in the open

Three and a half years

On June 1, 2020, I wrote that I was going to redesign my blog in the open. I kept a redesign tag so folks could follow along with my updates. I had a few intentions going in:

  1. I was going to share my design process from beginning to end.
  2. I was going to write the entire thing as an SSG in Gatsby, Nuxt, Gridsome, or something like that, and open source it.

Three and a half years after I completely reset the site’s design, the new site is live, and I did not stick to either of those goals.

I mildly regret doing all this in public. I expected I would have more time to work on the project, especially because of the lockdowns during COVID, but in reality my work schedule has been fit to burst for three years now. On top of that, my wife and I bought out first house during COVID — a real fixer-upper — and we had some health issues to navigate, in addition to work. I had no margin to work on this. 

The knockoff effect of this very public delay is that I am a professional designer who has had a terrible-looking website for close to half a decade.

I also veered away from my stated goals:

  1. I wanted to share all my decision making publicly, but it takes a lot of effort to share your design process, particularly with the written word. For this site, I also did a lot of the fine-tuning and feel” of the design right in the browser, which sped things up as I approached the finish line. Sharing the minutia behind all those decisions would have been extremely time consuming, and delayed completing the project even further. I made some last-minute changes this morning that would have merited some explanation if I were to document everything. I just wanted to ship it.
  2. Between 2020 and now, it’s become clear that Javascript-generated sites aren’t the future so much as they are just an option, and I didn’t think the option was necessary for this site — at least, not right now, when time is short.1

That being said, there were some goals I stuck to: I wrote in June 2020 that I wanted to share small updates on a platform I owned and controlled, rather than on Twitter (which was oddly prescient of me). I can do that on this site, if I’d like. Here’s an example.

In the same post, I also wrote that I’d like to fetch everything from my Letterboxd profile and display it on my own site.2 You can now see all that on the Watching page.3

If you’re interested in following this blog, there are several ways to do that. You can subscribe via email, or to one of three RSS feeds: a feed to read everything, a feed exclusively for writing, and a feed exclusively for movie reviews. (I also signed up for to easily distribute and syndicate my writing to other networks, so you can follow and respond there as well.)

There is more to do. I haven’t added any photo sharing features yet (which would decouple me from Instagram), although I don’t take nearly as many photos I used to. I have more I’d like to do with movie reviews on this site.

Despite all that, as the real estate agents always quipped, this place has good bones. It’s now running on Craft CMS, which is wonderful. I’ve added dark mode. It’s got a good, solid 12-column grid structure underlying the whole design. It’s going to be flexible for many years.

For those of you who have read this blog, even (and especially) during its desert years, thank you for reading and for your support. 

  1. I also didn’t share the source code anywhere. I would be happy to do that, but there are private APIs involved and the repo also uses some of the same back-end code that powers my portfolio, so making it all public feels a little unsafe. ↩︎

  2. Letterboxd was recently acquired. The company who bought them has an okay track record, as far as not completely messing up what they buy, but I’m still very happy all these reviews are on my own domain. ↩︎

  3. This was actually a very difficult feature to get right, largely because of the sheer quantity of film reviews I’ve written since 2016, and the amount of images displayed per page. But it feels solid now, and I’m pleased with how fast the site is, despite the fact that there are over 100 images on most of the annual Watching pages. ↩︎

Migration complete

Migration complete Today, I have finally finished migrating all the blog posts from my Wordpress site to my new site.

For some reason, I didn’t have the original files for a lot of my posts anymore, so I copied the text from each of my blog posts to Drafts, which pasted it directly in Markdown. From there, I moved the file to the appropriate folder. I also added the title and publication date of the post as frontmatter at the top of the file, like this:

date: 2023-08-23
title: Migration complete

If the post had images, I made sure the images were in the same directory as the text file. The text files and their corresponding directories share the same naming conventions: YYYY-MM-DD-name-of-post. It’s easy to search for posts on my Mac this way.

Once these files were completed, I simply had to copy and paste the text into the correct place in Craft CMS, my CMS of choice. I use Craft for all my client work, and its flexibility makes it a great choice for me.

This was a simple process, but time consuming. The plus side is that I now have plain text versions of each of my blog posts saved on my main machine.

This also means that the new version of my website is finally out of design and into development. The design isn’t 100% complete, but it’s good enough to get me going.

The design includes space for blog posts, short status updates (microblogging), movie reviews (synced with Letterboxd), and (potentially) images.

Lots to do still, but migrating all this content was the biggest hurdle to doing the work.

I’m still here

I’ve been thinking a lot about writing more often — doing something like what Austin Kleon does, or what he used to do: frequent updates about what I’m working on and thinking about, giving away whatever knowledge I have for free, and linking it all together with some sort of meta-textual awareness.

Post-Twitter, it seems like the best sort of thing to do with a personal website: write personal thoughts, sometimes using more than 280 characters, and link them together. Sometimes add links to things outside of this site too. Share it all for free, in the tradition of the open web (none of this paid newsletter stuff, lest suddenly I do this as a job and begin to despise it).

Of course, as soon as I thought about it, I started thinking about the forever-unfinished state of this redesign. Despite starting work on it during the early days of the pandemic, I never found time or motivation to finish it. It felt too much like work, and I was already up to my ears in work. I assumed that it would slow down at some point, but it never did. (An amazing predicament to be in as a freelancer.)

And so the site sits unfinished, and I feel unable to participate in my own work as I once did.

I don’t like Wordpress. It’s open source, but it also lacks direction, and I disagree with almost every direction it’s taken in the past half a decade. I’d prefer something Markdown based, so I can write on my computer, run a quick script from the command line, and be up and running. But I also want the flexibility to create complex structure if I need it. (I keep thinking I may one day want to share my photography work on the site, and that would require its own design and post type, so I do want to some flexibility.)

Some options:

  • Grav
  • Statamic
  • Craft CMS (I think Craft is the best CMS in the world right now, but I wouldn’t be able to use flat files at all if I took this approach)
  • Kirby
  • Ghost

Leaning towards Craft or Kirby at the moment, but neither of them really match what I’m looking for. Obviously I could use Jekyll or any of its descendants, but something about that approach holds me back. I think it’s great they support plain text so well, but my site may end up being more rich than mere static text would allow.

In the meantime, I’d like to keep writing here. The work of the site is the text itself, not the container surrounding it. As much as the web designer in me hates to admit it, carrier pigeons have delivered more important words on paper with much less design.”

Redesign update

Over two years ago, I wrote about how I was going to redesign my personal blog. I did not intend for it to take two years. I thought it would be a minor thing I worked on in my spare time during COVID lockdowns.

Unfortunately, I have had no spare time. In those past two years, my work has exploded, my wife and I bought our first house, and we had some health concerns that required our attention. (We’re fine, don’t worry.)

So I’ve spent a grand total of 15 hours working on the redesign in two years, which is a paltry amount of focused efforts divided into a hopeless amount of working days. I’ve not been very successful.

What I want to share today are some failed designs. I think sharing the failure is as important as sharing the successes. Rather than share dozens of art boards, I’m cropping many of them to be around the same aspect ratio as most laptop displays.

A blog layout with metadata to the left of each post A new home page design with no blog posts on it The same home page, but with vertical navigation A home page design with About information, Contcat info, and work listed below. A similar home page design as to the above, but this is has better alignment to an invisible grid A revised layout that insists upon keeping the case studies in my portfolio, but adds very obnoxious personal branding. A design for sharing testimonials on my personal site.

In over two years, I haven’t gotten past some basic wireframes for this site. I’d be ashamed of my progress if I hadn’t worked on so many other projects in that time (I have yet to update my portfolio with any of the work due to a lack of time).

But what I have is terrible. These designs have too much white space, or too little white space. They lack any sense of coherency or purpose. What is the point?

I overthought everything to such an extent that my website started to look more like a portfolio than it did a simple blog. I already have a portfolio. A few months ago, I asked my wife what her thoughts were, and she told me what I already knew: I’d entirely overthought my goals here. Somehow, I’d stopped making a blog and started making a résumé.

What I want to make remains simple: I want a place where I can share blog posts or title-less, tweet-length updates. I want a place I can share some personal images (not client work). Maybe one day I’ll share my film reviews too.

In short, I want to lessen my dependence on third-party social media and make a small home for myself on the web. I do not care if this home houses my work. That’s what my portfolio is for.

When The Verge rolled out their new redesign, I realized they’d already done what I want to do: they have mixed status updates and lengthy blog posts in one feed. Their new site’s design is not entirely to my taste, but its function is closer to what I wanted to do two years ago.

Sometimes, when you’re working on a project, you drift away from your intended purpose. You become so enamoured with all the possibilities that you forget why you started in the first place. One must say no to all these ideas if they are ever to accomplish their purpose. Assuming the stated purpose is good, and assuming the intent is there, then the designer’s goal is to remove distractions. The designer must say no to a thousand new ideas that distract from the statement of the original.1

A multi-column blog post layout, with post metadata on the left and footnotes to the right of the text in the gutter.

That doesn’t mean some ideas don’t have merit. I have become fascinated with indented margins and side notes. Hanging margins are nice because they allow for left-aligned metadata that can float to the left of the article. Side notes are nice because it’s easier to find footnotes in place while reading an article. (Klim’s blog posts are the first place I can recall seeing this online, although side notes have existed in the marginalia of books for longer than anybody’s living memory). I plan on using side notes on my portfolio blog, where I already incorporate indented margins. Every idea has its place.

In the meantime, I’m throwing all my designs for my personal website out the window, and I plan on making something radically simpler. I know what it needs to look like. Now all I need is some free time.

  1. For what it’s worth, this is why so many startups fail. They are so busy promising feature after feature in an effort to steal money away from foolish, prideful investors, that they never accomplish their stated purpose. Eventually, the sole reason for their existence is conning investors out of money. One day, those investors catch on. Then the startup is done. 

    If the idea had true merit, and the product team could say no to their distractions, and the people on that team could accomplish the goal and make a product that was delightful, we stop calling them startups. Eventually, those are just companies with successful products. ↩︎

Redesign: Selecting Type

The atomic units at the heart of every block of text are the letter shapes – the forms they take. They have the single largest impact on the overall vibe of a design. To the annoyance of some of my clients, I am obsessive about this at the beginning of any project. Selecting a typeface has a larger long-term impact than almost any other design decision.

The typefaces, or fonts, or whatever you want to call them – it doesn’t really matter – impact the voice” people read your words in. They can determine whether your website feels editorial, authoritative, strong, modern, friendly, casual, or cold.

This makes typeface selection a fickle thing. Sometimes, it’s just about the tone of the text. Letterforms can be deceiving; context is necessary to understand how type looks. You have to see it rendered in paragraphs.

We have been lucky in the design community to have some great writing on this recently. If you have no idea what I’m talking about, Frank Chimero wrote a great primer as part of his redesign series. It’s a great introduction to picking typefaces.

Let me share my favourite part with you. At one point, Frank demonstrates the differences between Basis Grotesque and Avenir by examining the detail in their letterforms. He concludes that a reasonable person would presume, based on the letterforms alone, that Avenir is less quirky than Basis Grotesque. But then he shows them each in paragraphs. It’s the opposite of what a reasonable person would expect.

Here’s Frank:

My bet is that most people would identify Avenir as the more flavorful” typeface in a paragraph context. An unexpected inversion has happened. The typeface with traditional letter shapes (Avenir) reads more distinctively than the typeface with quirks in its design (Basis). Basis’s oddities become less noticeable when typeset smaller, and the proportions of Avenir (it’s roundness, it’s size contrast between upper- and lowercase letters) go further in establishing the typeface’s fingerprint and impacting the text’s atmosphere.

In short: typography often lies to us. Paying attention to the shape of individual letters without paying attention to how the font works in the whole of the design work is sort of like picking a partner based on their eye colour and BMI. You’re missing the forest for the trees, and you come away with the wrong impression entirely.

Frank isn’t the only person writing about this. The super-smart folks at Hoefler, who have designed some of the finest typefaces available in the market, recently shared how basic pangrams (like the quick brown fox jumps over the lazy dog”) have failed them during the design process of their typefaces.

Jonathan Hoefler writes:

In years past, our proofs were full of pangrammatic foxes and lynxes and the rest, which made for some very merry reading. But invariably, I’d find myself staring down a lowercase J — and if I questioned the amount of space assigned to its left side, I’d set off in search of some confirmation in the proof. Each time, I’d be reminded that while pangrams delivered all kinds of jocks and japes and jutes and judges, even our prodigious list featured not a single word with a J in the middle.

Hoefler has gone on to open-source their own pagrams (on Github), which I happen to really like, so I’ll use them throughout the rest of this post as examples.

Here’s what I find interesting about Hoefler’s post: most pangrams are a single sentence long. Hoefler’s new pangrams feature long-running sentences. Side by side, the words don’t make sense, but one can get a feel for how a typeface reads.

Picking a genre of type

I say all that to say two things: first, selecting typefaces is hard because, no matter what we mock up, our impressions of the type might change once we see it in properly rendered text.

Second, picking typefaces requires knowing a little bit about your long-term plans for the project. That’s why I wrote my post about what I’d like to do with this website first.

Let’s recap what’s on the website now, and what could eventually be on the website:

  1. Blog posts like this one. Sometimes long, essay-like mini-novellas. Sometimes short status updates.
  2. Photo sets, eventually.
  3. Perhaps brief film reviews and other assorted items of personal interest.
  4. I may start logging books I read here as well.

I said in my last post that I would like the site to add an air of quiet elegance” to my writing. That makes a serif the obvious choice for extensive writing, like blog posts.

Most of the other text on the site is metadata: image captions, brief film reviews (if that comes to pass at all), dates, tags, and the like. A sans-serif is a great choice for that.

Of course, a sans-serif is also a great choice for a heading.

The obvious” choice is one sans-serif and one serif. It may be worth exploring another option, though: one sans-serif for headings, and one sans-serif for metadata.

That would give me three typefaces:

  1. An editorial font for reading.
  2. A heading font.
  3. A micro” font – a typeface for small text. Something like 13px or smaller.

This is a good place to start.

Now that we’ve narrowed down our ideas, let’s select a couple typefaces I might use for the initial mockups.

Everything I said earlier still applies. It’s hard to pick type. I might change my mind. The goal today isn’t to pick one font. The goal is to narrow down the choices to just a couple in each category.

How to analyze typefaces

If you’re new to this, or if you’re a budding designer looking for tips, let me share how I analyze typefaces.

I primarily consider three aspects of each face:

  1. Character. What does the font look like? Most people have a pretty natural understanding of this; after all, we intrinsically know it’s better to write a report in Times New Roman than Comic Sans. Times New Roman _​looks_​scholarly and intelligent; Comic Sans does not. This can become very nuanced, though: is a typeface playful or warm? How does that change the way the text reads? These are all questions I consider as I look at a font.
  2. Contrast. When we talk about contrast in type, we’re talking about the difference in thickness between their horizontal and vertical strokes. A high-contrast typeface is great for headlines, but won’t read as well at small sizes. A great example of an extreme high-contrast typeface is Didot from Hoefler & Co. (Because I plan on using the serif for text, I want to avoid something this high-contrast.)
  3. X‑height. In plain english, the x‑height of a font is the height of the lowercase x” – or any other letter without ascenders (like in the letter d”) or descenders (like in the letter q”). If the x‑height is tall, that means that x” is nearly as tall as d”. And if it’s short, it’s the opposite. Typefaces designed for body text typically have tall x‑heights.

Picking a serif typeface

The serif typeface makes up the bulk of the body of text on this website. In my mind, it is absolutely critical to select the right one.

I already have a general idea of what I’m looking for. I’d like to incorporate an editorial serif: these are the typefaces used in (or inspired by) newspapers. Think Times New Roman. (Don’t worry; I won’t use Times New Roman.) I like the air of elegant authority these faces provide.

We give some credence to what we read in newspapers, and using a typeface akin to a newspaper font seems like an easy way to add gravitas to almost any text.

There are a few options in this category that are worth immediate consideration: Mercury from Hoefler, Tiempos Textfrom Klim, Freight Text from Joshua Darden, and Miller from Matthew Carter.

Before I make any comparisons here, it’s important to state that there aren’t any wrong answers here. Finding the right type is about creating the right feeling. It’s jazz, not classical.

Keep that in mind as we go through the rest of this. Without further ado: Let’s see how each of these look with the pangram that Hoefler and Co. have created.

A pangram of the Miller typeface

First up: Miller. I’m starting with Miller because it’s designed by Matthew Carter. If you’re reading this on the un-designed version of the site, you’re reading Georgia, which is also designed by Matthew Carter. I often think of Miller as Georgia’s more refined brother.

Look back at Miller. How does its contrast and x‑height influence the way you read the font? Does it make it easier or harder to read?

A pangram of Tiempos Text

This is Tiempos Text. (I labelled it Test” because I’m using the test version of the font on my computer; I haven’t purchased it yet.) Tiempos Text is perhaps the most unusual typeface in this collection of serifs. Kris Sowersby, its designer, meant it to be an update of Plantin and Times for more modern use.

(It’s worth mentioning that Kris keeps meticulous notes and has a highly detailed blog for type nerds like me. If you’re into that, you should read his design notes about Tiempos.)

The proportions of this typeface make it extremely easy to read. It’s also a very high contrast typeface. In a long paragraph like this, a font like Tiempos Text can feel overwhelming. But over the course of many paragraphs and hundreds of words, a font like Tiempos can feel like a warm, intelligent hug.

A pangram of Mercury

Mercury is the opposite end of this spectrum. It’s a newspaper-bound serif, through and through. Optically, you might notice that it appears smaller than Tiempos, even though they’re set at the same size. This is because the x‑height is shorter. It substantially changes the effect of the text.

Truthfully, Mercury is one of my favourite faces. It renders well at even the smallest of sizes, and can handle all sorts of abuse by printers too. As a print designer, I love how easy it is to set and work with. As a web designer, I love how old-school it feels on screen. It communicates text efficiently, but also feels different from most other serifs. (I would set it a little larger on the website, I think.)

A pangram of Freight

Finally, we have Freight. Freight Text is a beautiful typeface that’s part of a larger type family. It comes with a sans-serif accompaniment called Freight Sans, a version for micro-sized text called Freight Micro (that’s really more of a slab serif), and various different display sizes of the typeface.

I’ve used Freight before, and I think it’s a tremendous font. But looking at it here, I’m not sure it’s what I want to convey. You’ll note this is a higher contrast font than our other choices, which makes it harder to read on the dark background. While that doesn’t make it a bad font, it does make it appear daintier” and lighter” than my other choices.

To my eyes, Freight Text is almost too scholarly for my needs. It looks like it belongs in a paperback, not a newspaper. (If you’re a fellow designer and you’re offended by this; I’m sorry. While you’re here, I’m also not a huge fan of Gotham.)

To start with: I think I’ll stick to Mercury and Tiempos Text for now. I’ll play with each of them during the mockup phase and see what sticks. But at least this is enough to get me started.

Picking sans-serifs

When I think about obvious” and elegant” sans-serifs, I think about sans-serifs whose designs are obvious. For lack of better words, they look how one would expect letters should look. Of course, I’m referring to Helvetica and all its Swiss contemporaries (and the typefaces it inspired). Immediately, I think of typefaces like Söhne, Neue Haas Unica W1G, Neue Haas Grotesk, Acumin, Aktiv Grotesk, and so many others.

This category is much harder to distinguish. What makes Helvetica different from Helvetica Neue? Type nerds know they’re are differences, but in a blindfold test, I’m not sure we would actually notice them in a side-by-side comparison – not at text sizes.

For the sake of this illustration, we’re going to look at them at text sizes anyway.

A pangram of Neue Haas Grotesk

Take Neue Haas Grotesk, for example. It’s clearly inspired by Helvetica. Unlike many Helvetica descendants, Neue Haas Grotesk doesn’t attempt to correct” any of Helvetica’s so-called flaws. Instead, it attempts to capture the spirit of the original Helvetica – before decades of small tweaks caused many of its details to become lost to time.

Neue Haas Grotesk also has a display version for large headlines. It’s substantially more compressed than the text face, and has fewer ink traps. It’s really lovely. If you’re looking for a headline sans-serif inspired by Helvetica, I think it’s among the best.

Neue Haas Grotesk is a high contender for me.

A pangram of Söhne

But the difference between Neue Haas Grotesk and Söhne, pictured above, are much more subtle. (Again, I’m using a test version because I haven’t purchased the font.)

Söhne is actually a brand new, playful merge of Helvetica and Akzidenz-Grotesk (you can read about it in detail if you’re so inclined). It’s a little more compressed than Neue Haas Grotesk, but to the untrained eye, these faces would look identical.

But they’re not. In real world use, they communicate entirely different things. Söhne has a touch more character than Neue Haas Grotesk, but it’s also not strictly a Helvetica descendant.

A pangram of Neue Haas Unica

Neue Haas Unica is so close to Neue Haas Text, at least to my eye, that I could almost use them interchangeably and call them a day. (Apart from the lowercase a”.) But again, they render quite differently in actual text. Unica is more compressed as a text face, which makes it less readable, but as a headline, it’s less compressed than Grotesk’s display variation. At 16pt size, they appear incredibly similar, but as we talked about before, type can lie to us. At large sizes, Neue Haas Unica and Neue Haas Grotesk are different animals. (Demonstration below.)

A pangram of Acumin

Acumin, which is one of my favourite sans-serifs in recent years thanks to its unbridled utility, takes a whole different approach to this genre. Its letterforms are different, and it doesn’t strictly adhere to Helvetica’s style.

Acumin was, according to Adobe, designed to stray from Helvetica’s adherence to signage (read their design story). It’s available in a myriad of widths and weights that make it extremely comprehensive, with slightly angled terminals, single-stroke commas, and promotional numerals.

I like Acumin a lot, and I’ve used it on a couple projects, but I’m not sure it’s right for this site. The things that make it a better text face – its angled terminals and lowercase letters that ascend above the cap height – make it worse for headlines and wayfinding. If I were looking for a single sans-serif typeface that could serve for both headings and body text, I would carefully consider it.

In bigger detail

Still, it is worth comparing these four typefaces at a larger size as well, in an effort to see more of their character (no pun intended).

A headline size comparison of Neue Haas Grotesk, Söhne, Neue Haas Unica, and Acumin Pro.

At a larger size, the differences between these typefaces are much less subtle. Acumin is clearly best used at text sizes; it lacks subtlety as a headline.

Söhne is clearly the most unique in the pack: compressed, but still readable thanks to the unique details of the a” and the angled bowl of the e”. Look at the capital Q”! What a letter. Despite its geometric appearance, Söhne feels rounder and softer – without losing its neutrality.

Neue Haas Unica appears more compressed than the Neue Haas Grotesk, but that’s only because that image still uses the Grotesk’s text variant. Watch what happens when I use Grotesk’s display variant, which is more appropriate for large text like this.

Headline-sized comparison text for Neue Haas Grotesk Display and Neue Haas Unica.

Now, the tables have turned. Neue Haas Grotesk is much more compressed. Its weights are much chunkier. It feels like a signage poster. It also has a unique (and optional) lowercase a” that looks not dissimilar to Söhne’s playful characters.

These options makes Neue Haas Grotesk incredibly flexible.

Since I already have easy access to Neue Haas Grotesk through my Creative Cloud subscription, it’s the easy choice to make right now. It’s got the sort of character (no pun intended) that I’m looking for.

A third typeface?

Finally, a sans-serif for metadata: This could be any of the typefaces I just listed, in fairness, but in the spirit of trying out a few things before locking myself in to a single face, I can think of a few humanistic typefaces that could render well here. Whitney and Ideal Sans could be ideal contenders. Frutiger and FF Meta could work as well.

Let’s talk, briefly, about why I might use a humanist face here. Humanist sans-serifs add warmth when they’re paired with geometric or Neo-grotesque typefaces, like the ones we just considered. In this case, they might help avoid situations where my website might feel cold or bland.

I own Whitney (from Hoefler & Co.) already, which I purchased years ago for use with Unsung Sundays, so that’s easy to test. Similarly, Freight Sans (Joshua Darden) might work well here. I’d like to try Ideal Sans (Hoefler & Co.), which renders very well at microscopic sizes, but I don’t own it. I’ll test it later.

For now, let’s start with Whitney and Freight Sans.

A pangram comparison of Whitney and Freight Sans.

For this comparison, I grabbed a sample paragraph from a previous blog post to get a feeling of how they read.

My first note is that Whitney feels easier to read. My second thought is that Freight Sans is a wildly different approach to constructing a typeface like this. Consider the lowercase g” – these faces almost feel like they come from entirely different genres. In fact, nearly every letter looks totally different. It amounts to a very different reading experience.

All that being said, neither of these typefaces work well with the others I’ve selected. Unless I work with Mercury as my serif typeface, I think these faces are going to clash. I’m going to shelf this idea temporarily, but Whitney would be my choice if I had to make one.

Wrapping up

After 3,000 words, I have started to limit and narrow down my options. To make the final choice, I’ll have to start playing with them in real designs – and maybe even in code.

This is not unusual. In fact, it’s a good place to start with any design project. The blank page is intimidating because it has no limits. By selecting a handful of typefaces to trial, I’ve already begun creating constraints.

With Mercury, Neue Haas Grotesk, and Tiempos Text in mind, it’s time to start playing with layouts and type sizes.

Redesign: Thinking about the future

The future plans for a website dictate its design. The past gives it context and boundaries. 

There is a significant difference between designing a website and designing a printed object, like a magazine. Printed materials do not have to account for the technical debt of their pasts. The first issue of a magazine might look completely different from its twentieth issue. They are, for the most part, independent from one another. 

Websites are different. Old content is easy to find on the web, and the oldest content on a website will always share the new content’s design. A website’s design needs to account for what’s come before.

This means that your typical website re-design has a lot of work to do. 

Over time, this work can result in a degree of digital detritus that requires a wholesale overhaul of design and content. Even when that’s not the case, the work the design needs to accomplish increases exponentially with each additional type of content.

All this is a fancy way of saying: if your website has a ton of content types, the design itself increases exponentially to scale. A rising level of complexity lifts all boats. If you want to manage and maintain a unified, cohesive design for all your blog posts, pages, photos, and more, that’s a lot of content to design. 

What was, what is, and what will come to pass

This website has always been one thing: a series of blog posts, organized in index and archive pages in reverse chronological order. 

Most personal websites are just that: a collection of documents, ordered from the most recent to the oldest. This is what we’ve all accepted to be the norm on a weblog. There are no magazine-style landing pages, content isn’t being fetched from (or distributed to) multiple places, and it can load fast because it is typically bereft of the high-resolution imagery and javascript that slows down most websites.

In the future, I’d like to add more stuff to my website. I’d like it to feel less like a collection of loosely arranged documents, and more like my personal home on the web. I’d like to share links to the most recent case studies from my portfolio. I’d like to fetch what movies I’m watching from my Letterboxd profile. I might share the books I read1. I’d love to share status updates — like tweets, but on a platform I own instead of Twitter. Finally, I’d like to start sharing photos here too2. I’m not sure if I’ll share those photos in some sort of a grid, or if I plan on writing photo stories, or both.

All this new content means the design of this site will naturally increase in complexity. If I’m not careful, I worry that the site’s increased complexity and feature list will begin to resemble urban sprawl: poorly planned, boring to look at, and stripped of personality.

Typically, when I start seeing a long list of content needs and desires, I start worrying about website performance — particularly with my client work. How much javascript, CSS, and business logic do I need to animate all these different dinguses (dingi?), organize and re-organize content at different viewpoints, and display 200 images without forcing the reader to download a gigabyte of data from their cellular provider?3

As a front-end web design and developer, I’m well aware of the difficulties in making complexity both simple and performant. But it’s worth stating here: I expect this site to be fast, easy to use, and not destroy your smartphone bill.

Of course, some of that may be at odds with my other stated goal: to learn a component-based javascript framework like React or Vue. I do not believe the goal of performance is at odds with javascript. This site loads in 1/​3rd of a second. I think I can make it faster still.

In his redesign series, Frank Chimero stayed where he thought the design of his website was going to go before he started work on it. I like this. It’s interesting to see how a project mutates as it goes along. I’m inspired by this, so I thought I’d do something similar. I suspect that, since my website will be more complex than Frank’s, our end result will be very different. But I’m surprised at how aligned our initial goals are. Here’s what I’d like this website to be:

  1. Obvious: Just enough design to make the site feel like its design was inevitable. How else could it look?
  2. Performant: I mentioned this above, but to be clear, there is a large collection of people I respect in this industry who seem to think javascript and javascript-based frameworks, like React or Vue, make websites slower and less accessible. I’d like to prove them wrong. Even if I can’t, then this website will be an easy way to learn valuable lessons I can bring into my client work4.
  3. Timeless: I’d like the website to be simple and clear. I don’t want to add design that gets in the way. I don’t think my work will ever be comparable to Vignelli’s or Ram’s, but I’d like to take inspiration from their methodologies. I’d like the website to be useful, understandable, clear, and unobtrusive — and maybe have an air of quiet elegance.

With my long-term goals stated, and my thesis laid out, it’s time to begin considering the fundamentals. Because this website is going to be text-heavy, it’s about time we discussed type.

  1. Related: Goodreads is terrible and Amazon should hire somebody to redesign it. ↩︎

  2. I’m increasingly concerned that Instagram’s signal to noise ratio is getting worse. In the long run, it is also probably best to put anything I’d like clients to see on a domain I own, rather than feeding it to the Instagram algorithm. ↩︎

  3. Assuming people are outside. Don’t do that. Stay home. It’s a pandemic out there. ↩︎

  4. More on this in a future post, but as my clients’ sites have gotten progressively larger, even the compressed CSS files get huge. The last site I worked on had eight different content structures and five custom pages. Its zipped CSS file weighed nearly 200kb. That’s not because the code is bad or because I repeated myself. It’s just because that’s how much CSS was necessary. React-style components are a game-changer for websites like that. ↩︎

Redesign: Resets and blank slates

Before I redesign this site, I want it to look as default as possible, so its previous design won’t influence the look and feel of its next iteration.

This isn’t a normal” part of redesigning a website, but for the sake of this exercise, I thought it might be helpful.

When I begin any sort of redesign, I like to — at the very least — pretend the previous design doesn’t exist. If a redesign is called for, the previous design doesn’t solve the problem. First, we need to identify the problem we’re going to solve.

This is a rare case where I can actually wipe the slate clean. I can literally un-design my blog — so that’s what I’ve done.

As of today (June 2020), this site uses Georgia and your device’s default sans-serif, and the whole thing has a max width set up for easy reading. That’s it. 

Headers and paragraphs share consistent line heights and font sizes. This is not necessarily good design (although it certainly can be); it’s simply efficient. 

It is my hope that the current version of this site doesn’t look designed at all. 

Most of the site’s CSS just looks something like this:

p, h1, h2, h3, h4, h5, h6, li {
	margin:1.5em auto 0 auto;
	padding:0 1rem;

Apart from hacking away at the email sign up below, it doesn’t get much more complex than that. It’s only a couple hundred lines of CSS. (In all honesty, I wrote it very quickly, and it’s not well-written. It could be much shorter. But it’s functional, and it took me less than one afternoon.)

The point of doing something like this is to avoid re-using and regurgitating ideas I’ve had in before. Like every other designer, I’m guilty of recycling my ideas. But every problem is unique — even if this is the eight hundredth blog I’ve designed.

A reset removes the previous problems and allows me to focus on the problem at hand — so I can start thinking about the future.

Redesigning in the open

A couple weeks ago, I opened my website and realized one of my blog posts was broken. Why? I don’t know. Wordpress, probably. I debated whether or not I just fix the issue, and continue to deal with Wordpress, or if I follow my heart.

I’m following my heart.

Inspired by a couple of my personal heroes, Jonnie Hallman and Frank Chimero, I am re-designing my website in the open.

What does that mean?

Frank Chimero explained it well, so I’ll quote him here:

Here’s the idea: I’m going to be redesigning my site, and I will document the thoughts, process, and decisions here. (This is largely inspired by my friend Jonnie’s redesign blog.) By writing about it, it may help both of us. I can further develop my methods by navigating the friction of explaining them. I’ve been looking for a way to clarify and share my thoughts about typography and layout on screens, and this seems like a good chance to do so. And you? Well, perhaps the site can offer a clearly explained way of working that’s worth considering. That seems to be a rare thing on the web these days.

I don’t think that my blog will be as useful to anybody as Frank or Jonnie’s undoubtedly was, but I do think it is helpful to write one’s thoughts down in a place they can be easily referenced. 

It is also helpful to our craft to discuss our work in more detail. Khoi Vinh was so perturbed by the lack of detailed design commentary available that he started a podcast with Adobe to address the need.

My hope is that, by documenting the design process, I might help those who are starting out in this field.

In addition to documenting the design process, I plan on documenting and open-sourcing my code as well. For a variety of reasons (I’ll save them for a future article), I plan on learning Vue or React and creating a static website, rather than a PHP-style blog.

But both React and Vue can be hard to learn. In the past, it was much easier to learn how to make a website. You right-clicked anywhere on the page and selected Inspect Element” from the contextual menu. That was how I taught myself basic HTML and CSS years ago: I inspected what other people had made. 

Unfortunately, there is no way to inspect somebody’s modern web app and see how the sausage was made. Inspect Element is basically useless. You can’t tell if you’re looking at components, or layouts, or pages, or routes. You don’t know if they built the whole thing with NPM, React, Vue, Gatsby, Gridsome, or — honestly — Squarespace.

I don’t know what tech stack I’ll use yet — apart from a headless stack of some variety — but I will document what I’m learning, and share open source the site once I’m done. I hope, by documenting what I’m learning, as well as open-sourcing my code, I can make a positive contribution to people who are just learning this craft.