← Về thư mục
📄 / / profiles / r-and-d / raw_evidence / scientific-agent-skills / 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)
  2. Headlines and titles
  3. Large numbers or key statistics
  4. Hero images or main illustrations

  5. Call-to-action elements

  6. Secondary Elements (Seen Second)

  7. Subheadings and section titles
  8. Charts and graphs
  9. Icons and visual markers

  10. Key supporting text

  11. Tertiary Elements (Seen Last)

  12. Body text and descriptions
  13. Legends and labels
  14. Source citations
  15. 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:

Why This Matters

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

Accessibility Considerations

Visual Accessibility

  1. Color alone shouldn't convey meaning
  2. Add patterns, labels, or shapes

  3. Works for colorblind users

  4. Sufficient contrast

  5. 4.5:1 for normal text

  6. 3:1 for large text and graphics

  7. Text size

  8. Minimum 10pt for print

  9. Minimum 12px for digital

  10. Don't rely on color legends

  11. Label data directly when possible

Colorblind-Safe Design

Reading Accessibility

Quality Checklist

Before finalizing your infographic, verify:

Layout

Typography

Color

Content

Icons and Graphics

Accessibility

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