If you’ve never built a website before, it’s easy to think: “We’ll get the design done, then we’ll add the words later.”
Seems logical, right?
But I’ve watched that plan backfire more times than I can count.
What I (and most web designers) need you to understand is that content and design are a package deal. They have to work hand in hand.
5 Epic Font Pairings You Can’t Go Wrong With
Tired of searching for fonts? With my 10+ years of design experience, I’ve put together the best font pairings for you to use, where to find them, and what industry they’re best for.
Get the Free Guide
If you build one without the other, you could end up with headlines that don’t fit, sections that feel forced, and a whole bunch of other problems, which we’ll get to below.
Let’s talk about why website content and design can’t be treated as separate steps, what goes wrong when they are, and how to make them work together.
What Happens If You Design Without a Content Strategy
Design-first workflows are super common. A mockup in Figma (our beloved design software) with lorem ipsum looks great…until you add the real words. That’s when the cracks start showing.
Here are the issues I see when design comes before content:
Empty Visual Designs
If you don’t have website content written, designers might fill space with “pretty” sections that don’t have a real purpose once actual content shows up. These sections either get trashed or become a waste of space.
Layout-breaking Headlines
Real copy hardly ever matches the placeholder text. Suddenly your neat one-line headline wraps into three lines and messes with the balance of the page.
Visual Hierarchy That Misses the Point
Without knowing what’s most important to say, the design might highlight the wrong things. I’ve seen sites where a random tagline takes up the hero spot, while the actual “what you do” or “how to work with you” ends up buried halfway down the page.
Navigation That Doesn’t Make Sense
When you design a menu before knowing what pages you actually need, you can end up with half-empty dropdowns or random catch-all pages like “Extras” that mean nothing to users.
Once the real content comes in, the structure just doesn’t make sense anymore. And if your navigation makes people work too hard to find what they came for, they’ll probably just bounce.
Developers Stuck Retrofitting
I’ve seen web developers spend hours trying to squeeze content into layouts that were never built to hold it. What looked awesome on the mockup ends up messy in the build and can even lead to higher costs for revisions.
What Happens If You Write Without Design in Mind
The reverse happens too: people draft content in a doc and then hand it over with zero thought about how it’ll live on a web page. In theory, it’s “done,” but once it hits the design process, problems pop up fast.
What usually goes wrong:
Overloaded Paragraphs
What reads fine in Google Docs can feel like a wall of text on a screen. Without visual elements breaking things up, the page feels heavy.
Copy That Doesn’t Fit Anywhere
I’ve seen content that sounds great…but has no home. It’s too long for a hero, too short for a section, and doesn’t fit the flow of the page. Without layout context, even good writing can feel like a puzzle piece from another box.
Forgetting Mobile
Words that look perfect on desktop often break horribly on smaller screens. Long headlines wrap weirdly, bullet lists run off the edge, and dense paragraphs become unreadable. Writing with the layout and design in mind helps you avoid all that.
My Content & Web Design Process That Gets Everything In Sync
If you want your site to look great and make sense, content and design need to move together. That means thinking through what you’re saying, where it’ll live, and how the layout supports it.
Here’s a step-by-step way to get there:
Start with a Content Plan
Before anyone opens Figma or starts sketching layouts, get clear on what each page needs to say.
Carry out some user research before you start thinking about what to write; this will help you create more “user-centric” content. What are your main goals? Who is the target audience?
What actions do you want those site visitors to take? What relevant information do they need on this particular page?
Write that stuff down. It doesn’t have to be perfect copy yet, just aim for a general outline of what’s going where and what the priorities are.
Map Out the Key Elements of Each Page
Once you’ve got the main points, decide where they’ll go on each page.
Think of it like telling a story: what do people need to see first, what supports that, and what gets them to the finish line?
You can literally sketch it out on paper or in a Google Doc. “Headline here, quick intro there, a few bullet points, video content beside those bullets, then a button.” This is what us designers call a “wireframe”.
Create Content That Fits the Wireframe
Once the wireframe’s set, write the actual copy that belongs in each section.
Doing this helps everyone see how the content will stack and how the user will move through it. And you’ll catch things early, like if one section’s too long or if there isn’t enough content to satisfy search engine optimization best practices.
The quicker you can get this content completed, the sooner your designer can actually create the design for each page (with colors, fonts, animations, videos, buttons – the works).
Kicking off a website project and want to know what kinds of questions I’ll ask? I’d recommend checking out: Why I Ask So Many Web Design Discovery Questions (& Why It’s a Good Thing).
Design Based on Those Wireframes
Now that the story’s in place, design can do its job properly. The layout, interactive elements, typography, colors, and visuals can highlight the most important stuff and guide visitors through the flow.
Having the content ready to go helps you avoid awkward breaks, random filler sections, and “oops, that headline doesn’t fit” moments.
Plug the Copy into the Design & Make Tweaks
Once everything’s together, look at it as a team (designer, writer, developer, you) and see where the content can be clearer or the layout smoother.
Ask yourself:
- Does the page make sense at a glance?
- Can you tell what’s most important?
- Do the buttons stand out where they should?
- Does the page flow naturally?
- Are there any walls of text that need breaking up?
- Does the design give each section enough breathing room?
- Can someone quickly figure out what to do next?
You’re making sure the message and layout are pulling in the same direction, guiding people naturally from point to point without confusion or friction.
So if something feels off, tweak it. Maybe the headline needs more punch, or a section feels too long. Small changes here make a really big difference.
Want Some Help with the Website Design Process?
Every strong website I’ve built had one thing in common: the content and the design were created side by side.
So before you jump into colors, layouts, and mockups, take a step back. Map the message. Figure out what needs to be said and why. The design will follow, and it’ll be stronger for it!If you’re planning your next site and want to make sure it all lines up, reach out today, I’m here to help.
