Posts about Site meta

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.¹

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.² You can now see all that on the Watching page.³

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 micro.blog 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. 

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.

August 21^st marks the tenth anniversary of Wildfire Studios — my freelance studio.

I never dreamt I’d be designing UIs, making websites, taking photos, and writing copy for ten years. To be honest, I never dreamt I’d still be in business after ten years! When I started freelancing, one year before I coined the business Wildfire Studios, it was mostly because there weren’t a lot of gigs for English majors in 2012, and I was approaching the end of my university years with no idea what to do with myself.

My first freelance gig was writing television commercials for a local film studio. They had big-name Canadian clients like Broil King, and immediately got me working on commercials for those clients. They invited me to a shoot I was involved in at Blackberry founder Jim Balsillie’s house. 

It was an amazing opportunity for a snot-nosed punk with no reputation, no degree, and no real résumé beyond a handful of writing awards from my high school years. If it wasn’t for this client, I wouldn’t be doing what I do today. I am eternally grateful.

When I started writing scripts for these folks, the owner of the studio — who I had met when I scooped him ice cream at my summer job — asked me if I knew what freelancing was. His blunt explanation has stuck with me since: ​“It’s simple. I give you money for completing the work by the deadline I give you. You work wherever you want, whenever you want. I don’t care if you’re on a drug binge at 3 in the morning in your underwear, so long as you get the work done on time, and you do it well.”

From there, I tripped and fell into writing about iOS for clients like Jim Dalrymple and the MacStorm folks. I wrote hundreds of stories over a one or two year period, while simultaneously exploring wedding photography, graphic and digital design, and print advertising.

Two years in, and only one year into Wildfire Studios, I was creating full-page ads for the Canadian division of multinational clients, who placed those ads in the national trade magazines of their choice. I would do the product photography, ad strategy and copy, and art direction, and send them the finished package when it was done.

All this work eventually funneled into a focus on digital design and front-end web development, which is what I am still focused on today.

I’ve been blessed to make my livelihood on my own terms. I often joke that I’m un-hireable. I’m in my thirties and never held a ​“real” job, which makes office politics completely foreign to me. 

I’ve also been blessed to work with a lot of wonderful clients over the years. Their repeat business, as well as the support of my wife (who I met ten years ago while I was naming the business), has made this job possible for me. Even ten years in, I’m still excited about the things I’m making with my clients today.

Wildfire Studios has always felt like a canvas of infinite possibilities to me. I’ve never felt like it’s limited me to just design. It’s allowed me to do any sort of creative work, whether that’s been photography (wedding, corporate events, and products), print advertising, website development, website and app design, and even a little writing for television.

Since 2020, my work has been focused on huge apps, websites, and design systems for clients and startups located all over the United States (much of which I am currently unable to share in detail). In Canada, I continue to focus largely on nonprofit work (like the new Donations site and evangelism site for EHC, the first two sites in a multi-year, five-part effort for their work.) I’m fortunate enough to be involved at a strategy level, sitting at the same table as executives to discuss pricing models, marketing strategies, and the opportunities for design to make an impact.

If you told me this is the work I would have been doing ten years ago, I wouldn’t have believed you. I feel extraordinarily blessed to be a part of all this today. Ten years ago, it would have seemed so unlikely as to be impossible.

Here’s to many more years of infinite possibilities.

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.”

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.

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.¹

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.

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.

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?

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.

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.)

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.

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.

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.

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.)

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).

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.

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.

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.

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 read¹. 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 too². 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?³

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 work⁴.
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.

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 {
	font-size:1em;
	line-height:1.5em;
	margin:1.5em auto 0 auto;
	max-width:42rem;
	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.

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.

I’m really behind on this, because my new portfolio has been live for a couple months now, but: I have a new portfolio.

The website is new from top to bottom: new and re-written case studies, new designs, new type, new photography, new About page, a more detailed contact page, and more. (Not much more. I mean, I almost described the whole site. But the home page is new too.)

If you’re curious about my work, I’ve now got seven case studies up, with three more (!!!) in the works. I’d be honoured if you checked the website out. 

One other note: my business runs on referrals. If you know anybody who has an interesting web or branding project and needs some help, I’d appreciate it if you connected us.

Absolutely thrilled to be featured on The Sweet Setup this week. I’ve been meaning to submit my gear to the website for over a year now, and just never found the time. The Sweet Setup is one of my favourite sites, and I’m thrilled to finally see my rig on there.

One thing I wish I remembered to mention: I would love a sit/​stand desk. When Hildegard and I can afford the luxury of a new desk, a Jarvis bamboo desk exists with my name on it. Edit: It turns out I did mention it. Oops. Ah well. I’d really like a standing desk, so it probably bears repeating.

I’ve already made a formal announcement on my portfolio site, but I wanted to share it here as well. I’m speaking on a panel about Promotion through Digital and Traditional Media at the first annual ​“Pride in Business” Business Forum and Trade Show on June 21^st.

There are more details about the panel on my portfolio blog, but if you’re in or around downtown Toronto on the 21^st, I’d love to see you there and hang out. You can get free tickets for the panel on Eventbrite.

There aren’t many people who frequent this site, but if you’re one of them, you may have noticed some changes around here:

1. The whole look and feel of the site has changed. (I was feeling playful, and it’s Saturday.)
2. There’s a ton of blog posts here that weren’t here before. That’s because I shut down one of my old blogs. I used to write on a blog called Overly Opinionated, where I shared my view on stuff happening with Apple and Nintendo. I wrote it pretty frequently for about two months, and then stopped. Since I figured I’d write there pretty infrequently, I thought there was no reason to have a separate site for it. So now all that content is here, and that site redirects to this one now.

All this amounts to a bit of spit and polish. This site looks more active than it’s been in some time, and it’s got a new, modern look and feel to it that I really dig.

Yep. In 2015, I’ve made a blog.

I know this is totally counter-cultural at the moment. Writing a blog on your own self-hosted website is increasingly unpopular. And I know Medium is all the rage right now, along with Tumblr, and I even understand why. But in the age of streaming and on-demand content, I really like having my name on the masthead.

I guess I’m a traditionalist. As far as I’m concerned, places like Medium are nice ways to give somebody else all your best words and let them find a way to monetize it. Let the kids have it.

Of course, I didn’t decide to start writing online again solely to rail against the system.

Why I Started a Blog

Before I became a web designer, I was a writer. I’ve been writing since I could read. I even convinced my parents to buy me a typewriter when I was around eight years old, thinking it would help me become more like Hemingway and Tolkien. (What eight-year-old thinks like that, right?)

I started writing professionally when I was twenty-one. I worked at an ice cream chain, and a gentleman came into the store who ran a television studio. We got talking, and when I told him I wanted to be a screenwriter, he told me his last writer just won an Emmy and to give him a call. He gave me his card.

From there, with no portfolio or CV (amazingly), I was suddenly writing commercials for a small production studio a five minute walk from my apartment. It was the dream gig for a young guy in school. That gig turned into opportunities to write for places like AppStorm, Paste Magazine, Jim Dalrymple’s The Loop Magazine, and more. Most of the time I would write app reviews or articles covering design in the Apple world. That writing led to opportunities doing design work, and I never looked back.

That is, until recently. I don’t have a place to share my thoughts with the world. I want to have somewhere to share my writing that, like my words, belong to me. Most importantly, I miss being forced to think about what I want to say. It’s one thing to have an opinion, but another to hold it up to such scrutiny as to write it down. So here we are.

Make It Feel Like Me

I was living in the apartment my wife and I share before we were married. Our wedding was at the end of the month, so to avoid paying for an extra month of rent at her old place, we got the keys for the new one a month in advance. I started moving the essentials there: we had a mattress, a bean bag chair, and my TV with a Wii U and PlayStation. We stocked the kitchen with just enough bowls and plates for me to get by, and I brought some of the old kitchen stuff from my college days down.

And that somehow felt like enough. It didn’t feel like home yet — that didn’t come until later — but it felt like me. That’s what my vision is for this site. I want it to feel like me. Nothing but some text, some funky colours, and maybe the occasional image or two. I didn’t want any crazy JavaScript or wild animations. I just wanted an online home for my thoughts, where they could live unfettered from the noise and distractions that come with being on the web circa 2015. A place that would be as opinionated as me, maybe even to the point of being unpopular. I don’t care really. This isn’t for you. Selfishly, this whole place is for me. And I think today’s web could use a little more of that selfishness. Maybe it’s the only way to keep everything from looking the same.

None of this is to say this place won’t get cluttered as time goes on. This is a brand new home with only a couple pieces of furniture. Give it a couple years to start looking crowded. By the time my wife and I moved into the apartment officially, there was enough stuff in it to fill Noah’s ark. And I’m excited for that to happen to this website, too. Not everything should be a masterpiece of Zen minimalism, least of all the online homes that represent our real selves. We’re messy and complicated people, right? So I figure the website will get messy and complicated too in time.

I’ve kept a couple things from my old blogs on here — just my most important thoughts from the past year. I didn’t want to clutter this place up with junk right out of the gate. I just wanted to make something new, and to learn a few things on the way. Expect me to do more of that around here. Sound good?