Expertise · Content and conversion flow

Content first or design first: which order is more correct?

The order of work between content and design determines whether your website has a clear message or just a beautiful framework.

Quick summary

Content should come first, or at least run parallel with design, rather than cramming text into a pre-made frame. When design is created before actual content, the team may resort to using placeholder text, leading to confusion as the message has not been defined. The best approach is to finalize the content strategy and draft representation early, then build the framework based on that reality.

Quick comparison
You should choose this direction when
  • the message is complex, content is the soul of the page
  • a team with writers and designers collaborating from the start
Not needed when.
  • using placeholder text and filling it in after the design is complete
  • viewing content writing as merely filling in the last box

Content should come first. Not because design is less important, but because the message determines the layout, the length of each block, and the prioritization on the page. When design is drawn before actual content is available, the team is building a house without knowing how many people will live in it.

Why this order is important

Website design is not just about choosing colors or fonts. The layout of a page determines what the customer reads first, what they believe, and what action they take next. All of this stems from the content, not the frame.

When designing in advance, the team often has to use placeholder text (Lorem ipsum) to fill in the boxes. Placeholder text does not have real length or genuine messaging, so the visual may look good on the designer's screen but falls apart when real content is added. Worse, placeholder text sometimes remains until the page goes live because no one reviews it thoroughly.

Conversely, when the content is defined beforehand, each design block has clear justification: how long the title should be, how many lines the lead should take, how many items in the list. The design then serves the content rather than forcing the content to fit the frame.

Factors that need consideration

  • Is the message clear yet: If you do not know what the page wants to convey, or what the main selling point is, then the design will just be a beautiful shell with nothing inside.
  • The actual length of each content block: Whether the title is short or long, how many sentences in the service description, how many points in the benefits list. All of these directly affect the layout. Only real content can provide those numbers.
  • Placeholder text risk: Each time placeholder text is not replaced with real content before delivery, the page runs with gaps. This risk only occurs when design precedes.
  • Collaboration between the writer and the designer: If you work with a team that includes both roles, they can work in parallel from the start. But the writer must be involved before or at the same time, not after.

When to choose which direction

Content first, design later: Suitable when the message is complex, has multiple selling points, or the content is the soul of the page (in-depth service pages, recruitment pages, brand introduction pages). This is the safest approach for most projects.

Parallel from the start: Suitable when the team includes both writers and designers from day one, the content strategy has been finalized, and a representative draft is available, allowing design to adjust according to real content during iterations.

Framework first, content later: This is only acceptable when you use a real draft (even if rough) instead of placeholder text, and the team knows they will need to adjust the framework after the content is finalized.

Content shapes the layout, not the layout shaping the content. When designing, content should be the foundation, with the message and user needs at the center.

Medium, Content-First Design

Common mistakes

  • Let placeholder text pass on the release date: The team is busy, no one checks again, resulting in live pages with empty boxes or meaningless text. Prevent this by avoiding placeholder text from the start.
  • Beautiful design but unclear message: Visitors arrive at the page, see beautiful images and colors, but do not understand what the page is trying to convey or what the next step is. This is a direct consequence of designing before having a content strategy.
  • Treat writing content as the final step: When content is pushed to the end of the process, writers are forced to squeeze words to fit the framework. They have to cut out important information or add meaningless words. Both approaches harm conversion.

The viewpoint of Sinh Vũ

In Sinh Vũ's process, content strategy and experience flow are defined in the early stages, before interface design begins. Sinh Vũ writes content that drives action, not just sketches beautiful frames, so each page has a clear message before the interface is finalized.

The practical reason: when the message is clear, design is faster and requires fewer revisions. When the message is vague, the team may go through many rounds of revisions without converting customers, because the issue lies in the content, not the colors or fonts.

You do not need a perfect content draft before design begins. But you need at least: the main message of each page, the order of information priority, and a draft representing each important block. That is enough to guide the design in the right direction from the start.

The tool brings back.

Decision checklist

Topic: Should you have content ready before design or the other way around. Sinh Vũ guide, sinhvu.com

0 of 3 items

Tick each item that applies or that you can already answer, then print or save as PDF to take with you.

Sign indicating that you should take action
Questions to answer before deciding

If you have marked most of the signs above, this is the time to discuss in more detail. Sinh Vũ can help you review and propose a direction.

References

Medium (Content-First Design): UX success starts with words. Built In: Copy or Design, Which Comes First in UX. A List Apart: Priority Guides, a Content-First Alternative to Wireframes.

Frequently asked questions

If I hire a design agency, what order do they usually follow?

Many design agencies start with a wireframe and then use placeholder text to fill in. This method is quick for internal processes. However, the risk is that the real content may not fit the framework later, or the message is forced into the layout instead of guiding it. You should ask the design agency to work from real draft content from the beginning, not placeholder text.

I am not sure what to write, can I let the design come first for a better perspective before writing?

Yes, but only if you use a real draft, even if rough, rather than placeholder text. Designing with placeholder text often leads to a situation where the page looks good, but when real content is filled in, it becomes chaotic due to different lengths and information priorities. If you haven't written it yet, start by listing the key points in order of importance; that's enough to guide the design in the right direction.

This article is for reference. The scope, pricing, and specific commitments of Sinh Vũ are detailed in the proposal and signed contract.

← Back to Websites and Digital Experiences