Design Expansion — Reading & Resources
A reading plan to push the Design notes past a single source. Both Design, Condensed and Front-End Web Design are currently pure Norman (source-count: 1) — strong on interaction, silent on craft. The disciplines Norman deliberately punts on (typography, multi-script type, color, grid, reading research) are exactly what the tsumugu reader (Silk-Seam) and dictionary (Paper & Ink) are made of. Each resource below is tagged with the note it should feed, so this stays a set of named threads rather than a pile of bookmarks.
Quick Use
- Work the Priority tier first — it closes the Norman-to-visual-craft gap fastest and is the most directly applicable to the tsumugu surfaces.
- Treat each row as a source that graduates a specific note, not as standalone reading. The Feeds column is the point.
- The CJK specs (jlreq / clreq) have no substitute in any general design book — they are the authority for ruby, line-breaking, and inter-class spacing.
- Cross-link, don’t silo: Make It Stick bridges Design ↔ Learning, Condensed.
Priority — closes the actual gap
| Resource | Type | Feeds | Why |
|---|
| Refactoring UI (Wathan & Schoger) | Book | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
| Butterick’s Practical Typography | Site (free) | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
| Web Typography (Richard Rutter) | Site (free) | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
| W3C jlreq — Japanese Text Layout | Spec | New: Multi-Script / CJK Typography | Authority on ruby placement, kinsoku (line-break prohibition), mojikumi (inter-class spacing), vertical text. tsumugu uses ruby + a reserved underline channel — correctness lives here. |
| W3C clreq — Chinese Text Layout | Spec | New: Multi-Script / CJK Typography | The Chinese-side counterpart to jlreq; CJK leading (~1.7), punctuation, line composition. |
| Typotheque — Typesetting CJK text | Article | New: Multi-Script / CJK Typography | Deep, practitioner-grade walkthrough of CJK typesetting principles. |
| Google Fonts Knowledge | Site (free) | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
Canon — typography & visual craft (depth, after the above works)
| Resource | Type | Feeds | Why |
|---|
| Thinking with Type (Ellen Lupton) | Book | [[wiki/Design/Design, Condensed | Design, Condensed]] |
| Type on Screen (Ellen Lupton) | Book | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
| The Elements of Typographic Style (Robert Bringhurst) | Book | [[wiki/Design/Design, Condensed | Design, Condensed]] |
| Grid Systems in Graphic Design (Müller-Brockmann) | Book | [[wiki/Design/Design, Condensed | Design, Condensed]] |
| Interaction of Color (Josef Albers) | Book | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
| Universal Principles of Design (Lidwell, Holden, Butler) | Book | [[wiki/Design/Design, Condensed | Design, Condensed]] |
Interaction — beyond Norman
| Resource | Type | Feeds | Why |
|---|
| Nielsen Norman Group | Site | [[wiki/Concepts/Design of Everyday Things | Design of Everyday Things]] |
| About Face (Alan Cooper) | Book | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
| Microinteractions (Dan Saffer) | Book | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
Learning product — desirable difficulty
| Resource | Type | Feeds | Why |
|---|
| Make It Stick (Brown, Roediger, McDaniel) | Book | [[wiki/Syntheses/Learning, Condensed | Learning, Condensed]] ↔ [[wiki/Design/Front-End Web Design |
Accessibility — deeper
| Resource | Type | Feeds | Why |
|---|
| Inclusive Components (Heydon Pickering) | Site | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
| Inclusive Design Patterns (Heydon Pickering) | Book | [[wiki/Design/Front-End Web Design | Front-End Web Design]] |
How these feed the vault
The expansion is three named threads, not nineteen loose links:
- Graduate
Front-End Web Design past source-count: 1 — Refactoring UI, Rutter, Butterick, and About Face give it real second/third sources for visual + interaction craft.
- Stand up a new
Multi-Script / CJK Typography page — jlreq, clreq, and Typotheque. The reader and dictionary work should link into it; nothing in the general design canon covers ruby, kinsoku, or mojikumi.
- Bridge Design ↔ Learning — Make It Stick lets the guess-first design decision and the
Learning, Condensed pedagogy cite the same source instead of asserting “desirable difficulty” twice.
Open Questions
- Should the CJK typography page live under
wiki/Design/ or wiki/Language/? It serves both.
- Which one source gets read first to graduate
Front-End Web Design — Refactoring UI (visual craft) or Rutter (web type), given limited reading time?
Related Pages