Visual Guides

Role: Designer, Developer, Researcher Technologies: HTML, CSS, JavaScript, SVG Focus Areas: Information Design, Visual Communication, Education, Interactive Reference

Project Overview

A series of self-contained HTML visual guides — each a single file, no dependencies — built to make complex or opaque topics immediately legible to a general reader. The format combines structured comparison cards, annotated diagrams, and interactive checklists into something that works as both a reference document and a reading experience.

Guides in the Series

Cotton Quality Guide — Eight sections covering fiber, yarn, knit structure, dye, shrinkage & finishing, pattern, craftsmanship, and a 60-second in-store audit checklist. Includes comparison cards (good vs. bad construction), callouts for common marketing traps (Egyptian cotton labeling, “ring spun” as a meaningless claim, silicone softener masking poor quality, dry-clean-only as a red flag), and tables for quick reference.

The Big Year — American Birding History — Six cinematic chapters tracing competitive birding from Audubon’s shotgun era through the modern Big Year record. Animated data, interactive SVG maps, scroll-triggered timelines. (See full project entry)

Fiber Probiotic Drink Guide — [Coming]

MIND Diet Meal Plans — [Coming]

Design Principles

Every guide follows the same constraints: single HTML file, no CDN dependencies, works offline. The goal is something you can save, share, and read anywhere — closer to a well-designed zine than a web app.

Comparison cards do more work than prose: showing good vs. bad side by side makes the difference visceral rather than abstract. Checklists are the payoff — the guide earns its length by ending with something actionable you can use immediately.