TheDock Documentation - Media Production Guide

This guide provides specifications for all screenshots, diagrams, and videos needed for production-ready documentation.

---

Table of Contents

1. General Guidelines
2. Screenshot Specifications
3. Video Tutorial Specifications
4. Complete Shot List
5. Video Script Outlines
6. File Naming Conventions
7. Quality Checklist

---

General Guidelines

Browser Setup

• Use Chrome or Firefox (latest version)
• Set browser zoom to 100%
• Use a clean browser profile (no extensions visible)
• Hide bookmarks bar
• Window size: 1920x1080 for full screenshots

TheDock Setup

• Use a fresh theme setup with sample content
• Add sample content that looks professional
• Ensure no personal/client data is visible
• Use placeholder text that makes sense (not Lorem Ipsum)

Image Quality

• Format: PNG for screenshots, SVG for diagrams
• Resolution: 2x (retina) - 3840x2160 for full screen
• Compression: Use tools like TinyPNG after capture
• File size target: < 500KB per image

Video Quality

• Resolution: 1920x1080 (1080p) minimum
• Frame rate: 30fps
• Format: MP4 (H.264 codec)
• Audio: Clear voiceover, no background music during explanations
• Length: 2-5 minutes per tutorial (shorter is better)

---

Screenshot Specifications

Annotation Style

Use consistent annotation style:

• Highlight boxes: TheDock Danger (#e0451b) with 2px border, 10% opacity fill
• Arrows: TheDock Danger (#e0451b), 3px stroke
• Numbers/callouts: White text on danger circle (#e0451b)
• Text labels: 14px, semi-bold, dark gray (#1a1a1a)
• Blur sensitive data: Gaussian blur, 20px radius

Crop Guidelines

Type	Dimensions	Use
Full interface	1920x1080	Overview shots
Panel focus	400x600	Sidebar panels
Control detail	300x200	Individual controls
Preview area	1200x800	Preview-focused shots
Modal/dialog	600x400	Pop-up windows

---

Video Tutorial Specifications

Structure Template

Each video should follow this structure:

0:00 - 0:10  Title card with topic name
0:10 - 0:30  Brief overview of what we'll cover
0:30 - X:XX  Step-by-step demonstration
X:XX - X:XX  Quick recap of key points
Final 5s     End card with next video suggestion

Voiceover Guidelines

• Speak clearly at moderate pace
• Pause briefly when clicking/navigating (let viewer follow)
• Explain why not just what
• Use "you" and "your" (second person)
• Avoid jargon; explain technical terms

Screen Recording Tips

• Use a clean mouse cursor
• Move mouse deliberately, not erratically
• Pause on important UI elements
• Zoom in for small controls (post-production)
• Add subtle click sound effects

---

Complete Shot List

Getting Started Section

installation.md

ID	Filename	Description	Type	Annotations
GS-001	install-theme-upload.png	WordPress Appearance > Themes > Add New screen with Upload button highlighted	Full	Arrow to Upload button
GS-002	install-plugin-upload.png	WordPress Plugins > Add New with Upload button	Full	Arrow to Upload button
GS-003	install-activate.png	Theme/plugin activation success message	Cropped	Highlight success message
GS-004	install-menu-location.png	WordPress admin sidebar showing TheDock menu item	Cropped	Arrow to menu item

interface.md

ID	Filename	Description	Type	Annotations
GS-010	interface-overview.png	Full TheDock interface with all areas labeled	Full	Numbered callouts: 1-Header, 2-Nav, 3-Sidebar, 4-Preview, 5-Device switcher
GS-011	interface-header.png	Close-up of top header bar	Cropped	Label each button
GS-012	interface-nav-design.png	Navigation showing Design tab active	Cropped	Highlight active tab
GS-013	interface-nav-layout.png	Navigation showing Layout tab active	Cropped	Highlight active tab
GS-014	interface-nav-build.png	Navigation showing Build tab active	Cropped	Highlight active tab
GS-015	interface-sidebar-design.png	Design sidebar with all options visible	Panel	Label each option
GS-016	interface-sidebar-layout.png	Layout sidebar with all options visible	Panel	Label each option
GS-017	interface-preview-desktop.png	Preview area in desktop mode	Preview	Show device indicator
GS-018	interface-preview-tablet.png	Preview area in tablet mode	Preview	Show device indicator
GS-019	interface-preview-mobile.png	Preview area in mobile mode	Preview	Show device indicator
GS-020	interface-tree-view.png	Tree view showing template hierarchy	Panel	Explain hierarchy levels

first-theme.md

ID	Filename	Description	Type	Annotations
GS-030	first-dashboard.png	Design Dashboard on initial load	Full	None
GS-033	first-colors-panel.png	Colors panel with palette visible	Panel	Label color slots
GS-034	first-colors-picker.png	Color picker modal open	Modal	Show picker elements
GS-035	first-typography-panel.png	Typography panel with scale visible	Panel	Label each scale level
GS-036	first-template-list.png	Template list in Layout section	Panel	None
GS-037	first-template-editor.png	Template editor with section selected	Full	Highlight selected section
GS-038	first-export-button.png	Export button in header	Cropped	Arrow to button
GS-039	first-export-success.png	Export success message	Modal	None

---

Design Section

colors.md

ID	Filename	Description	Type	Annotations
DS-001	colors-panel-full.png	Full colors panel	Panel	None
DS-002	colors-palette-labels.png	Palette with Base, Contrast, Primary, Secondary, Accent labeled	Panel	Label each color
DS-003	colors-tints-shades.png	Expanded color showing tints and shades	Detail	Show variation range
DS-004	colors-picker-hex.png	Color picker with HEX input visible	Modal	Highlight HEX field
DS-005	colors-presets.png	Presets dropdown/panel open	Panel	None
DS-006	colors-swatches.png	Swatches section with gradient swatch	Panel	None
DS-007	colors-gradient-editor.png	Gradient editor modal	Modal	Label gradient controls

typography.md

ID	Filename	Description	Type	Annotations
DS-010	typography-panel-full.png	Full typography panel	Panel	None
DS-011	typography-base-size.png	Base size selector	Detail	Show size options
DS-012	typography-scale.png	All 5 scale levels (Huge to Small)	Panel	Label each level
DS-013	typography-style-expanded.png	One style expanded showing all properties	Panel	Label properties
DS-014	typography-font-picker.png	Font family picker dropdown	Modal	None
DS-015	typography-responsive.png	Showing responsive size indicators	Detail	Highlight breakpoint sizes

spacing.md

ID	Filename	Description	Type	Annotations
DS-020	spacing-panel-full.png	Full spacing panel	Panel	None
DS-021	spacing-scale.png	Spacing scale (Small to Huge)	Detail	Visual scale
DS-022	spacing-advanced.png	Advanced spacing controls expanded	Panel	Label each setting
DS-023	spacing-defaults.png	Default indicators (blue dots)	Detail	Highlight defaults
DS-024	spacing-grid-overlay.png	Preview with grid overlay enabled	Preview	Show grid lines

icons.md

ID	Filename	Description	Type	Annotations
DS-030	icons-panel.png	Icons panel	Panel	None
DS-031	icons-ui-indicators.png	UI indicator options	Detail	Label each indicator
DS-032	icons-library.png	Icon library browser	Modal	None
DS-033	icons-upload.png	Custom icon upload area	Detail	None

ui-elements.md

ID	Filename	Description	Type	Annotations
DS-040	ui-panel-full.png	Full UI elements panel	Panel	None
DS-041	ui-buttons.png	Button style options	Detail	Show button variations
DS-042	ui-inputs.png	Form input styling	Detail	Show input states
DS-043	ui-borders.png	Border/radius controls	Detail	None
DS-044	ui-shadows.png	Shadow presets	Detail	Show shadow examples

---

Layout Section

templates.md

ID	Filename	Description	Type	Annotations
LY-001	templates-list.png	Template list showing In Use and Unused	Panel	Label categories
LY-002	templates-library.png	Template library browser	Full	None
LY-003	templates-editor-full.png	Full template editor interface	Full	Numbered callouts for tree, preview, settings
LY-004	templates-hierarchy.png	Tree view showing Section > Grid > Area > Block	Panel	Annotate hierarchy
LY-005	templates-add-section.png	Add section menu/modal	Modal	None
LY-006	templates-section-settings.png	Section settings panel	Panel	Label key settings
LY-007	templates-grid-settings.png	Grid settings panel	Panel	Label column controls
LY-008	templates-area-settings.png	Area settings panel	Panel	Label span controls
LY-009	templates-block-types.png	Block type selection	Modal	Show available blocks

modules.md

ID	Filename	Description	Type	Annotations
LY-010	modules-list.png	Modules list (In Use, Unused)	Panel	None
LY-011	modules-linked.png	Module shown in template with link indicator	Detail	Highlight link icon
LY-012	modules-save-as.png	Save as Module option	Context menu	Highlight option
LY-013	modules-detach.png	Detach from Module option	Context menu	Highlight option

header.md

ID	Filename	Description	Type	Annotations
LY-020	header-selection.png	Header module selection	Panel	None
LY-021	header-editor.png	Header module being edited	Full	None
LY-022	header-preview-desktop.png	Header preview on desktop	Preview crop	None
LY-023	header-preview-mobile.png	Header preview on mobile (hamburger menu)	Preview crop	None

footer.md

ID	Filename	Description	Type	Annotations
LY-030	footer-selection.png	Footer module selection	Panel	None
LY-031	footer-editor.png	Footer module being edited	Full	None
LY-032	footer-columns.png	Multi-column footer layout	Preview crop	None

grid-system.md

ID	Filename	Description	Type	Annotations
LY-040	grid-12-column.png	Visual showing 12-column grid	Diagram	Number each column
LY-041	grid-layouts.png	Common layouts (6+6, 4+4+4, 3+9, etc.)	Diagram	Label each layout
LY-042	grid-span-control.png	Column span selector	Detail	None
LY-043	grid-responsive-stack.png	Before/after showing desktop vs mobile stack	Side-by-side	Label desktop/mobile

---

Build Section

theme-structure.md

ID	Filename	Description	Type	Annotations
BD-001	structure-overview.png	Theme Structure panel showing page types	Full	None
BD-002	structure-assignment.png	Template assignment dropdown	Detail	None
BD-003	structure-hierarchy.png	WordPress template hierarchy visualization	Diagram	Show fallback paths
BD-004	structure-post-type.png	Custom post type configuration	Panel	Label fields

custom-css.md

ID	Filename	Description	Type	Annotations
BD-010	css-editor.png	CSS editor interface	Full	None
BD-011	css-variables.png	Example showing CSS variables usage	Code highlight	None

custom-code.md

ID	Filename	Description	Type	Annotations
BD-020	code-js-editor.png	JavaScript editor	Full	None
BD-021	code-php-editor.png	PHP functions editor	Full	None
BD-022	code-partials.png	Theme partials list	Panel	None

export.md

ID	Filename	Description	Type	Annotations
BD-030	export-button.png	Export button location	Header crop	Arrow to button
BD-031	export-progress.png	Export in progress	Modal	None
BD-032	export-success.png	Export complete message	Modal	None

---

Advanced Section

wordpress-integration.md

ID	Filename	Description	Type	Annotations
AD-001	wp-post-loop.png	Post Loop block configuration	Panel	Label options
AD-002	wp-menu-locations.png	Menu locations configuration	Panel	None
AD-003	wp-featured-image.png	Featured image block settings	Panel	None

custom-fields.md

ID	Filename	Description	Type	Annotations
AD-010	acf-integration.png	ACF fields in TheDock	Panel	None
AD-011	acf-mapping.png	Field mapping interface	Detail	None

woocommerce.md

ID	Filename	Description	Type	Annotations
AD-020	woo-panel.png	WooCommerce styling panel	Panel	None
AD-021	woo-product-card.png	Product card styling options	Detail	None
AD-022	woo-cart.png	Cart page preview	Preview crop	None

team.md

ID	Filename	Description	Type	Annotations
AD-030	team-panel.png	Team/version panel	Panel	None
AD-031	team-history.png	Version history list	Panel	None
AD-032	team-restore.png	Restore state dialog	Modal	None

---

Reference Section

(No screenshots currently required for reference section)

---

Video Script Outlines

Video 1: Getting Started with TheDock (5 min)

File: 01-getting-started.mp4

INTRO (0:00-0:15)
"Welcome to TheDock - the visual WordPress theme builder.
In this tutorial, I'll show you how to create your first theme in just a few minutes."

SECTION 1: Interface Overview (0:15-1:30)
- Show the three main tabs (Design, Layout, Build)
- Point out the preview area
- Demonstrate device switching
- Show save and undo buttons

SECTION 2: Basic Customization (1:30-3:30)
- Change primary color
- Adjust a typography setting
- Show real-time preview updates
- Modify a spacing value

SECTION 3: Export (3:30-4:15)
- Click Export button
- Wait for export
- Navigate to live site
- Show the result

OUTRO (4:15-4:30)
"You've just built your first theme with TheDock!
In the next video, we'll dive deeper into the design system."

Video 2: Mastering the Design System (6 min)

File: 02-design-system.mp4

INTRO (0:00-0:15)
"TheDock's design system ensures consistency across your entire theme.
Let's explore colors, typography, and spacing."

SECTION 1: Colors (0:15-2:00)
- Explain the 5-color palette concept
- Change each color type
- Show tints and shades auto-generation
- Demonstrate presets
- Add a custom swatch
- Create a gradient

SECTION 2: Typography (2:00-3:30)
- Explain base size concept
- Show the 5-level scale
- Customize a heading style
- Change font family
- Demonstrate responsive sizing

SECTION 3: Spacing (3:30-5:00)
- Explain spacing scale (Small to Huge)
- Adjust section spacing
- Modify grid width
- Set defaults
- Show grid overlay

SECTION 4: UI Elements (5:00-5:45)
- Brief overview of button styles
- Input field styling
- Shadows and borders

OUTRO (5:45-6:00)
"Your design system is the foundation of a consistent, professional theme.
Next, let's build some templates."

Video 3: Building Templates (7 min)

File: 03-building-templates.mp4

INTRO (0:00-0:15)
"Templates are the heart of your theme. Let's learn to build and customize them."

SECTION 1: Understanding Templates (0:15-1:30)
- Navigate to Layout > Templates
- Explain In Use vs Unused vs Library
- Show template hierarchy concept

SECTION 2: The Template Editor (1:30-3:00)
- Open a template for editing
- Explain tree view
- Explain Section > Grid > Area > Block hierarchy
- Select elements and show settings

SECTION 3: Building a Section (3:00-5:00)
- Add a new section
- Choose from blueprints
- Configure the grid
- Adjust column spans
- Add content blocks
- Style the section

SECTION 4: Working with Modules (5:00-6:30)
- Explain modules vs sections
- Convert section to module
- Show how module updates propagate
- Demonstrate detaching

SECTION 5: Header and Footer (6:30-6:45)
- Quick overview of header/footer assignment

OUTRO (6:45-7:00)
"You now know how to build any page layout.
Next video: WordPress integration."

Video 4: WordPress Integration (5 min)

File: 04-wordpress-integration.mp4

INTRO (0:00-0:15)
"TheDock is built for WordPress. Let's connect your theme to your content."

SECTION 1: Theme Structure (0:15-1:30)
- Navigate to Build > Theme Structure
- Explain WordPress template hierarchy
- Assign templates to page types

SECTION 2: Dynamic Content (1:30-3:00)
- Add Post Loop block
- Configure post type and filters
- Show featured images
- Display post metadata

SECTION 3: Menus (3:00-4:00)
- Configure menu locations
- Create menu in WordPress
- Show menu in header

SECTION 4: Export and Test (4:00-4:45)
- Export theme
- View live site
- Test different page types

OUTRO (4:45-5:00)
"Your TheDock theme is now fully integrated with WordPress!"

Video 5: Advanced Customization (6 min)

File: 05-advanced-customization.mp4

INTRO (0:00-0:15)
"Ready to go further? Let's explore custom code, ACF, and more."

SECTION 1: Custom CSS (0:15-1:30)
- Open CSS editor
- Write custom styles
- Use CSS variables
- Show result

SECTION 2: Custom JavaScript (1:30-2:30)
- Open JS editor
- Add simple interaction
- Test functionality

SECTION 3: ACF Integration (2:30-4:00)
- Brief ACF overview
- Show field mapping
- Display custom field in template

SECTION 4: WooCommerce (4:00-5:00)
- Enable WooCommerce styling
- Customize product cards
- Style cart page

SECTION 5: Team & Versions (5:00-5:45)
- Show version history
- Demonstrate restore

OUTRO (5:45-6:00)
"You're now a TheDock power user! Happy building."

---

File Naming Conventions

Images

[section]-[topic]-[description].png

Examples:
getting-started-interface-overview.png
design-colors-picker-hex.png
layout-templates-editor-full.png

Videos

[number]-[topic].mp4

Examples:
01-getting-started.mp4
02-design-system.mp4
03-building-templates.mp4

Diagrams

diagram-[topic].svg

Examples:
diagram-template-hierarchy.svg
diagram-12-column-grid.svg
diagram-wordpress-template-fallback.svg

---

Quality Checklist

Before Publishing Screenshots

• Resolution is 2x (retina)
• No personal/sensitive data visible
• Annotations are consistent style
• Image is properly cropped
• File size is optimized (< 500KB)
• Filename follows convention
• Alt text is written

Before Publishing Videos

• Audio is clear and consistent
• No background noise
• Mouse movements are smooth
• UI is clearly visible
• Transitions are smooth
• Captions are accurate
• End cards are present
• File is properly compressed

Before Publishing Documentation

• All image placeholders have images
• All video embeds work
• Links are functional
• Spelling/grammar checked
• Mobile-responsive tested
• Cross-referenced correctly

---

Recommended Tools

Screenshots

• macOS: CleanShot X, Snagit
• Windows: ShareX, Snagit
• Cross-platform: Greenshot

Screen Recording

• macOS: ScreenFlow, OBS
• Windows: Camtasia, OBS
• Cross-platform: Loom (quick), OBS (advanced)

Image Editing

• Figma (annotations)
• Photoshop
• Pixelmator Pro

Video Editing

• Final Cut Pro
• DaVinci Resolve (free)
• Adobe Premiere

Compression

• TinyPNG (images)
• HandBrake (videos)

---

Production Timeline Estimate

Phase	Tasks	Estimated Time
Screenshots	80 images @ 5 min each	~7 hours
Annotations	40 annotated images @ 10 min each	~7 hours
Diagrams	5 diagrams @ 30 min each	~2.5 hours
Video Recording	5 videos @ 1 hour each	~5 hours
Video Editing	5 videos @ 2 hours each	~10 hours
Review & Polish	Final review	~4 hours
TOTAL		~35-40 hours

---

This guide should be updated as the documentation evolves.