@synsci/cli-darwin-x64-baseline 1.1.77 → 1.1.78

package/bin/skills/infographics/references/design_principles.md

@@ -0,0 +1,636 @@
+# 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.