Media Strategy Introduction
Define the story your media must tell and the guardrails that keep it fast.
Media Strategy Introduction
Learning Objectives
By the end of this lesson, you will:
- Inventory the visuals that support Avery's story.
- Define media guardrails for performance, licensing, and consent.
- Outline documentation updates for future collaborators.
Why It Matters
Images and embeds often carry most of a portfolio's emotional weight—but they are also hotspots for performance regressions and accessibility gaps. A strategy-first approach ensures every asset earns its place and respects users' constraints.
Portfolio Pulse Media Audit
1. Collect Source Material
- Case study cover images
- Workshop photographs
- Logo treatments or UI mockups
- Video testimonials or talks
Log attribution, usage rights, and original dimensions in
docs/media-inventory.md.
2. Assign Story Beats
Match each asset to the narrative arc:
- Discovery → showcase research deliverables
- Design → highlight UI explorations
- Impact → present before/after snapshots or metrics graphics
Document the pairing in notes/module-3-plan.md with context on why each asset
matters.
3. Define Success Criteria
| Goal | Metric | Owner |
|---|---|---|
| Keep hero gallery under 1.2MB | Lighthouse Performance ≥ 90 | Avery |
| Provide accessible descriptions | Alt text log updated | You |
| Respect third-party privacy | Embeds gated until consent | Team |
✅ Best Practices
1. Start with Copy
Why: Narrative clarity leads to better visual decisions.
Draft a short paragraph describing the story each asset should communicate before cropping or compressing.
2. Treat Media Like Structured Data
Why: Consistent metadata enables automation later.
- asset: concept-workshop.jpg
focus: discovery
alt: "Avery leading a sticky-note workshop during discovery sprint"
license: "CC BY-NC"❌ Common Mistakes
1. Choosing Assets Before Setting Budgets
Problem: High-res exports balloon page weight.
Fix: Define max file sizes per asset type before exporting.
2. Ignoring Legal & Privacy Constraints
Problem: Embedding third-party content without consent banners.
Fix: Flag any embed that sets cookies and plan for privacy-gate UI.
🔍 Portfolio Pulse Action Items
- Create
docs/media-inventory.mdif it does not exist and log current assets. - Update
docs/accessibility-manifesto.mdwith media-specific guidelines (alt text quality, caption timelines). - Add a TODO in
notes/module-3-plan.mdto revisit analytics once media is implemented. - Share the strategy outline with stakeholders for async review.
✅ Validation Checklist
- Media inventory created with source, license, and intended story beat.
- Performance and accessibility goals documented.
- Stakeholders acknowledge media plan or provide feedback.
- Retro log updated with strategy risks for Module 3.