ourdigital/our-claude-skills
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
our-claude-skills/custom-skills/05-ourdigital-document/code/references/slide_layouts.md
Andrew Yim 0bc24d00b9 feat: Add OurDigital custom skills package (10 skills) 
Complete implementation of OurDigital skills with dual-platform support
(Claude Desktop + Claude Code) following standardized structure.

Skills created:
- 01-ourdigital-brand-guide: Brand reference & style guidelines
- 02-ourdigital-blog: Korean blog drafts (blog.ourdigital.org)
- 03-ourdigital-journal: English essays (journal.ourdigital.org)
- 04-ourdigital-research: Research prompts & workflows
- 05-ourdigital-document: Notion-to-presentation pipeline
- 06-ourdigital-designer: Visual/image prompt generation
- 07-ourdigital-ad-manager: Ad copywriting & keyword research
- 08-ourdigital-trainer: Training materials & workshop planning
- 09-ourdigital-backoffice: Quotes, proposals, cost analysis
- 10-ourdigital-skill-creator: Meta skill for creating new skills

Features:
- YAML frontmatter with "ourdigital" or "our" prefix triggers
- Standardized directory structure (code/, desktop/, shared/, docs/)
- Shared environment setup (_ourdigital-shared/)
- Comprehensive reference documentation
- Cross-skill integration support

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-31 16:50:17 +07:00

328 lines
11 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Slide Layouts Guide
## Overview
Layout patterns and best practices for different slide types.
## Layout Principles
### Visual Hierarchy
1. **Primary**: Title/headline (largest, boldest)
2. **Secondary**: Key points (medium, clear)
3. **Tertiary**: Supporting details (smaller, lighter)
4. **Quaternary**: Metadata (smallest, subtle)
### Balance & Alignment
- **Rule of thirds**: Divide slide into 9 sections
- **White space**: 30-40% minimum
- **Alignment grid**: Consistent margins and gutters
- **Visual weight**: Balance text, images, and data
## Core Slide Types
### 1. Title Slide
```
┌─────────────────────────────────┐
│ │
│ │
│ [Company Logo] │
│ │
│ PRESENTATION TITLE │
│ Subtitle Text │
│ │
│ Date | Author │
│ │
└─────────────────────────────────┘
```
**Elements**:
- Title: 44-48pt, bold, centered
- Subtitle: 24-28pt, regular, centered
- Metadata: 14-16pt, light, centered
- Background: Gradient or image with overlay
### 2. Section Divider
```
┌─────────────────────────────────┐
│ │
│ │
│ │
│ SECTION TITLE │
│ Brief Context │
│ │
│ │
│ │
└─────────────────────────────────┘
```
**Elements**:
- Section title: 36-40pt, bold
- Context: 20-24pt, regular
- Background: Brand color or pattern
- Number indicator (optional): Large, subtle
### 3. Content Slide - Text Only
```
┌─────────────────────────────────┐
│ SLIDE TITLE │
├─────────────────────────────────┤
│ │
│ • Key point one with detail │
│ Supporting information │
│ │
│ • Key point two with detail │
│ Supporting information │
│ │
│ • Key point three with detail │
│ Supporting information │
│ │
└─────────────────────────────────┘
```
**Elements**:
- Title: 32pt, bold, left-aligned
- Bullets: 18-20pt, regular
- Sub-bullets: 16-18pt, light
- Line spacing: 1.5x
### 4. Content Slide - Text + Image
```
┌─────────────────────────────────┐
│ SLIDE TITLE │
├────────────────┬────────────────┤
│ │ │
│ • Point one │ │
│ │ [IMAGE/ │
│ • Point two │ CHART] │
│ │ │
│ • Point three │ │
│ │ │
└────────────────┴────────────────┘
```
**Proportions**:
- Text: 50-60% width
- Visual: 40-50% width
- Padding: 0.5" between columns
### 5. Data Visualization
```
┌─────────────────────────────────┐
│ DATA INSIGHT TITLE │
├─────────────────────────────────┤
│ ┌──────────┐ │
│ │ │ │
│ │ CHART/ │ │
│ │ GRAPH │ │
│ │ │ │
│ └──────────┘ │
│ │
│ Key Insight: [Callout text] │
└─────────────────────────────────┘
```
**Elements**:
- Chart: 60-70% of slide area
- Title: Descriptive, not just "Sales Data"
- Callout: Highlight key finding
- Legend: Only if necessary
### 6. Comparison Slide
```
┌─────────────────────────────────┐
│ COMPARISON TITLE │
├────────────────┬────────────────┤
│ Option A │ Option B │
├────────────────┼────────────────┤
│ │ │
│ ✓ Advantage 1 │ ✓ Advantage 1 │
│ ✓ Advantage 2 │ ✓ Advantage 2 │
│ ✗ Drawback 1 │ ✗ Drawback 1 │
│ │ │
│ Metric: 85% │ Metric: 72% │
│ │ │
└────────────────┴────────────────┘
```
**Layout**:
- Equal column widths
- Consistent formatting
- Visual indicators (✓/✗, +/-)
- Highlight winner (if applicable)
### 7. Process/Timeline
```
┌─────────────────────────────────┐
│ PROCESS TITLE │
├─────────────────────────────────┤
│ │
│ [1]────►[2]────►[3]────►[4] │
│ Start Step Step End │
│ One Two │
│ │
│ Description of the process │
│ │
└─────────────────────────────────┘
```
**Variations**:
- Horizontal timeline
- Vertical timeline
- Circular process
- Chevron diagram
### 8. Quote/Testimonial
```
┌─────────────────────────────────┐
│ │
│ │
│ "Impactful quote │
│ that supports │
│ your message" │
│ │
│ - Attribution │
│ Title/Company │
│ │
└─────────────────────────────────┘
```
**Styling**:
- Quote: 24-28pt, italic or serif
- Attribution: 16-18pt, regular
- Quotation marks: Large, subtle
- Background: Minimal, maybe texture
### 9. Image-Focused
```
┌─────────────────────────────────┐
│ │
│ │
│ [FULL BLEED IMAGE] │
│ │
│ │
├─────────────────────────────────┤
│ Caption or Context Text │
└─────────────────────────────────┘
```
**Best Practices**:
- High-resolution images only
- Text overlay needs contrast
- Consider semi-transparent overlay
- Keep text minimal
### 10. Call-to-Action
```
┌─────────────────────────────────┐
│ │
│ │
│ CLEAR ACTION ITEM │
│ │
│ [ BUTTON/ACTION ] │
│ │
│ Supporting context │
│ │
└─────────────────────────────────┘
```
**Elements**:
- Action: 32-36pt, bold
- Button: Contrasting color
- Context: 18-20pt, regular
- Contact info (if applicable)
## Responsive Layouts
### Mobile-First Considerations
- Larger text (minimum 14pt)
- Single column layouts
- Touch-friendly spacing
- Simplified graphics
### Aspect Ratios
- **16:9** (Standard): 1920×1080px
- **4:3** (Traditional): 1024×768px
- **16:10** (Modern): 1920×1200px
- **1:1** (Social): 1080×1080px
## Color Usage
### Background Options
1. **White**: Maximum readability
2. **Light gray**: Reduces glare
3. **Dark**: For high contrast
4. **Gradient**: Adds depth
5. **Pattern**: Subtle texture
### Text Colors
- **Primary text**: High contrast (90%+)
- **Secondary text**: Medium contrast (70%+)
- **Accent text**: Brand color
- **Disabled text**: Low contrast (40%)
## Typography Guidelines
### Font Pairing
```
Heading Font + Body Font
- Poppins + Lora
- Arial + Georgia
- Helvetica + Times
- Roboto + Merriweather
```
### Size Hierarchy
```
Title: 44-48pt
Subtitle: 32-36pt
Heading: 28-32pt
Subheading: 20-24pt
Body: 16-20pt
Caption: 12-14pt
```
### Line Spacing
- Titles: 1.0-1.2x
- Body text: 1.5-1.6x
- Bullets: 1.4-1.5x
- Captions: 1.2-1.3x
## Animation & Transitions
### Entrance Animations
- **Fade in**: Universal, professional
- **Slide in**: Directional emphasis
- **Grow**: Importance emphasis
- **Appear**: Simple, no distraction
### Transition Timing
- Fast: 0.3s (between related slides)
- Medium: 0.5s (section transitions)
- Slow: 1.0s (major transitions)
### Build Sequences
1. Title appears
2. Main content fades in
3. Supporting elements slide in
4. Call-to-action grows
## Accessibility Considerations
### Color Contrast
- WCAG AA: 4.5:1 for normal text
- WCAG AA: 3:1 for large text
- WCAG AAA: 7:1 for normal text
### Font Sizes
- Minimum: 14pt for body text
- Minimum: 18pt for important text
- Maximum: 54pt for titles
### Alt Text
- Describe all images
- Explain all charts
- Summarize complex diagrams
## Quality Checklist
### Before Finalizing
- [ ] Consistent alignment across slides
- [ ] Proper contrast ratios
- [ ] No orphaned bullets
- [ ] Images are high resolution
- [ ] Data is clearly labeled
- [ ] Slide numbers present
- [ ] Brand elements applied
- [ ] Spell check completed
- [ ] Animations tested
- [ ] Export quality verified
Reference in New Issue View Git Blame Copy Permalink