Design Doc:

May 2021

This document describes the decisions, process, and thinking behind this website, In doing so, it also demonstrates my approach to writing a UX design doc.

Related: design ethos.

Context and scope is my personal website where I showcase my work and share projects, photos, and writings. Previously, I had built and hosted the site with Squarespace. In this version, I plan to design and code it by myself.

Using services like Squarespace allowed me to focus on the content — the most important, no doubt — but required giving up fine control over its presentation. I became a passenger rather than a driver. I also didn’t have full ownership of my site: the site is “mine” as long as I pay rent; once unsubscribed, I need to move all my stuff out if I don’t want to lose them.

Crafting the site myself is an opportunity to bring everything back to the essentials: no CMS, database, or bloated JavaScript; just plain, straightforward HTML & CSS written by a human, readable by another. I can also use this chance to catch up on the latest in web development and practice my HTML/CSS skills.



Detailed design

In the sections below, I’ll cover some design decisions and the rationale behind them. Although it looks tidy and linear here, the actual process was far more convoluted and interwoven: changing the primary typeface affects the body text size, the text size affects the grid, et cetera, et cetera. See alternatives considered section for select detours and deadends.

Typeface: Inter

To keep it simple and essential, I decided to use just one typeface for body text, headings, captions, and UI elements. As a soft requirement, the typeface chosen should look similar to fallback system UI faces — San Francisco, Roboto, Segoe UI, etc. — which are all sans serif.

I chose Rasmus Andersson’s Inter because it is:

To complement the primary typeface, I also chose EB Garamond, an open-source, digital replication of the classic serif face designed by 16th-century typographer Claude Garamont. It will be used sparingly in places such as quotations.

Type scale: 14 • 18 • 24

Next, I needed to determine the body text size and use it as the origin to define a type scale. To do that, I first need to set some boundaries:

After extensive experiments, I decided to use 18 px Inter in regular as the body font. Line height is 24 px, which will be the unit for spacing: 2-line is 48 px, 4-line is 96 px, and so on.

Aside: I realized there’s no need to adjust text size based on the device: manufacturers have already done that work for us. An 18 px font displayed on an iPhone is about 83% the physical size of that on an iPad because the former has a higher pixel density. Likewise, the same font is physically enlarged to 120% when displayed on a Mac. However, because we usually hold our phones closer to our eyes and monitors farther, the optical sizes remain (roughly) the same.

From the body text, it’s not difficult to find suitable sizes for smaller & larger text: 14 px for captions, headers, and footers; 24 px for large headings. This scale will be the basis for all text styles.

Hierarchy: one change at a time

With the type scale defined, I moved on to creating hierarchy within the text. I counted five levels of hierarchy from my content:

  1. Title
  2. Heading
  3. Subheading
  4. Body
  5. Caption/notes/etc.

One way to communicate this structure visually is to increase text size (and often weight): subheadings bigger than the body, headings bigger than subheadings, and so forth. A problem with this approach is styling inflation: text size snowballs as the level goes up, making page titles comically large.

But sizing and weight aren’t the only tools for visual hierarchy. Here’s a list I adapted from Frank Chimero’s fantastic series on site redesign:

  1. Spacing (or positioning)
  2. Weight
  3. Color
  4. Size
  5. Typeface (or a different style: italic, small caps, etc.)
  6. Accent (graphical decorations)

My approach was: change one parameter at a time between levels and use the smallest increment necessary to prevent inflation.

I started with the obvious: let the lowest level headings (subheading) be the same size as body text, but with a heavier weight (semi-bold) and extra spacing above (2-line):

Next, higher-level headings should be more prominent visually, but it’s not necessary to increase both size and weight, so the weight stays the same:

For the title, I could alternate to increasing the weight again, but that would give it too much emphasis — there’s only one title per page, and it’s already at the top. Instead, I used spacing to do the trick (and color if the page has a subtitle):

Of course, the exact sizing and spacing are not rigid: the hierarchy should serve the content, not the other way around.

Color: monochromatic

Color is perhaps the easiest decision: there is none. To keep the design quiet and understated, I used three shades of grey against the background for high (body text), medium (supporting text, links), and low contrast. Nothing else to see here, quite literally.

The more interesting question to address is: why is it dark by default? The logic is as follows:

The last thing I’ll mention here is: color is where I indulged the logical, mathematical beauty I’m usually unable to on a customer-facing project. The three greys have a luminance of 88%, 44%, 22%, respectively, echoing the logarithmic nature of the human vision.

Grid: text spans up to 600 px, images vary by aspect ratio

The grid system for this site is simple: text flows until the max line length (600 px), top to bottom; images and videos are allowed to span beyond the measure. On some occasions, I use a 2-column layout on text (such as the index page) or images (such as photoessays).

The max line length was derived like this:

For images, the goal was to display portrait and landscape ones at the same size, only rotated; they should also look harmonious with text. After a ton of experiments, I determined the following dimensions:

IA & navigation: always just one tap away from home

I took a minimal approach to my site’s navigational structure: as flat as possible. Rather than coming up with arbitrary groupings, landing pages, and an intricate menu system to access them, I decided to lay it all out on my index page. Bonus effect: browsers will automatically treat “index.html” as the homepage.

The links to content pages find their way into one of these categories:

This flat structure also brings another benefit: you are always just one tap away from home. It allowed me to distill the header and footer on content pages to their purest form: the “header” is just a back button; the footer has my logotype (which also acts as a back button, so you don’t need to scroll back up) on the left and static text on the right.

Header & footer on the index page.
Header & footer on content pages.

Logotype & favicon: understated fun

Perhaps the only “personality” I added to my otherwise neutral and sterile personal site was the logotype & favicon design, although they came more by inspiration than aspiration.

The logotype idea came after failing to make the name work in a single line no matter how hard I tried. “What if we stacked them?” — hmm, interesting. “How about all lowercase?” — nope, doesn’t work. “What if we aligned them by the shared letter a?” — now we’re getting somewhere.

The favicon was an example of “limitation galvanizes imagination”: at 16×16 px size, no details in the logotype were discernable. So I kept reducing the mark until there’s only one letter left: a (times three).

Alternatives considered

Typeface: sans & serif alternatives.
Line height & line length: an analysis.
Type scale: exploration on an algorithmic scale.
Hierarchy: testing with filler content.
Grid: media & responsiveness.
Breakpoints: research on device sizes.
Color: switching to dark theme.
IA & navigation: alternative index page design.
Content pages: playing with layout & grid.