209 lines
7.4 KiB
Markdown
209 lines
7.4 KiB
Markdown
# Design Guidelines
|
|
|
|
Detailed design principles for slide decks.
|
|
|
|
## Audience Guidelines
|
|
|
|
Design decisions adapt to target audience. Use `--audience` to set.
|
|
|
|
| Audience | Content Density | Visual Style | Terminology | Slides |
|
|
|----------|-----------------|--------------|-------------|--------|
|
|
| `beginners` | Low | Friendly, illustrative | Plain language | 8-15 |
|
|
| `intermediate` | Medium | Balanced, structured | Some jargon OK | 10-20 |
|
|
| `experts` | High | Data-rich, precise | Technical terms | 12-25 |
|
|
| `executives` | Low-Medium | Clean, impactful | Business language | 8-12 |
|
|
| `general` | Medium | Accessible, engaging | Minimal jargon | 10-18 |
|
|
|
|
### Audience → Density Mapping
|
|
|
|
Recommended density dimension based on audience:
|
|
|
|
| Audience | Recommended Density | Rationale |
|
|
|----------|-------------------|-----------|
|
|
| `executives` | minimal | One insight per slide, respect time |
|
|
| `beginners` | minimal → balanced | Single concepts, build understanding |
|
|
| `general` | balanced | Accessible but informative |
|
|
| `intermediate` | balanced | Standard information density |
|
|
| `experts` | balanced → dense | Can handle more data per slide |
|
|
|
|
**Automatic Density Selection**:
|
|
- If `--audience executives` → default to `minimal` density
|
|
- If `--audience beginners` → default to `minimal` or `balanced`
|
|
- If `--audience experts` → allow `dense` density
|
|
- Otherwise → default to `balanced`
|
|
|
|
### Audience-Specific Principles
|
|
|
|
**Beginners**:
|
|
- One concept per slide
|
|
- Visual metaphors over abstract diagrams
|
|
- Step-by-step progression
|
|
- Generous whitespace
|
|
|
|
**Experts**:
|
|
- Multiple data points per slide acceptable
|
|
- Technical diagrams with precise labels
|
|
- Assume domain knowledge
|
|
- Dense but organized information
|
|
|
|
**Executives**:
|
|
- Lead with insights, not data
|
|
- "So what?" on every slide
|
|
- Decision-enabling content
|
|
- Bottom-line upfront (BLUF)
|
|
|
|
## Visual Hierarchy Principles
|
|
|
|
| Principle | Description |
|
|
|-----------|-------------|
|
|
| Focal Point | ONE dominant element per slide draws attention first |
|
|
| Rule of Thirds | Position key elements at grid intersections |
|
|
| Z-Pattern | Guide eye: top-left → top-right → bottom-left → bottom-right |
|
|
| Size Contrast | Headlines 2-3x larger than body text |
|
|
| Breathing Room | Minimum 10% margin from all edges |
|
|
|
|
## Content Density
|
|
|
|
See `references/dimensions/density.md` for full density dimension specs.
|
|
|
|
| Level | Description | Use When |
|
|
|-------|-------------|----------|
|
|
| High | Multiple data points, detailed charts, dense text | Expert audience, technical reviews |
|
|
| Medium | Key points with supporting details | General business, mixed audiences |
|
|
| Low | One main idea, large visuals, minimal text | Beginners, keynotes, emotional impact |
|
|
|
|
**High-Density Principles** (McKinsey-style):
|
|
- Every element earns its space
|
|
- Data speaks louder than decoration
|
|
- Annotations explain insights, not describe data
|
|
- White space is strategic, not filler
|
|
|
|
**Density by Slide Type**:
|
|
| Slide Type | Recommended Density |
|
|
|------------|-------------------|
|
|
| Cover/Title | minimal |
|
|
| Agenda/Overview | balanced |
|
|
| Content/Analysis | balanced or dense |
|
|
| Data/Metrics | dense |
|
|
| Quote/Impact | minimal |
|
|
| Summary/Takeaway | balanced |
|
|
|
|
## Color Selection
|
|
|
|
See `references/dimensions/mood.md` for full mood dimension specs.
|
|
|
|
**Content-First Approach**:
|
|
1. Analyze content topic, mood, and industry
|
|
2. Consider target audience expectations
|
|
3. Match palette to subject matter
|
|
4. Ensure strong contrast for readability
|
|
|
|
**Quick Palette Guide**:
|
|
| Content Type | Recommended Mood |
|
|
|--------------|-----------------|
|
|
| Technical/Architecture | cool |
|
|
| Educational/Friendly | warm |
|
|
| Corporate/Professional | professional |
|
|
| Creative/Artistic | vibrant |
|
|
| Scientific/Medical | cool or neutral |
|
|
| Entertainment/Gaming | dark or vibrant |
|
|
|
|
## Typography Principles
|
|
|
|
See `references/dimensions/typography.md` for full typography dimension specs.
|
|
|
|
| Element | Treatment |
|
|
|---------|-----------|
|
|
| Headlines | Bold, 2-3x body size, narrative style |
|
|
| Body Text | Regular weight, readable size |
|
|
| Captions | Smaller, lighter weight |
|
|
| Data Labels | Monospace for technical content |
|
|
| Emphasis | Use bold or color, not underlines |
|
|
|
|
## Font Recommendations
|
|
|
|
**English Fonts**:
|
|
| Font | Style | Best For |
|
|
|------|-------|----------|
|
|
| Liter | Sans-serif, geometric | Modern, clean, technical |
|
|
| HedvigLettersSans | Sans-serif, distinctive | Brand-forward, creative |
|
|
| Oranienbaum | High-contrast serif | Elegant, classical |
|
|
| SortsMillGoudy | Classical serif | Traditional, readable |
|
|
| Coda | Round sans-serif | Friendly, approachable |
|
|
|
|
**Chinese Fonts**:
|
|
| Font | Style | Best For |
|
|
|------|-------|----------|
|
|
| MiSans | Modern sans-serif | Clean, versatile, screen-optimized |
|
|
| Noto Sans SC | Neutral sans-serif | Standard, multilingual |
|
|
| siyuanSongti | Refined Song typeface | Elegant, editorial |
|
|
| alimamashuheiti | Geometric sans-serif | Commercial, structured |
|
|
| LXGW Bright | Song-Kai hybrid | Warm, readable |
|
|
|
|
**Multilingual Pairing**:
|
|
| Use Case | English | Chinese |
|
|
|----------|---------|---------|
|
|
| Technical | Liter | MiSans |
|
|
| Editorial | Oranienbaum | siyuanSongti |
|
|
| Friendly | Coda | LXGW Bright |
|
|
| Corporate | HedvigLettersSans | alimamashuheiti |
|
|
|
|
## Visual Elements Reference
|
|
|
|
See `references/dimensions/texture.md` for full texture dimension specs.
|
|
|
|
### Background Treatments
|
|
|
|
| Treatment | Description | Best For |
|
|
|-----------|-------------|----------|
|
|
| Solid color | Single background color | Clean, minimal |
|
|
| Split background | Two colors, diagonal or vertical | Contrast, sections |
|
|
| Gradient | Subtle vertical or diagonal fade | Modern, dynamic |
|
|
| Textured | Pattern or texture overlay | Character, style |
|
|
|
|
### Typography Treatments
|
|
|
|
| Treatment | Description | Best For |
|
|
|-----------|-------------|----------|
|
|
| Size contrast | 3-4x difference headline vs body | Impact, hierarchy |
|
|
| All-caps headers | Uppercase with letter spacing | Authority, structure |
|
|
| Monospace data | Fixed-width for numbers/code | Technical, precision |
|
|
| Hand-drawn | Organic, imperfect letterforms | Friendly, approachable |
|
|
|
|
### Geometric Accents
|
|
|
|
| Element | Description | Best For |
|
|
|---------|-------------|----------|
|
|
| Diagonal dividers | Angled section separators | Energy, movement |
|
|
| Corner brackets | L-shaped frames | Focus, framing |
|
|
| Circles/hexagons | Shape frames for images | Modern, tech |
|
|
| Underline accents | Thick lines under headers | Emphasis, hierarchy |
|
|
|
|
## Consistency Requirements
|
|
|
|
| Element | Guideline |
|
|
|---------|-----------|
|
|
| Spacing | Consistent margins and padding throughout |
|
|
| Colors | Maximum 3-4 colors per slide, palette consistent across deck |
|
|
| Typography | Same font families and sizes for same content types |
|
|
| Visual Language | Repeat patterns, shapes, and treatments |
|
|
|
|
## Dimension Combination Guide
|
|
|
|
When combining dimensions, consider compatibility:
|
|
|
|
| Audience | Recommended Dimensions |
|
|
|----------|----------------------|
|
|
| Executives | clean + neutral + geometric + minimal |
|
|
| Beginners | organic + warm + humanist + minimal |
|
|
| General | any texture + any mood + humanist/geometric + balanced |
|
|
| Experts | grid/clean + cool + technical + balanced/dense |
|
|
|
|
| Content Type | Recommended Dimensions |
|
|
|--------------|----------------------|
|
|
| Tutorial | organic + warm + handwritten + balanced |
|
|
| Technical | grid + cool + technical + balanced |
|
|
| Business | clean + professional + geometric + balanced |
|
|
| Creative | organic + vibrant + humanist + balanced |
|
|
| Data-heavy | clean + cool + technical + dense |
|