claude-scientific-skills/scientific-skills/infographics/references/design_principles.md

# Infographic Design Principles

This reference covers the fundamental design principles for creating effective, professional infographics.

---

## Visual Hierarchy

Visual hierarchy guides the viewer's eye through your infographic in a deliberate order, ensuring key information is seen first.

### The Hierarchy Pyramid

1. **Primary Elements** (Seen First)
   - Headlines and titles
   - Large numbers or key statistics
   - Hero images or main illustrations
   - Call-to-action elements

2. **Secondary Elements** (Seen Second)
   - Subheadings and section titles
   - Charts and graphs
   - Icons and visual markers
   - Key supporting text

3. **Tertiary Elements** (Seen Last)
   - Body text and descriptions
   - Legends and labels
   - Source citations
   - Fine print and footnotes

### Creating Hierarchy

**Size**: Larger elements attract attention first
- Headlines: 200-300% larger than body text
- Key stats: Make numbers 2-4x larger than labels
- Important icons: 1.5-2x larger than supporting icons

**Color**: Bright and contrasting colors draw the eye
- Use accent colors sparingly for emphasis
- Reserve the brightest color for the most important element
- Use muted colors for supporting information

**Position**: Top-left and center are seen first
- Place most important content at top or center
- Supporting details toward bottom or edges
- Reading flow: top-to-bottom, left-to-right (in Western cultures)

**Contrast**: High contrast elements stand out
- Dark on light or light on dark for key text
- Colored elements against neutral backgrounds
- Borders and shadows to lift key elements

**White Space**: Isolation draws attention
- Surround important elements with space
- Don't crowd key information
- Use spacing to group related items

---

## Layout Patterns

### F-Pattern Layout

Best for: Text-heavy infographics, lists, articles

```
┌─────────────────────────────────────┐
│ ████████████████████████████████████│  ← Top horizontal scan
├─────────────────────────────────────┤
│ █████████████████                   │  ← Second horizontal scan
├─────────────────────────────────────┤
│ █████                               │
│ █████                               │  ← Vertical scan down left
│ █████                               │
│ █████                               │
└─────────────────────────────────────┘
```

**Application:**
- Place headline across full width at top
- Important subhead on second line
- Key content aligned to left
- Less critical content on right

### Z-Pattern Layout

Best for: Minimal content, landing pages, single-message infographics

```
┌─────────────────────────────────────┐
│ ●────────────────────────────────→ ●│  ← Start top-left, scan right
├─────────────────────────────────────┤
│      ╲                              │
│        ╲                            │  ← Diagonal scan
│          ╲                          │
├─────────────────────────────────────┤
│ ●────────────────────────────────→ ●│  ← Bottom left to right
└─────────────────────────────────────┘
```

**Application:**
- Logo/headline top-left
- Key visual top-right
- Diagonal eye movement through center
- Call-to-action bottom-right

### Single Column Layout

Best for: Mobile-friendly, scrolling content, process infographics

```
┌───────────────┐
│    HEADER     │
├───────────────┤
│   Section 1   │
├───────────────┤
│   Section 2   │
├───────────────┤
│   Section 3   │
├───────────────┤
│   Section 4   │
├───────────────┤
│    FOOTER     │
└───────────────┘
```

**Application:**
- Vertical scrolling content
- Step-by-step processes
- Timeline infographics
- Mobile-first design

### Multi-Column Layout

Best for: Comparisons, feature lists, complex data

```
┌─────────────────────────────────────┐
│           HEADER/TITLE              │
├──────────────┬──────────────────────┤
│   Column 1   │      Column 2        │
│   --------   │      --------        │
│   Content    │      Content         │
│   Content    │      Content         │
│   Content    │      Content         │
├──────────────┴──────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘
```

**Application:**
- Side-by-side comparisons
- Pros and cons lists
- Feature matrices
- Two categories of information

### Grid Layout

Best for: Multiple equal-weight items, statistics, icon grids

```
┌─────────────────────────────────────┐
│           HEADER/TITLE              │
├───────────┬───────────┬─────────────┤
│   Item 1  │   Item 2  │   Item 3    │
├───────────┼───────────┼─────────────┤
│   Item 4  │   Item 5  │   Item 6    │
├───────────┼───────────┼─────────────┤
│   Item 7  │   Item 8  │   Item 9    │
├───────────┴───────────┴─────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘
```

**Application:**
- Multiple statistics (2x2, 3x3, 2x3 grids)
- Icon collections
- Feature highlights
- Team member displays

### Modular/Card Layout

Best for: Varied content types, flexible information, modern designs

```
┌─────────────────────────────────────┐
│           HEADER/TITLE              │
├───────────────────┬─────────────────┤
│                   │      Card 2     │
│     Card 1        ├─────────────────┤
│     (large)       │      Card 3     │
├───────────────────┼─────────────────┤
│      Card 4       │      Card 5     │
└───────────────────┴─────────────────┘
```

**Application:**
- Mixed content types
- Varied importance levels
- Modern dashboard style
- Magazine-style layouts

---

## The 60-40 Rule

The optimal infographic balances visual and text content:

- **60% Visual Elements**: Icons, charts, illustrations, images, shapes
- **40% Text Content**: Headlines, labels, descriptions, data

### Why This Matters

- Too much text: Feels like a document, not an infographic
- Too many visuals: Lacks substance and clarity
- Right balance: Engaging AND informative

### Applying the Rule

**Visual Elements (60%)**
- Charts and graphs
- Icons and symbols
- Illustrations
- Photos
- Decorative shapes
- Color blocks
- Lines and connectors

**Text Elements (40%)**
- Headlines and titles
- Subheadings
- Data labels
- Brief descriptions
- Source citations
- Calls to action

---

## White Space (Negative Space)

White space is the empty area between and around elements. It's not wasted space—it's a design tool.

### Functions of White Space

1. **Improves Readability**: Gives eyes rest between content
2. **Creates Focus**: Isolated elements attract attention
3. **Groups Content**: Related items appear connected
4. **Adds Elegance**: Premium feel to design
5. **Reduces Clutter**: Prevents overwhelming viewers

### White Space Guidelines

**Margins**: Space around the entire infographic
- Minimum 5-10% of width/height
- More margin = more premium feel
- Consistent on all sides

**Padding**: Space inside elements (boxes, cards)
- Minimum equal to text line height
- More padding for important elements
- Consistent within similar elements

**Gaps**: Space between elements
- Related items: Small gaps (8-16px)
- Unrelated items: Large gaps (24-48px)
- Sections: Largest gaps (48-72px)

**Line Spacing**: Space between lines of text
- Body text: 1.4-1.6x font size
- Headlines: 1.1-1.3x font size
- Lists: 1.5-2x font size

---

## Typography

### Font Selection

**Sans-Serif Fonts** (Recommended for Infographics)
- Clean, modern appearance
- Better screen readability
- Professional feel
- Examples: Arial, Helvetica, Open Sans, Roboto, Montserrat

**Serif Fonts** (Use Sparingly)
- Traditional, authoritative feel
- Good for headlines in formal contexts
- Examples: Georgia, Times New Roman, Playfair Display

**Display Fonts** (Headlines Only)
- High impact for titles
- NOT for body text
- Examples: Impact, Bebas Neue, Oswald

### Font Pairing Rules

1. **Maximum 2-3 fonts** per infographic
2. **Contrast is key**: Pair different styles (serif + sans-serif)
3. **Establish roles**: One for headlines, one for body, one for accents
4. **Maintain consistency**: Same font for same purpose throughout

**Safe Pairings:**
- Montserrat (headlines) + Open Sans (body)
- Playfair Display (headlines) + Roboto (body)
- Bebas Neue (headlines) + Lato (body)
- Oswald (headlines) + Source Sans Pro (body)

### Font Sizes

| Element | Size Range | Weight |
|---------|------------|--------|
| Main Title | 36-72pt | Bold |
| Section Headers | 24-36pt | Bold/Semi-bold |
| Subheadings | 18-24pt | Semi-bold |
| Body Text | 12-16pt | Regular |
| Captions/Labels | 10-14pt | Regular/Light |
| Fine Print | 8-10pt | Light |

### Typography Best Practices

1. **Left-align body text** (easier to read than centered)
2. **Center-align headlines** (for impact)
3. **Limit line length** to 45-75 characters
4. **Use bold sparingly** for emphasis
5. **Avoid all caps** for body text (hard to read)
6. **ALL CAPS acceptable** for short headlines/labels
7. **Maintain contrast** between text and background (4.5:1 minimum)

---

## Story Structure

Every effective infographic tells a story with three parts:

### 1. Introduction (Hook)

**Purpose**: Grab attention, establish topic

**Elements:**
- Compelling headline
- Eye-catching hero visual
- Key statistic or question
- Topic introduction

**Best Practices:**
- Make it impossible to ignore
- Promise value ("Learn how to...")
- Create curiosity
- 10-15% of total space

### 2. Body (Content)

**Purpose**: Deliver the main information

**Elements:**
- Data and statistics
- Step-by-step content
- Comparisons and analysis
- Supporting visuals

**Best Practices:**
- Logical flow (chronological, importance, or categorical)
- Clear section breaks
- Balance visuals and text
- 70-80% of total space

### 3. Conclusion (Takeaway)

**Purpose**: Summarize, call to action

**Elements:**
- Key takeaway or summary
- Call to action
- Source citations
- Branding/attribution

**Best Practices:**
- Reinforce main message
- Clear next step for viewer
- Don't introduce new information
- 10-15% of total space

---

## Alignment and Grids

### Grid Systems

Use invisible grids to align elements consistently:

**Column Grid** (Most Common)
- 2, 3, 4, or 6 columns
- Elements span one or more columns
- Gutters (gaps) between columns
- Creates orderly, professional look

**Modular Grid**
- Columns + rows = modules
- More flexibility for varied content
- Good for complex layouts
- Dashboard-style designs

### Alignment Types

**Left Alignment**
- Most common for text
- Creates strong left edge
- Easy to scan
- Professional appearance

**Center Alignment**
- Good for headlines
- Creates symmetry
- Use sparingly for text
- Works for single elements

**Right Alignment**
- Rarely used for primary content
- Good for numbers in tables
- Can feel unusual in Western design
- Use intentionally

### Alignment Best Practices

1. **Pick one primary alignment** and stick to it
2. **Align related elements** to the same edge or center
3. **Use invisible grid lines** for consistency
4. **Avoid random placement**—everything should align to something
5. **Create visual connections** through alignment

---

## Color Usage

### Color Functions in Infographics

1. **Establish hierarchy**: Bright colors for important items
2. **Group related items**: Same color = same category
3. **Create contrast**: Distinguish between elements
4. **Evoke emotions**: Colors carry psychological meaning
5. **Reinforce brand**: Consistent with brand identity

### Color Distribution

**60-30-10 Rule:**
- **60%** Dominant color (background, large areas)
- **30%** Secondary color (supporting elements)
- **10%** Accent color (highlights, CTAs)

### Color Psychology

| Color | Association | Best For |
|-------|-------------|----------|
| Blue | Trust, professionalism, calm | Corporate, tech, healthcare |
| Green | Growth, nature, money | Environmental, finance, health |
| Red | Urgency, energy, passion | Alerts, sales, food |
| Orange | Friendly, confident, creative | CTAs, youth brands |
| Yellow | Optimism, caution, attention | Highlights, warnings |
| Purple | Luxury, creativity, wisdom | Premium brands, education |
| Black | Sophistication, power, elegance | Luxury, formal |
| White | Clean, simple, space | Backgrounds, breathing room |

### Contrast Requirements

For accessibility (WCAG 2.1 AA):
- **Normal text**: 4.5:1 contrast ratio minimum
- **Large text** (18pt+): 3:1 contrast ratio minimum
- **Graphics and UI**: 3:1 contrast ratio minimum

Tools to check contrast:
- WebAIM Contrast Checker
- Coolors Contrast Checker
- Adobe Color Accessibility Tools

---

## Icon Usage

### Icon Styles

**Line Icons** (Outline)
- Clean, modern look
- Work well at small sizes
- Best for minimal designs
- Consistent line weight important

**Filled Icons** (Solid)
- Bolder visual impact
- Good for quick recognition
- Work well as focal points
- More accessible at small sizes

**Illustrated Icons**
- More personality and uniqueness
- Higher visual weight
- Best for playful designs
- May not scale well

### Icon Best Practices

1. **Use one style consistently** throughout the infographic
2. **Ensure recognizability**—icons should be immediately understood
3. **Maintain consistent size** for icons at the same hierarchy level
4. **Add labels** when icon meaning isn't 100% clear
5. **Match visual weight** of icons to surrounding elements
6. **Consider color** carefully—single color often cleaner
7. **Avoid icon overload**—not everything needs an icon

### Icon Size Guidelines

| Context | Recommended Size |
|---------|------------------|
| Hero/Feature icon | 64-128px |
| Section icon | 32-48px |
| List item icon | 24-32px |
| Inline icon | 16-24px |

---

## Data Visualization Best Practices

### Choosing Chart Types

| Data Type | Best Chart |
|-----------|------------|
| Comparison (few items) | Bar chart |
| Comparison (many items) | Horizontal bar |
| Parts of a whole | Pie/donut chart |
| Trend over time | Line chart |
| Distribution | Histogram |
| Relationship | Scatter plot |
| Geographic | Map/choropleth |
| Hierarchy | Treemap |
| Flow/process | Sankey diagram |

### Chart Best Practices

1. **Label everything**: Axes, data points, legends
2. **Start Y-axis at zero** for bar charts (avoid misleading)
3. **Limit pie slices** to 5-7 maximum
4. **Use consistent colors** for same categories across charts
5. **Remove chart junk**: No 3D effects, minimal gridlines
6. **Highlight key data**: Use color to emphasize important points

### Number Presentation

- **Large numbers**: Use abbreviations (1.2M, not 1,200,000)
- **Percentages**: Include % symbol, one decimal max
- **Comparisons**: Use consistent units and precision
- **Context**: Always provide reference points ("2x industry average")

---

## Accessibility Considerations

### Visual Accessibility

1. **Color alone shouldn't convey meaning**
   - Add patterns, labels, or shapes
   - Works for colorblind users

2. **Sufficient contrast**
   - 4.5:1 for normal text
   - 3:1 for large text and graphics

3. **Text size**
   - Minimum 10pt for print
   - Minimum 12px for digital

4. **Don't rely on color legends**
   - Label data directly when possible

### Colorblind-Safe Design

- Use colorblind-safe palettes (see color_palettes.md)
- Test with colorblindness simulators
- Add patterns or textures for differentiation
- Use labels and direct annotation

### Reading Accessibility

- Clear hierarchy and flow
- Concise text
- Simple language
- Adequate spacing
- Logical reading order

---

## Quality Checklist

Before finalizing your infographic, verify:

### Layout
- [ ] Clear visual hierarchy
- [ ] Consistent alignment (grid-based)
- [ ] Adequate white space
- [ ] Logical reading flow
- [ ] Balanced composition

### Typography
- [ ] Maximum 2-3 fonts used
- [ ] Readable font sizes
- [ ] Sufficient text contrast
- [ ] Consistent styling for same elements
- [ ] Left-aligned body text

### Color
- [ ] 60-30-10 distribution
- [ ] Colorblind-safe palette
- [ ] Sufficient contrast (4.5:1 text)
- [ ] Consistent color meanings
- [ ] Not overwhelming

### Content
- [ ] Clear story structure (intro, body, conclusion)
- [ ] 60% visuals, 40% text (approximately)
- [ ] Key message is prominent
- [ ] Data is accurate and sourced
- [ ] Call to action included

### Icons and Graphics
- [ ] Consistent icon style
- [ ] Appropriate sizes
- [ ] Recognizable meanings
- [ ] Not overused

### Accessibility
- [ ] Works in grayscale
- [ ] Patterns/labels supplement color
- [ ] Readable at intended size
- [ ] Logical flow without visual cues

---

Use these principles as a foundation, adapting as needed for your specific content and audience.