--- name: Visual Design description: This skill should be used when the user asks to "create mermaid diagram", "add visuals to slides", "suggest stock photos", "generate AI image prompts", "create diagram for presentation", "design visual theme", or needs guidance on diagram types, color palettes, image selection, or AI image generation prompting for presentations. version: 0.2.0 --- # 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:** ```mermaid 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:** ```mermaid graph LR A[Rectangle] B(Rounded) C([Stadium]) D[[Subroutine]] E[(Database)] F((Circle)) G>Flag] H{Diamond} I{{Hexagon}} ``` **Arrow types:** ```mermaid graph LR A-->B %% Solid arrow C-.->D %% Dotted arrow E==>F %% Thick arrow G-.-H %% Dotted line I---J %% Solid line ``` **Edge labels:** ```mermaid graph LR A -->|Label text| B B -.->|Another label| C ``` ### Sequence Diagrams Best for: API calls, interactions, communication flows ```mermaid 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:** ```mermaid sequenceDiagram Client->>+Server: Request Server->>+Database: Query Database-->>-Server: Data Server-->>-Client: Response ``` **Notes:** ```mermaid 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 ```mermaid 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 ```mermaid stateDiagram-v2 [*] --> Draft Draft --> Review Review --> Approved Review --> Rejected Rejected --> Draft Approved --> Published Published --> [*] ``` **With descriptions:** ```mermaid stateDiagram-v2 [*] --> Idle Idle --> Processing : Start Processing --> Complete : Success Processing --> Error : Failure Error --> Idle : Retry Complete --> [*] ``` ### ER Diagrams Best for: Database schemas, data relationships ```mermaid 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 ```mermaid 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: ```mermaid %%{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: ```markdown ``` ### 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:** ```markdown --- background: './image.jpg' class: text-center ---

Readable Title

``` **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:** ```markdown --- 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):** ```yaml 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):** ```yaml 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):** ```yaml 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.