mirror of
https://github.com/K-Dense-AI/claude-scientific-skills.git
synced 2026-03-29 07:43:46 +08:00
Add infographics skill for creating visual data representations
New skill for generating scientific infographics including: - SKILL.md with comprehensive guidelines for infographic creation - Design principles and color palette references - Scripts for AI-powered infographic generation - Support for various infographic types (statistical, process, comparison, etc.) Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Vinayak Agarwal
636
scientific-skills/infographics/references/design_principles.md
Normal file
636
scientific-skills/infographics/references/design_principles.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user