← All posts

Editorial pro + scrapbook personal — the 3-brand visual design decision

ดีไซน์แบบ editorial กับ scrapbook — ทำไม 3 brand ไม่ใช่ 1

— design, build-in-public, personal-branding, ux, typography, case-study

Same person, three websites, three completely different visual languages. The professional site uses Newsreader serif with margin notes and drop caps; the personal site uses Caveat handwriting with polaroid frames and masking tape; the gaming site uses Pixelify Sans with block-shaped logos and lime-green accents. This post is about why each visual decision was deliberate — and how it maps to a specific audience’s trust signals.

The setup

Across anuthindanoi.com, palm.anuthindanoi.com, and kcraft.anuthindanoi.com, the same person publishes work to three different audiences. Tier 1 is for advisors, journals, and employers. Tier 2 is for friends, classmates, and people who like photos of vet-student life. Tier 3 is for the Thai Minecraft community.

The first iteration of all three sites used the same restrained typography-driven minimal pattern — Newsreader serif, max-width prose, em-dash separators. It worked, but it felt uniform in a way that obscured what each site was actually FOR. A potential research advisor and a Minecraft viewer were getting the same visual language. That’s a tell that the design wasn’t doing its real job.

So I split.

Tier 1 — editorial magazine

The decision: lean into what magazines and academic journals look like, because that’s the trust signal a research-track audience reads.

Concrete moves:

  • Massive Newsreader display for hero titles, clamping 3rem (mobile) to 7.5rem (desktop). The size announces “this is curated, not casual.”
  • Drop caps on the lede paragraph using Tailwind’s first-letter utility, set in the same Newsreader at ~5.5rem with a primary-color accent. Magazines do this; blog posts don’t.
  • Margin notes column on desktop using md:grid-cols-[1fr_180px], populated with JetBrains Mono labels (Status / Faculty / Location / Service / Index). Tufte sidenote energy without the academic-paper baggage.
  • Big stat numbers strip showing four key numbers (1,700+ vet exam Qs, 278 stray animals, 137 vet faculty mapped, 5 CUVETSMO Labs sub-sites live) in display-size Newsreader. Numbers > adjectives for credibility.
  • §-marker section labels (§ 01 / Building, § 02 / Research…) in tiny mono uppercase tracking. Borrows from print typography — implies the page has structure worth scanning.
  • Pull quotes in oversized serif italic with a primary-color left border. The research section uses one: “Faculty teach what they research — so research clusters become a predictor for exam-topic depth.” Pull quotes signal there’s something worth re-reading.

What I deliberately did NOT do:

  • No card grids. Sections are linear divide-y lists, like a magazine table of contents.
  • No status pills, chips, or badges. Real academic CVs don’t have “shipped” tags next to projects.
  • No reveal-on-scroll animations. Editorial content respects the reader’s time.
  • No emoji headers. (One exception: bullet emojis in interest lists, restrained.)

Reference inspiration: Maggie Appleton’s notes, Jason Tonsky’s writing, NYT Magazine print layouts, Edward Tufte sidenotes.

Tier 2 — scrapbook zine

The decision: lean into what an indie zine or a Tumblr-revival photo blog looks like, because that’s the trust signal a personal-content audience reads. The signal here is intimacy, not credibility.

Concrete moves:

  • Caveat handwritten headers at text-4xl-5xl. “snapshots”, “right now”, “what lives here” — all in script that feels like marker on a printed page.
  • Polaroid frames with tape strips and slight rotation. Each photo has a yellow / pink / mint tape strip overlay (CSS pseudo-element with a linear-gradient texture), and a 1-2° rotation that makes the page feel like an actual scrapbook. The grid is asymmetric — alternating photos sit mt-6 lower than their neighbors.
  • Sticky-note asides in yellow / pink / mint Post-it style. They’re inline <aside> blocks rotated ~1.5°, with Caveat text saying things like “btw — I write about cafés sometimes — p.” That’s not metadata; that’s voice.
  • Highlighter underlines on key phrases — chunky background-image gradient that mimics a yellow highlighter swiped across the text. Used sparingly on phrases like “Vet 86 cohort” and “COM IV/V finals.”
  • Squiggly scribble underlines on link text using an inline SVG with a wavy pink stroke. Replaces the conventional underline with something that feels more like a marker on paper.
  • Paper-card grouping for related content — white background with warm shadow and slight rotation. Cards stack like business cards on a desk.
  • Hand-drawn SVG arrows inline with Caveat captions — used to point at things in the way you’d doodle on a printed page.

What I deliberately did NOT do:

  • No professional headshot. The portrait is the Mt. Fuji cafe shot in a polaroid frame with a tape strip. Reads as “snapshot from a trip” not “branded headshot.”
  • No structured lists with bullet emojis like the professional site. Lists use pink ① ② ③ in Caveat script.
  • No mono section labels. The personal site doesn’t have §-markers because zines don’t have a table of contents.

Reference inspiration: Austin Kleon’s blog, Frank Chimero’s earlier sites, Are.na curated pages, indie zine websites circa 2020.

Tier 3 — Minecraft block-grid

The decision: lean into what Minecraft itself looks like, because the audience is the Thai Minecraft community and they’ll read the language fluently.

Concrete moves:

  • Pixelify Sans display font for all headings — pixel-block letters at large sizes match the in-game aesthetic.
  • Block-K logo built from CSS rectangles in grass-green + dirt-brown + lime-accent pixels. No image asset needed; pure CSS pixel art.
  • Lime accent color (#a3e635) for highlights — the in-game UI accent.
  • Dark zinc neutrals (zinc-900, zinc-100, zinc-400) — readable in a dim room, where most viewers actually use the site.
  • Channel-page layout following the YouTube channel page convention exactly: top creator block (logo + name + handle + subs and video count), big Subscribe button, “Most popular” featured video, “More videos” grid. Familiar = trust.
  • Real video data scraped from @KCraftch via Playwright, sorted by view count descending. Top video (145K views) gets the featured slot.
  • VideoObject + ItemList Schema.org so Google Video Search picks up all five videos with thumbnails, durations, and view counts.

What I deliberately did NOT do:

  • No serif typography. Pixel font everywhere.
  • No long-form prose. Channel page is video-grid first, prose minimal.
  • No “behind the K” creator section on the home page. The creator portrait lives on /about, deliberately separated from the channel content. Audience came for Minecraft, not the human.

Reference inspiration: Minecraft launcher UI, YouTube channel pages, Mojang’s own marketing site.

What the three brands share

Despite the visual divergence:

  • Same Schema.org Person entity declared at anuthindanoi.com/#person. All three sites cross-link via sameAs so Google sees one entity with three properties.
  • Same canonical author byline on every long-form post — “by Anuthin Danoi” links back to the canonical hub regardless of which tier the post lives on.
  • Same maintainer (me, for now). Eventually KCraft could have a second creator and the gaming brand wouldn’t need to be mine alone.
  • Same palm@anuthindanoi.com email for serious inquiries across all three.

The visual divergence isn’t an identity split; it’s an audience match. The same person can be a vet researcher AND a personal photo blogger AND a Minecraft creator. The visual language just respects what each audience expects.

Why this matters beyond aesthetics

The conventional advice is “consolidate your brand, one site, one identity, simpler is better.” That advice is correct for someone whose entire output points at one audience. For people whose work spans audiences with genuinely different trust signals — researcher vs. friend vs. fan — consolidation flattens the signal.

The reference cases for the 3-tier approach:

  • Lex Fridman: lexfridman.com (academic / podcast) vs. clips on YouTube/Instagram (mass audience). Same person, distinct surfaces.
  • Hank Green: hankgreen.com (author / business) vs. vlogbrothers (educational YouTube) vs. nerdfighteria (community brand). Three audiences, three surfaces.
  • Linus Sebastian: linustechtips.com (review site) vs. WAN Show (podcast brand) vs. Floatplane (subscription platform). Same person, different trust signals.

I’m nowhere near their scale, but the architectural decision generalizes regardless of scale: if you have multiple audiences with different trust signals, give each one its own surface.

What I’d do differently

In hindsight:

  • Build Tier 3 first, not last. KCraft has the clearest audience and the simplest visual language. Shipping it first would have validated the 3-tier idea sooner, before sinking time into the typography-heavy professional site.
  • Skip the polish-sweep phase. The first iteration of all three sites used the same restrained pattern — it took a separate creative-redesign session to differentiate them. Should have differentiated at first ship, not after.
  • Photograph for the brand earlier. The polaroid photos and the cafe headshot all came from existing trip pics. They work, but a deliberate photo session would have produced better OG cards and hero images.

Where to see the result

Part of an ongoing build-in-public series. See also: Five sub-sites in six months and Building My Online Identity in 7 Days.