The Design of This Website

My design process, inspirational websites, fonts, colorschemes, layouts, and more

My old website contained all the same articles as this current one, but I didn't like how it looked. Back then (in 2022), I still used zola as the static site generator, pico.css v1.5 for the base template, and I stitched together my own top-level SCSS and HTML template based on the lightspeed template. For this new website design, I decided to continue using zola, but re-do the CSS from scratch.

My Design Process

To begin with, one must first be inspired by those superior to him. Here are my main inspirations.

Firstly, Butterick's Practical Typography is excellent, in particular his key rules. His website's vertical rhythm is ideal, his free font suggestions are good, and his ordered and unordered list styling is clean. My other top inspirations include:

Here is the design process I went through.

  1. Pick the font family
    • I wanted a serif font for the body, a sans-serif for the headings and other thematic elements, and a monospaced font for code segments
    • I also wanted a high quality font available on Google Fonts and a consistent style among all 3 fonts
    • I decided on Source Serif 4, Source Sans 3, and Source Code Pro, all part of the same font family
  2. Pick the colorscheme
    • Since I love Tokyo Night, I picked its 'Night' and 'Day' variants
    • Add the dark and light colorschemes to the stylesheet as sass variables and use @media (prefers-color-scheme: dark) to set CSS variables (my stylesheet)
    • Draft a basic HTML page with one column filled with text. The text should contain 3 levels of headings (h1 - title, h2 - section, h3 - subsection).
  3. Use Utopia. Pick the key parameters for the body text and grid column
    • Set up the type scale, space scale, and grid dimensions
    • There is a nice SCSS library which generates the CSS from the base font size, max/min viewport widths, and type scales
    • At this point, I picked the grid columns I wanted the content to land in, and played with the font sizes and viewport min/max until the result was something I liked
    • The ideal font size is a bit larger than what you expect. I thought 16px was fine early on, but I realized during this process that 19px for the max viewport was ideal.
    • Here is the Utopia setup from my stylesheet
  4. Tune the body text parameters
    • I tuned the line spacing, paragraph spacing, and letter spacing. Use the space variables provided by Utopia.
    • Toggle the colorscheme and make sure things look good in either one. You may want to adjust the default font weight slightly down for dark themes.
  5. Setup spacing
    • Set the document's vertical rhythm by setting font sizes and margin top / bottom for headings (my stylesheet)
  6. Style other common elements
    • Apply styles to hyperlinks, lists (ul / ol), blockquotes, callouts, code segments / monospaced fonts, math, images with captions, galleries and so forth
  7. Design the homepage
    • Once a styled article looked decent, I went to design the homepage, which usually needs custom styling for the page header, footer, and article listing
  8. Set up media queries
    • I used devtools to change the viewport dimensions to resemble tablets and phones and adjusted the grid columns for different viewport sizes
    • There is lots of talk about using container queries, but I just stuck with what I knew

Now here are some notes on the design of the homepage and article pages.

Home Page

I just sketched out how I wanted the header and footer to look, as well as any other sections.

Header
Vighnesh Iyer                  email, Github, LinkedIn, HN
---
Research articles organized by section (comparch, blog, ...)
Article name (date, month abbreviated / year) (optional NEW! badge)
  Short description / summary in 1 line
---
About Me | Pic
Short bio
---
Projects / Papers / Posters
Talks / Slides
---
Personal articles by section
---
Footer

Article Pages

I spent quite some time sketching out the stylistic features I wanted for article pages based on inspirational blogs I liked.

Layout

  • Tufte-style is crucial, right-hand sidenotes keep the main article from being too cluttered with nit points in parentheses
  • Left-handed TOC is quite nice too since articles often get too long
  • 3 logical breakpoints
    • Full width: TOC | Main content | Sidenotes
    • Next point: TOC (hidden under menu) | Main content | Sidenotes
    • Mobile: TOC (hidden under menu) | Main content (sidenotes clickable to be revealed underneath the paragraph)
    • Use a custom grid with viewport-oriented max width, popout figures that are a bit wider than the content
  • Contrast color article heading with summary and published time (see)
  • Looking at all the tufte-style websites, I realized that the TOC and sidenotes are placed using display: absolute | relative and NOT using CSS grid, I'll do that too
    • I will keep the main text centered, and offset the sidenotes and TOC (unlike the default tufte.css)

Elements

  • Headings: Hashes on headings to indicate nesting levels
  • Typography: Fluid font sizing using Utopia
  • Figures: Pop out 1 column past the article's main body, use captions
  • Callouts: An example, for highlighting article updates / retrospectives and relevant outbound links
  • Blockquotes: Use default <blockquote> element and style it
  • Details/summary: Change the default <details> marker
  • Code blocks: Implement a custom Zola shortcode vs using triple backticks in Markdown
    • File name + language optionally on a bar above the code block
    • Code highlighted via highlight.js on client-side
    • Don't use the default Zola highlighter that works server-side (it's low quality)
    • Use Fira Code or Source Code Pro as the monospaced font
    • Good inspiration for code block bar
  • Left sidebar TOC
    • Could use the <nav> component from pico.css in an <aside>
    • Generate the TOC programatically from a Zola template
    • Inject javascript to highlight and open/close the navigation elements, could use tocbot
  • Taxonomy badges: Used for articles about taxonomies
    • Each taxonomy has a set of terms (e.g. language is a taxonomy and Python, Scala, C++, Rust are terms)
    • The badge should look like |Language|Scala|
    • Each taxonomy should have an assigned color
    • Each term should be uncolored or have its own color scheme (this can get too messy though)

Inspiration Archive

There are many sources of inspiration including books, documentation sites, blogs, CSS frameworks, fonts, and color schemes. I've enumerated all the sources I've looked at in the course of designing this website.

High-Level Ideas

CSS Frameworks

CSS frameworks are kind of 'deprecated' now to be honest. You don't need any 'prebuilt' components, such as grids, typography, modals, or menus. It's much easier to build everything yourself in a minimal way, use CSS variables, use LLMs, and adapt bits of UI elements from other websites you think are nice.

However, CSS and component frameworks still provide plenty of inspiration, so you should check them out.

Blogs

Here are a bunch of blogs I think are inspirational. First, here are the Tufte-style ones.

And now here are blogs that have just a center column. Here are the ones I consider somewhat unique and special.

Here are some more nice center column blogs, but they are more vanilla than the previous selection.

Now, here are more center column blogs, but they have wide (often full-width) images / galleries.

Academic Webpages

Documentation

  • unison-lang.org
    • Beautiful: sidebar for footnotes on right (I would elide this), menubar on left, centered text, perfect code blocks, beautiful callouts, shallow per-article heading hierarchy (2 levels only), responsiveness is ideal (5 breakpoints)
    • Similar website
  • docs.modular.com

Exotic

Fonts

Color Schemes

Comment Systems

  • Disqus (slow, ugly, 3rd party)
  • Isso (easy SQLite backend)
  • Commento
  • utterances (Github issue based comment system - very cool, no special hosting required!) although you give up control of the comment data
  • remark42 (remark42 seems very nice and easy, anon commenting is first class supported as well as other external logins)