Content-first workflow

Integrating content strategy into the design process.

The principle

Design should respond to content, not the other way around. Traditional workflows often reverse this relationship—designers create containers, then content is forced to fit.

The best workflows let content people work directly in the same material as designers. HTML is surprisingly accessible—content strategists and editors can edit text in the prototype, see it in context, and iterate without waiting for handoffs.

Live Wires is built for content-first design. Start with real text, real headlines, real images. Let the content inform your design decisions.

Why content-first matters

  • Real constraints. Actual headlines have varying lengths. Real articles have different structures. Design for reality, not idealized placeholder text.
  • Appropriate hierarchy. You can’t establish visual hierarchy without knowing what the actual hierarchy is.
  • Honest scope. Working with real content reveals true complexity earlier in the process.
  • Better feedback. Stakeholders respond more meaningfully when reviewing actual content.

To top

Together, not sequential

The phrase “content-first” can be misleading. It suggests a sequence: first content, then design. But that’s still a handoff mentality—just with the order reversed.

The real goal is designing and content together, at the same time.

When everyone works in the same material—HTML in a browser—the artificial separation between “content” and “design” dissolves. A headline isn’t something you design around; it’s something you’re designing with. The writer sees how their words work in context. The designer sees how the structure responds to real content. Adjustments happen in conversation, not through documentation.

Why “content-first” still matters

If you can’t have content and design happen simultaneously, content-first is the better fallback than content-last. Designing empty boxes and filling them later leads to:

  • Layouts that break with real content
  • Arbitrary constraints on word counts
  • Designs optimized for placeholder text, not communication

But when possible, aim higher than first-or-last. Aim for together.

To top

Real collaboration

When everyone works in the same material, collaboration becomes genuinely collaborative—not a handoff relay.

The shared workspace

HTML is surprisingly accessible. Content strategists, copywriters, and editors can work directly in the prototype:

  • Edit text in place. Change a headline in the HTML, refresh, see the result instantly.
  • Test variations. Try different word counts, tones, structures without waiting for design updates.
  • See context. Content appears in its actual visual context, not a spreadsheet or document.
  • Version control. Use Git to track content changes alongside design changes.

Reducing friction

Traditional workflows have friction at every handoff:

  1. Content in a document → Designer imports into Figma
  2. Designer updates mockup → Developer implements in code
  3. Content changes → Everyone updates their version

With Live Wires, there’s one source of truth. Change the HTML, and everyone sees the same thing.

To top

CMS-first approach

For maximum agility, start directly in a CMS. Live Wires works beautifully with template-based systems like Craft CMS.

The workflow

  1. Install Live Wires in your CMS project.
  2. Start content modeling immediately—define fields, sections, relationships.
  3. Build templates using Live Wires layout primitives.
  4. Enter real content through the CMS interface.
  5. Refine design tokens as visual patterns emerge.

Your prototype is your production site from day one. Content editors can work in the CMS while designers refine templates. Nothing is throwaway.

Benefits

  • Content structure drives design. Field types, relationships, and entry structures inform layout decisions.
  • Early editor testing. Content teams can test the editing experience before launch.
  • Real responsive testing. See how actual content behaves at different screen sizes.
  • No CMS surprise. The integration is already done—there’s no “CMS phase” later.

CMS starter templates coming soon.

To top

Content modeling

Content structure and information architecture should drive design decisions. Live Wires helps you think in terms of content patterns, not page layouts.

Think in content types

Instead of designing “the homepage” or “the article page,” identify the content types:

  • Articles—headline, byline, body, images, related links
  • Products—name, price, description, specifications, gallery
  • Events—title, date, location, description, registration
  • People—name, role, bio, photo, contact

Each content type has predictable structure. Design for the structure, and the pages assemble themselves.

Controlled variation

Give content editors meaningful choices without breaking the system:

  • Color schemes. Let editors choose from predefined schemes (.scheme-warm, .scheme-cool).
  • Layout options. Offer a few layout variations per content type.
  • Emphasis levels. Featured articles get different treatment than standard ones.

This mirrors magazine design: department heads might choose from three header treatments, but they can’t redesign the publication.

To top

Art direction from content

In a CMS context, utility classes become styling hooks that content editors can apply from within the editor.

Field-driven classes

Add fields that output class names:

<article class="{{ entry.colorScheme }} {{ entry.layoutStyle }}">
  <h1>{{ entry.title }}</h1>
  {{ entry.body }}
</article>

Editors select from dropdown options; the template applies the corresponding utility classes.

Content-aware layouts

Let content inform layout choices:

{% if entry.featuredImage %}
  <article class="sidebar sidebar-reverse">
    <div class="prose">{{ entry.body }}</div>
    <figure>{{ entry.featuredImage }}</figure>
  </article>
{% else %}
  <article class="prose center">
    {{ entry.body }}
  </article>
{% endif %}

Has an image? Use a sidebar layout. No image? Center the text. The content dictates the design.

To top

Practical tips

Start with the hardest content

Don’t start with the homepage. Start with the most complex content type. If you can design for a long article with pullquotes, images, and sidebars, simpler pages will fall into place.

Use real content lengths

Headlines vary. Some are 3 words, some are 15. Design for the range, not the average. Test with your shortest and longest real examples.

Document content guidelines

As design decisions are made, document the content constraints they imply:

  • “Hero headlines work best at 4–8 words”
  • “Teaser descriptions should be under 150 characters”
  • “Featured images should be at least 1200px wide”

Iterate together

When content changes break the design, that’s valuable information. Either the design needs to be more flexible, or the content guidelines need to be clearer. Don’t blame—collaborate.

To top

Related