Visual Design for Presentations

Effective visual design combines diagrams, images, and consistent theming to create engaging, professional, accessible presentations. Master mermaid diagrams, stock photography, AI image generation, colorblind-safe palettes, and visual cohesion.

Evidence-based accessibility: This skill incorporates research-based best practices for accessible visual design. See references/presentation-best-practices.md for full guidelines.

Mermaid Diagrams

Mermaid provides text-based diagramming that renders beautifully in Slidev and exports well.

Flowcharts

Best for: Processes, decision trees, workflows

Basic syntax:

graph TD A[Start] --> B{Decision} B -->|Yes| C[Action 1] B -->|No| D[Action 2] C --> E[End] D --> E

Direction options:

• graph TD

• Top to bottom

• graph LR

• Left to right

• graph RL

• Right to left

• graph BT

• Bottom to top

Node shapes:

graph LR A[Rectangle] B(Rounded) C([Stadium]) D[[Subroutine]] E[(Database)] F((Circle)) G>Flag] H{Diamond} I{{Hexagon}}

Arrow types:

graph LR A-->B %% Solid arrow C-.->D %% Dotted arrow E==>F %% Thick arrow G-.-H %% Dotted line I---J %% Solid line

Edge labels:

graph LR A -->|Label text| B B -.->|Another label| C

Sequence Diagrams

Best for: API calls, interactions, communication flows

sequenceDiagram participant Client participant Server participant Database

Client->>Server: HTTP Request
Server->>Database: Query
Database-->>Server: Results
Server-->>Client: HTTP Response

Message types:

• -> Solid line

• --> Dotted line

• ->> Solid arrow

• -->> Dotted arrow

Activation boxes:

sequenceDiagram Client->>+Server: Request Server->>+Database: Query Database-->>-Server: Data Server-->>-Client: Response

Notes:

sequenceDiagram Client->>Server: Request Note right of Server: Processing Server->>Database: Query Note over Client,Server: Communication

Class Diagrams

Best for: Object-oriented design, data models, architecture

classDiagram class User { +String name +String email +login() +logout() }

class Order {
    +int orderId
    +Date date
    +calculateTotal()
}

User "1" --> "*" Order : places

Relationships:

• <|-- Inheritance

• *-- Composition

• o-- Aggregation

• --> Association

Link

• ..|> Realization

• .. Dependency

Visibility:

Public

Private

Protected

• ~ Package

State Diagrams

Best for: State machines, lifecycle, status changes

stateDiagram-v2 [] --> Draft Draft --> Review Review --> Approved Review --> Rejected Rejected --> Draft Approved --> Published Published --> []

With descriptions:

stateDiagram-v2 [] --> Idle Idle --> Processing : Start Processing --> Complete : Success Processing --> Error : Failure Error --> Idle : Retry Complete --> []

ER Diagrams

Best for: Database schemas, data relationships

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains PRODUCT ||--o{ LINE-ITEM : includes

CUSTOMER {
    string name
    string email
    int customerId
}

ORDER {
    int orderId
    date orderDate
    float total
}

Relationship types:

• ||--|| One to one

• ||--o{ One to many

• }o--o{ Many to many

• ||--o| Zero or one

Gantt Charts

Best for: Timelines, project schedules, roadmaps

gantt title Project Timeline dateFormat YYYY-MM-DD

section Phase 1
Task 1           :a1, 2024-01-01, 30d
Task 2           :after a1, 20d

section Phase 2
Task 3           :2024-02-01, 25d
Task 4           :2024-02-15, 20d

Theming Diagrams

Apply consistent colors:

%%{init: {'theme':'base', 'themeVariables': { 'primaryColor':'#3b82f6', 'primaryTextColor':'#fff', 'primaryBorderColor':'#2563eb', 'lineColor':'#6b7280', 'secondaryColor':'#8b5cf6', 'tertiaryColor':'#f59e0b' }}}%% graph TD A[Start] --> B[Process] B --> C[End]

Theme presets:

• default

• Standard colors

• dark

• Dark mode

• forest

• Green tones

• neutral

• Grayscale

• base

• Customizable (use themeVariables)

Diagram Selection Guide

Process or workflow? → Flowchart

• Shows steps and decisions

• Linear or branching paths

• Start and end points clear

System interaction? → Sequence Diagram

• Shows communication between components

• Time-ordered messages

• Request/response patterns

Data structure? → Class or ER Diagram

• Shows entities and relationships

• Object-oriented design

• Database schema

State changes? → State Diagram

• Shows status transitions

• Lifecycle representation

• Finite states

Timeline or schedule? → Gantt Chart

• Shows tasks over time

• Dependencies and milestones

• Project planning

Complex architecture? → Component + Flowchart

• Multiple diagram types

• Different abstraction levels

• Layered view

Stock Photography

Image Selection Criteria

Relevance:

• Directly related to slide content

• Reinforces message

• Doesn't distract

Quality:

• Minimum 1920x1080 resolution

• Sharp, well-lit

• Professional composition

Tone:

• Matches presentation style

• Appropriate for audience

• Consistent emotional impact

Diversity:

• Inclusive representation

• Varied perspectives

• Authentic, not staged

Unsplash Search Strategies

Concept-based searches:

• "team collaboration"

• "data visualization"

• "technology innovation"

• "business meeting"

• "cloud computing abstract"

Color-specific searches:

• "blue technology"

• "minimal white background"

• "dark professional"

Orientation searches:

• Add "landscape" for 16:9 slides

• Add "portrait" for split layouts

Quality indicators:

• High view count

• Professional photographer

• Editorial collection

Pexels Alternative

Similar to Unsplash, good backup source:

• Free for commercial use

• No attribution required (but appreciated)

• Good for videos too

Attribution

Include in presenter notes or final slide:

<!-- Image credits:

• Photo by [Photographer Name] on Unsplash
• https://unsplash.com/photos/[photo-id] -->

Image Optimization

Before using:

• Resize to 1920x1080 maximum

• Compress to reduce file size

• Save in appropriate format (JPG for photos, PNG for graphics)

Tools:

• ImageMagick: convert input.jpg -resize 1920x1080 output.jpg

• Online: TinyPNG, Squoosh

AI Image Generation

DALL-E 3 Prompting

Structure:

[Subject] + [Style] + [Composition] + [Colors] + [Details] + [Quality]

Examples:

Technical presentation:

Isometric illustration of cloud infrastructure, interconnected servers and databases, modern tech style, blue and purple gradient, clean minimal design, high detail, professional quality

Business presentation:

Professional photograph of diverse business team in modern office, collaborating around laptop, natural lighting, corporate environment, blue and gray tones, shallow depth of field, high resolution

Data visualization:

Abstract data visualization, flowing connections and nodes, information network concept, gradient from blue to cyan, dark background, glowing elements, futuristic style, 16:9 ratio

Best practices:

• Be specific about style (photo, illustration, 3D render)

• Specify aspect ratio (16:9 for slides)

• Include lighting details for realism

• Mention color palette for consistency

• Add quality descriptors (high detail, professional)

Midjourney Prompting

Structure:

/imagine [description] --ar 16:9 --v 6 --style [style]

Examples:

Concept illustration:

/imagine neural network visualization, interconnected nodes and pathways, abstract tech concept, electric blue and cyan, dark background, volumetric lighting --ar 16:9 --v 6 --style raw

Architectural diagram:

/imagine microservices architecture diagram, isometric view, containerized applications, kubernetes cluster, technical illustration, blue white color scheme, clean lines --ar 16:9 --v 6

Parameters:

• --ar 16:9 Aspect ratio for slides

• --v 6 Version 6 (latest)

• --style raw Less artistic, more literal

• --q 2 Quality (1-2, higher = better)

• --s 50 Stylization (0-1000, lower = literal)

Stable Diffusion Prompting

Positive prompt:

professional business chart visualization, clean modern design, blue gradient background, data analytics concept, high quality, detailed, 4k resolution, trending on artstation

Negative prompt:

blurry, low quality, text, watermark, signature, distorted, ugly, bad anatomy, poorly drawn

Settings:

• Steps: 30-50

• CFG Scale: 7-12

• Size: 1024x576 (16:9) or 1920x1080

AI Image Best Practices

Do:

• Generate multiple variations

• Iterate on prompts

• Specify technical requirements

• Match presentation theme

• Use consistent style across slides

Don't:

• Use first result without review

• Mix incompatible styles

• Include text in AI images (often garbled)

• Over-complicate prompts

• Ignore licensing terms

Visual Theme Development

Color Palettes

Corporate/Professional:

Primary: #1e40af (Deep Blue) Secondary: #6b7280 (Gray) Accent: #3b82f6 (Bright Blue) Background: #ffffff (White) Text: #1f2937 (Dark Gray)

Tech/Modern:

Primary: #3b82f6 (Blue) Secondary: #8b5cf6 (Purple) Accent: #06b6d4 (Cyan) Background: #0f172a (Dark Navy) Text: #f8fafc (Light)

Academic/Formal:

Primary: #1e3a8a (Navy) Secondary: #991b1b (Maroon) Accent: #92400e (Brown) Background: #fef3c7 (Cream) Text: #1c1917 (Black)

Creative/Energetic:

Primary: #dc2626 (Red) Secondary: #f59e0b (Amber) Accent: #8b5cf6 (Purple) Background: #ffffff (White) Text: #18181b (Black)

Color Theory

Complementary: Opposite on color wheel

• High contrast

• Energetic feel

• Use sparingly

Analogous: Adjacent on color wheel

• Harmonious

• Pleasing to eye

• Professional look

Monochromatic: Variations of single hue

• Cohesive

• Sophisticated

• Easy to execute

Triadic: Three equally spaced colors

• Vibrant

• Balanced

• Needs careful use

Applying Theme Consistency

Diagrams: Use theme colors in all mermaid diagrams Images: Apply filters or overlays to match palette Backgrounds: Stick to theme backgrounds throughout Text: Consistent heading and body colors Icons: Single style (outline vs filled), matching colors

Icon Systems

Styles:

• Outline (modern, clean)

• Filled (bold, impactful)

• Flat (minimalist)

• 3D (depth, realistic)

Sources:

• Heroicons (outline/filled, free)

• Feather Icons (minimalist, free)

• Font Awesome (comprehensive, free tier)

• Material Icons (Google, free)

Consistency rules:

• Single icon style per presentation

• Consistent size (e.g., all 24px)

• Theme-matched colors

• Same stroke weight

Visual Composition

Rule of Thirds

Divide slide into 3x3 grid:

• Place important elements at intersections

• Align content along grid lines

• Creates balanced, professional look

Visual Weight

Distribute elements evenly:

• Heavy elements (images, dark colors) balance with light elements

• Symmetrical or asymmetrical balance

• Avoid one heavy corner

Focal Point

Guide viewer's eye:

• Size: Larger elements draw attention

• Color: Bright or contrasting colors stand out

• Position: Center or rule-of-thirds points

• Isolation: White space around element

Contrast

Create visual hierarchy:

• Light vs dark

• Large vs small

• Bold vs thin

• Color vs grayscale

Image + Text Integration

Text Overlays on Images

Ensure readability:

background: './image.jpg' class: text-center

<div class="backdrop-blur-sm bg-black/50 p-8"> <h1 class="text-white text-6xl font-bold"> Readable Title </h1> </div>

Techniques:

• Dark overlay (30-70% opacity)

• Blur background behind text

• Position text in clear area

• Add drop shadow to text

Split Layouts

Image + text side-by-side:

layout: image-right image: './diagram.png'

Content Here

• Point 1
• Point 2
• Point 3

Balance:

• Equal visual weight on each side

• Complementary content

• Clear relationship between image and text

Visual Hierarchy

Size Hierarchy

Title (H1): 44-60pt Subtitle (H2): 32-40pt Section (H3): 24-32pt Body: 18-24pt Caption: 14-18pt

Color Hierarchy

Primary: Headlines, key data Secondary: Subheadings, supporting text Tertiary: Captions, notes Neutral: Body text, backgrounds

Weight Hierarchy

Bold: Titles, emphasis, CTAs Regular: Body text, most content Light: Captions, metadata, fine print

Best Practices (Evidence-Based)

Diagrams

✅ Do:

• Choose diagram type matching content (flowchart for process, sequence for interaction)

• Apply theme colors consistently via mermaid init directive

• Keep diagrams simple (max 7-9 nodes - cognitive load research)

• Label clearly with readable font sizes (match slide minimum 18pt)

• Use directional flow (typically left-to-right or top-to-bottom)

• Progressive disclosure for complex diagrams (build across multiple slides)

• Test colorblind-safe (use patterns/shapes + color, not color alone)

❌ Don't:

• Overcomplicate with too many connections (cognitive overload)

• Use too many colors (stick to theme palette: 2 main + 1-2 accents)

• Make text too small (minimum 18pt equivalent in diagrams)

• Create bidirectional spaghetti (unclear flow)

• Ignore alignment (clean grid-based layout)

• Rely on color alone (add labels, patterns, icons for colorblind accessibility)

Images

✅ Do:

• Use high-resolution (1920x1080+)

• Match presentation tone

• Ensure diversity and inclusion

• Provide attribution

• Optimize file size

❌ Don't:

• Use pixelated or blurry images

• Choose cliché stock photos

• Ignore licensing

• Use inconsistent styles

• Overload with images

Color (Accessibility Required)

✅ Do:

• Define palette upfront (2 main colors + 1-2 accents = 3-4 total)

• Ensure contrast ratios (from research):

• Normal text (<24pt): Minimum 4.5:1

• Large text (≥24pt): Minimum 3:1

• Test with tools: WebAIM Contrast Checker, Colorblind Web Page Filter

• Use colorblind-safe palettes:

• Use ColorBrewer (colorbrewer2.org) for verified palettes

• Common safe combinations: Blue + Orange, Purple + Green, Blue + Red

• AVOID: Red + Green (most common colorblindness)

• Don't rely on color alone:

• Add patterns in charts (stripes, dots, hatching)

• Use labels and icons alongside colors

• Differentiate with size/shape + color

• Use consistently throughout (same meaning = same color)

• Test on different displays (projector, laptop, mobile)

❌ Don't:

• Use random colors (establish theme palette first)

• Rely on color alone (excludes 8% of males with colorblindness)

• Create low contrast (<4.5:1 fails accessibility standards)

• Mix too many palettes (max 3-4 colors total)

• Ignore accessibility (legal requirement in many contexts)

• Use red+green together without additional differentiation

Theme

✅ Do:

• Establish visual identity

• Apply consistently

• Create templates

• Document color codes

• Test in different contexts

❌ Don't:

• Change style mid-presentation

• Mix incompatible aesthetics

• Ignore brand guidelines

• Over-decorate

• Sacrifice readability for style

Quick Reference

Mermaid Diagram Types

Flowchart: graph TD Sequence: sequenceDiagram Class: classDiagram State: stateDiagram-v2 ER: erDiagram Gantt: gantt

Color Palette Templates (Colorblind-Safe)

Blue + Orange (Recommended - Universally accessible):

primary: "#3b82f6" # Blue (trust, tech) secondary: "#f97316" # Orange (energy, action) neutral: "#6b7280" # Gray (backgrounds) text: "#1f2937" # Dark gray (body text) background: "#ffffff" # White (slide background)

Contrast ratios:

Blue on white: 8.6:1 ✓

Orange on white: 3.4:1 (use for headings ≥24pt) ✓

Text on white: 16.1:1 ✓

Purple + Teal (Professional, modern):

primary: "#8b5cf6" # Purple (creative, innovative) secondary: "#14b8a6" # Teal (calm, balanced) neutral: "#64748b" # Slate gray text: "#0f172a" # Near black background: "#ffffff" # White

Dark Mode (High contrast):

primary: "#60a5fa" # Light blue (readable on dark) secondary: "#fbbf24" # Amber (attention) neutral: "#475569" # Slate (dividers) text: "#f1f5f9" # Light gray (body text) background: "#0f172a" # Very dark blue

Note: Dark mode requires ≥7:1 contrast for text

Verification checklist:

• Contrast ratios verified (4.5:1+ for normal, 3:1+ for large text)

• Tested with colorblind simulator

• Colors have distinct meaning (not red/green for pass/fail)

• Patterns/icons supplement color in charts

• Palette documented for consistency

Image Checklist

• High resolution (1920x1080+)

• Relevant to content

• Matches presentation tone

• Properly attributed

• Optimized file size

• Accessible (alt text in notes)

For advanced mermaid syntax and visual design principles, consult the Mermaid documentation (https://mermaid.js.org/) and design resources like Refactoring UI.