This document describes the decisions, process, and thinking behind this website, tiansamxia.com. In doing so, it also demonstrates my approach to writing a UX design doc.
Related: design ethos.
Context and scope
tiansamxia.com 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.
Make it personal: have complete control and ownership over my site’s design & content.
Typography-first: use pure typographic techniques to define layout, establish hierarchy, and express interactivity.
Quiet & understated: the design should serve the content and not attract attention itself. Use minimal sizes, weights, colors, etc.
Follow the web’s grain: embrace the material’s intrinsic properties and use them to create a natural, straightforward interface.
Keep it fast, lightweight & responsive: keep things close to the metal: it helps performance and makes implementation easier.
Low dependency: rely on as few third-party tools & services as possible. When necessary, choose open-source over proprietary.
Make an impression. It’s not a goal to create a novel or eccentric site that stands out. Let the work speak for itself.
Fully responsive design. It shouldn’t break on a phone, but complex layout changes and responsive images can come later.
Support legacy browsers. If you’re reading this on the latest stable version of Safari, Firefox, or Chrome, you will be fine.
Light & dark mode, typeface switch, keyboard shortcuts, etc. These are nice-to-haves that may come in the future, but not now.
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.
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:
- Highly legible as the body face (smaller text);
- Flexible enough for headings (9 weights, in both roman and italic);
- Designed to function as UI (where its name came from);
- Free & open-source (“low dependency”).
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:
- Base unit: 8 px (half the default 16 px root font-size, or 0.5 rem);
- Line height in multiples of 8 px (16, 24, 32, etc.);
- Narrowest viewport supported: 320 px (4-inch iPhone models);
- Max line length should yield around 65–75 characters (optimal).
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:
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:
- Spacing (or positioning)
- Typeface (or a different style: italic, small caps, etc.)
- 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 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:
- To simplify implementation, I’ll begin with just one theme;
- A light theme doesn’t work well in the dark; dark works in both;
- Bonus: a true black background can save energy on LED displays, in addition to saving your eyes.
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:
- On a 320 px viewport, assume 16 px margins: 320−16×2=288 px;
- Double the columns & add a 24 px gutter: 288×2+24=600 px;
- Test it with body content: 600 px yields around 74 characters, which falls within the optimal 65–75 characters range.
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:
- 480×720 px (2:3)
- 540×720 px (3:4)
- 600×600 px (1:1)
- 720×540 px (4:3)
- 720×480 px (3:2)
- 960×540 px (16:9)
- 960×480 px (2:1)
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:
- Work: case studies related to my work projects.
- Projects: non-work projects, including this website.
- Stories: writings and photoessays.
- About: my design ethos, bio & contact information.
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.
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).