Structure vs Content

Thing A: Structure (Templates)

Templates articulate the content structure of a design, the skeleton. They define image dimensions, character limits, content blocks, and layout relationships. Templates answer: what kind of content goes where, and how much of it?

Templates use placeholder content: grayscale dimension-showing images, Lorem ipsum with character counts. This isn’t laziness. It’s intentional focus on structure without getting distracted by specific content decisions.

Thing B: Content (Pages)

Pages are specific instances of templates with real representative content. They show what users actually see. They’re where you discover whether your structure actually accommodates real-world content variation.

A 40-character headline works differently than a 340-character headline. A user with one item in their cart creates a different interface than one with ten items. Pages reveal these variations.

Key Differences

Structure focuses on what your content is made of, not what it is. Content tests whether the structure actually works.

You can create good experiences without knowing the specific content, but not without knowing your content structure.

When Each Applies

Use templates when: Establishing patterns, defining the skeleton, communicating with developers about content containers, avoiding premature content decisions.

Use pages when: Testing the design system, demonstrating variations, getting stakeholder sign-off, ensuring patterns accommodate real content.

Mark Boulton: “It’s not ‘content then design’, or ‘content or design’. It’s ‘content and design’.” The two are intertwined. Atomic design gives vocabulary for discussing both without conflating them.

Related: 01-molecule—atomic-design-methodology, 01-atom—design-systems-over-pages