Visual Design
SKILL.md
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 bottomgraph LR- Left to rightgraph RL- Right to leftgraph 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*--Compositiono--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 colorsdark- Dark modeforest- Green tonesneutral- Grayscalebase- 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:9Aspect ratio for slides--v 6Version 6 (latest)--style rawLess artistic, more literal--q 2Quality (1-2, higher = better)--s 50Stylization (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.