Start with real copy or content - CourtneyR.dev's 2nd Brain

Start with real copy or content 🔗 **Source:** [Start with real copy or content](https://www.youtube.com/watch?v=OhmoaWQSQ0Y) > [!note]+ Document Notes > tags: [design, content-first-design, ux-design] > author: Penpot > source: YouTube > reference: https://www.youtube.com/watch?v=OhmoaWQSQ0Y > date created: 2025-10-30 07:25 > > # 🏷️ Title: What Comes First: Content or Design? >  ## 🧰 Action Inbox - [H1] Advocate for real content before high-fidelity mockups — design process improvement #design - [H2] Create sample content templates for design systems — framework development #content - [H3] Map out key headings and navigation before visual design — project planning #strategy ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Penpot Courses](https://penpot.app/courses) ## 📝 Summary - The debate between content-first vs design-first approaches in web design - Why having real content before high-fidelity design matters for informed decisions - When it's acceptable to start design without final content and how to mitigate risks - The importance of sample content for design systems and themes - Bottom line: Real content leads to better user experiences and prevents costly redesigns ## 📖 Main Content This video addresses the common tension between content creation and design phases in web development projects. The core argument is that designers benefit significantly from having real content before creating high-fidelity mockups, as it provides crucial context for design decisions. Without real content, designers face uncertainty about navigation complexity (6 vs 60 menu items), text volume requirements, and appropriate visual treatments. This often leads to placeholder content like Lorem Ipsum text and stock images, which can result in designs that don't match the actual use case. However, the video acknowledges legitimate scenarios where design must proceed without final content, such as tight timelines, design system creation, or theme development. In these cases, the recommendation is to work with representative sample content that captures the information hierarchy, tone, and content types, even if not finalized. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=0) — [H1] The Content vs Design Debate - Key idea: This is a common argument across design teams about sequencing - Evidence: "What comes first, the content or the design? This is an argument you'll hear across many teams" #### ⏱️ [00:08](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=8) — [H1] The Ideal Scenario - Key idea: Designers need real content for informed design decisions - Evidence: "In an ideal world, a designer has real content, so they have context for their design decisions before producing high-fidelity mock-ups" #### ⏱️ [00:18](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=18) — [H2] Navigation Complexity Planning - Key idea: Content volume dramatically affects design decisions - Evidence: "You'll have a rough idea of whether your navigation menu is going to have six items or 60 items" #### ⏱️ [00:24](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=24) — [H2] Layout Requirements Assessment - Key idea: Text volume determines layout space allocation - Evidence: "You'll also know if your layouts need to handle a lot of text or give space to simple messaging" #### ⏱️ [00:32](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=32) — [H2] Placeholder Content Problems - Key idea: Missing content leads to generic placeholder usage - Evidence: "At best, you'll end up using Lorem ipsum dummy text or placeholder stock images" #### ⏱️ [00:40](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=40) — [H3] Design Waste Without Real Content - Key idea: Poor content assumptions waste design effort - Evidence: "At worst, you'll waste time designing views that won't exist or picking an icon set that doesn't have icons suitable for your menu items" #### ⏱️ [00:50](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=50) — [H2] Legitimate Exceptions to Content-First - Key idea: Some scenarios justify starting design without final content - Evidence: "There's probably a few legitimate situations where you don't get real content before you start designing" #### ⏱️ [00:57](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=57) — [H3] Timeline Constraints - Key idea: Project schedules sometimes require parallel work - Evidence: "Sometimes the content just isn't ready yet and you'll have to get started regardless" #### ⏱️ [01:03](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=63) — [H2] Design Systems and Themes - Key idea: Flexible designs require accommodation for varied content - Evidence: "Maybe you're building a design system or creating a theme, so your work needs to accommodate a variety of content and lengths of copy" #### ⏱️ [01:13](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=73) — [H2] Sample Content Strategy - Key idea: Representative content helps inform design decisions - Evidence: "It helps to work with some sample content to get an idea of the type of information, hierarchy, and tone" #### ⏱️ [01:22](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=82) — [H3] Minimum Content Requirements - Key idea: Key structural elements should be mapped before design - Evidence: "Maybe get some real heading text, navigation items, and key content mapped out, even if you don't have all the text and labels planned" #### ⏱️ [01:31](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=91) — [H1] Preventing Costly Redesigns - Key idea: Early content consideration prevents major revisions - Evidence: "That way, you don't have to redesign everything later once you finally get hold of the real content" #### ⏱️ [01:38](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=98) — [H1] User Experience Focus - Key idea: Content-informed design prioritizes end user needs - Evidence: "Most importantly, you'll be able to focus on designing the best possible experience for the people using the end product" ## 📚 References - [Penpot Courses](https://penpot.app/courses) - [Lorem Ipsum generators and alternatives](https://loremipsum.io/) - [Content strategy resources](https://contentdesign.london/) ## 🗣️ Paraphrase - Designers work most effectively when they have real content to inform their layout and interaction decisions rather than guessing at requirements - While ideal workflows prioritize content before design, practical constraints sometimes require starting design with representative sample content instead of final copy - The key is avoiding completely generic placeholder content in favor of realistic examples that reflect actual information hierarchy and content volume needs ## 📰 Newsletter **Content-First Design: Why Your WordPress Themes Need Real Words** WordPress theme developers often face the classic chicken-and-egg problem: should content drive design decisions, or should beautiful layouts come first? This week's insight from Penpot highlights why starting with real (or realistic) content leads to better user experiences. **Key takeaway**: Whether you're building custom themes or working with clients, having actual headings, navigation items, and content structure mapped out prevents costly redesigns and ensures your layouts work for real-world use cases. **Practical application**: Before diving into high-fidelity mockups, gather sample content that reflects the actual information hierarchy and volume. Your navigation design will be much more effective when you know if you're handling 6 menu items or 60. **Resources**: [WordPress Theme Handbook](https://developer.wordpress.org/themes/), [Block Editor Handbook](https://developer.wordpress.org/block-editor/), [Content Strategy Guide](https://learn.wordpress.org/tutorial/content-strategy-fundamentals/) ## ✅ Action Items #### DevRel - Developer advocacy: Create talks on content-first design principles for WordPress meetups - Education: Develop workshop curriculum on theme design with real content - Developer experience: Document content requirements for theme development - Community management: Survey developers on content-design workflow challenges #### WordPress - Core: Prioritize better placeholder content systems for block themes - Design: Create UX guidelines for content-informed design decisions - Documentation: Add content-first design principles to theme handbook - Themes: Review criteria for theme directory to emphasize content flexibility - Community: Organize design sprints focused on content-design integration ## 🧪 Hypotheses - Designers who receive real content before high-fidelity mockups produce more usable interfaces with fewer revisions - WordPress themes designed with sample content that matches target use cases have higher user satisfaction scores - Projects that map content hierarchy before visual design have 30% fewer redesign iterations - Design systems built with varied content examples accommodate edge cases better than those using only Lorem Ipsum ### 📊 Methodology - Survey design teams about revision frequency with content-first vs design-first workflows - A/B test WordPress themes developed with real vs placeholder content for usability metrics - Track redesign requests and timeline changes in projects using different content-design sequencing ### ❓ Questions - How do WordPress block themes handle varying content lengths and complexity automatically? - What minimum content requirements should be established before starting theme design? - How can design systems better anticipate content variation without over-engineering flexibility? ### 🔮 Future Research - Investigation of AI tools that generate realistic placeholder content for design workflows - Study of content management systems that better integrate with design tool workflows - Exploration of block theme patterns that gracefully handle content volume variations ### 💡 Implications - Practice: Design workflows should prioritize content gathering before high-fidelity design phases - Policy: Project timelines need to account for content-design dependencies and parallel workflows - Education: Design training should emphasize content strategy as a prerequisite skill - Funding: Budget allocation should include content strategy and creation in design project phases ### 🧠 Learning Styles Assessment Reading level estimate: 8th grade (Flesch-Kincaid) #### 👀 Visual learners - Present: Clear examples of navigation complexity (6 vs 60 items) - Improve: Before/after mockups showing content-informed vs placeholder designs #### 🔊 Aural learners - Present: Video format with clear narration and examples - Improve: Podcast version discussing content-design collaboration workflows #### 🗣️ Verbal learners - Present: Clear definitions of "copy" as text content, concrete examples - Improve: Storytelling approach showing project outcomes with different workflows #### 🧩 Kinesthetic learners - Present: Reference to hands-on Penpot courses for practice - Improve: Step-by-step checklist for content-first design workflow #### 🧠 Logical learners - Present: Clear cause-and-effect relationship between content timing and design quality - Improve: Decision tree for when to proceed without final content #### 🧑‍🤝‍🧑 Social learners - Present: Acknowledgment of team debates and collaboration needs - Improve: Discussion prompts for content-design team alignment #### 🧘‍♀️ Solitary learners - Present: Individual workflow considerations and self-directed course option - Improve: Self-assessment rubric for content readiness before design #### 🌿 Naturalistic learners - Present: Organic workflow adaptation based on project constraints - Improve: Ecosystem thinking about content-design dependencies ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear video structure, logical content flow - Improve: Transcript with proper heading structure, time-stamped navigation #### Keyboard navigation - Present: Standard YouTube video controls - Improve: Course platform keyboard accessibility verification #### Contrast and readability - Present: Clear video visual presentation - Improve: High-contrast transcript option, readable font sizing #### Text resizing and reflow - Present: Responsive video player - Improve: Scalable transcript layout, zoom-friendly course materials #### Media and captions - Present: Video content with background music - Improve: Closed captions, full transcript, audio description of visual examples #### Forms and interactions - Present: Standard video interface - Improve: Accessible course registration and material navigation ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal design principles applicable across contexts - Improve: Examples from diverse industries and global design practices #### Inclusive language - Present: Clear, jargon-free explanations with definitions - Improve: Avoid assumptions about team structures or project types #### Neurodiversity support - Present: Structured presentation with clear transitions - Improve: Content warnings for time pressure scenarios, chunked information #### Representation - Present: Universal design workflow applicable to all practitioners - Improve: Diverse examples of content types and design contexts #### Psychological safety - Present: Acknowledgment of legitimate constraints and practical challenges - Improve: Emphasis on collaboration over blame for workflow challenges ### ✅ Logical Validity #### Strong reasoning - Deductive strength: If designers need context for decisions, then real content provides better context than placeholders - Inductive strength: Examples of navigation complexity and layout requirements support general principle - Causal reasoning: Clear connection between content availability and design decision quality - Analogical strength: Comparison of different project scenarios (themes, design systems) supports flexibility #### Fallacies - False dilemma: Presents content-first as ideal but acknowledges legitimate exceptions and middle-ground approaches - Hasty generalization: Avoided by providing specific scenarios where design-first is appropriate #### Tone of voice - Overall tone: Practical and collaborative, acknowledging real-world constraints while advocating for best practices ### 🛡️ DARVO Analysis - Deny: No denials present - Attack: No attacks on individuals or opposing viewpoints - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Constructive problem-solving tone, acknowledges legitimate constraints ## 🎯 Conclusion The content-first design principle provides a practical framework for creating more effective WordPress themes and user interfaces. While ideal workflows prioritize real content before high-fidelity design, the key insight is working with representative sample content when final copy isn't available. This approach prevents costly redesigns and ensures the end result serves users effectively rather than just looking polished in isolation. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Real content improves design decision quality > [!quote] [What Comes First: Content or Design?](https://www.youtube.com/watch?v=OhmoaWQSQ0Y) by [[Penpot]] via [[YouTube]]. Published 2025-10-30. Accessed 2025-10-30. > "In an ideal world, a designer has real content, so they have context for their design decisions before producing high-fidelity mock-ups." Establishes the foundational argument for content-first design workflows. [view highlight](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=8#H1) #design #workflow #articleseed ID:rw_content_design_001 ### [H2] Content volume affects layout decisions > [!quote] [What Comes First: Content or Design?](https://www.youtube.com/watch?v=OhmoaWQSQ0Y) > "You'll have a rough idea of whether your navigation menu is going to have six items or 60 items." Concrete example of how content characteristics inform design choices. [view highlight](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=18#H2) #navigation #layout ID:rw_content_design_002 ### [H3] Sample content mitigates design-first risks > [!quote] [What Comes First: Content or Design?](https://www.youtube.com/watch?v=OhmoaWQSQ0Y) > "It helps to work with some sample content to get an idea of the type of information, hierarchy, and tone." Practical compromise when real content isn't available yet. [view highlight](https://www.youtube.com/watch?v=OhmoaWQSQ0Y&t=73#H2) #sample-content #strategy ID:rw_content_design_003 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Content volume determines interface complexity - Scope: Navigation and layout design decisions - Pointer to timestamp 0:18-0:24 - Links: [[Information-Architecture]] [[User-Interface-Design]] #### [Z2] Placeholder content creates false design constraints - Scope: When final content characteristics are unknown - Pointer to timestamp 0:32-0:40 - Links: [[Design-Process]] [[Content-Strategy]] #### [Z3] Design systems require content flexibility planning - Scope: Reusable design components and themes - Pointer to timestamp 1:03-1:13 - Links: [[Design-Systems]] [[WordPress-Themes]] --- ### ✏️ Fleeting Queue Purpose: Capture quick actions for Fleeting notes. - [F1] Research content-first design case studies — validate redesign prevention claims #fleeting #research - [F2] Create content requirements checklist for theme projects — practical workflow tool #fleeting #template - [F3] Survey WordPress developers on content-design workflow pain points — community needs assessment #fleeting #survey  ## 📺 Video ![](https://www.youtube.com/watch?v=OhmoaWQSQ0Y) --- # 📄 Full Transcript *Auto-generated from YouTube captions · timestamps roughly every 30 seconds · [watch on YouTube](https://www.youtube.com/watch?v=OhmoaWQSQ0Y)* **[00:01]** [Music] What comes first, the content or the design? This is an argument you'll hear across many teams. In an ideal world, a designer has real content, so they have context for their design decisions before producing highfidelity mock-ups. You'll have a rough idea of whether your navigation menu is going to have six items or 60 items. You'll also know if your layouts need to handle a lot of text or give space to simple messaging. If you don't have real content and copy, **[00:33]** copy is just a word for text content. At best, you'll end up using Lauramipom dummy text or placeholder stock images. At worst, you'll waste time designing views that won't exist or picking an icon set that doesn't have icons suitable for your menu items. Okay, there's probably a few legitimate situations where you don't get real content before you start designing. Sometimes the content just isn't ready yet and you'll have to get started regardless. Maybe you're building a design system or creating a theme, so **[01:03]** your work needs to accommodate a variety of content and lengths of copy. In these situations, it helps to work with some sample content to get an idea of the type of information, hierarchy, and tone. Maybe get some real heading text, navigation items, and key content mapped out, even if you don't have all the text and labels planned. That way, you don't have to redesign everything later once you finally get hold of the real content. And most importantly, you'll be able to focus on designing the best possible experience for the people using **[01:36]** the end product. Join us at penpot.app/courses. [Music]