Do you write the lyrics or music first? Do we start at the beginning or plan out the ending? Do you execute your content marketing strategy, starting with writing web copy or creating the web design layout?
Since the beginning of time, humans have wondered, “Which one comes first,” no matter the creative pursuit.
The question of whether website copy or website design should come first in the web development process is a common one — and there’s no one-size-fits-all answer.
However, you do need to know what story your website will tell before you can begin thinking about visuals. Plus, starting with storytelling will help you create BETTER visuals. You’ll find that it does a lot of the heavy lifting when the time comes to design the website.
If you tell a story, you will need a microphone and a stage (or at least a decent podium).
Bruce Springsteen says, “You can’t start a fire without a spark.” When it comes to web design, that spark is a captivating content marketing strategy.
Story-First Web Design
In a perfect world, you have a well-established brand identity — from a visual, public perception, and communications standpoint. And then, you could build a website that reflects your brand.
However, many brands struggle with a disjointed identity, and websites are often created before fully developing their brand identity. If your website copy and design are disjointed, it’s understandable. Small and new businesses typically think of websites as sales tools long before they become marketing initiatives.
But, the design-first approach is backward if your business is serious about building an impactful digital storefront. There’s a reason we think that your company needs to consider your strategy and your branding before you jump into web design. We believe story-first web design performs better.
Your website attracts your audience, advertises your organization’s purpose, and is often a prospect’s first interaction with your business. Your website will tell a story, whether you intentionally write it or not.
Do you want your website to tell the story of a disjointed brand that can’t execute on one cohesive strategy, or do you want your website to tell a story that invites the customer to take the crucial next step?
Web design can be an intentional act of marketing, or it can be expensive decoration. Web design without a content marketing strategy isn’t worth the budget line item.
Everything on your website should be intentional.
A good website can do more than list your address or take orders. A website designed with intention generates new leads and then tells visitors what to expect while guiding them through the sales funnel.
Your website is your best chance at taking potential customers on a stroll through your brand. You control what they see, hear, and read. You control their possible next steps and influence their decisions.
With that much opportunity, you don’t want a random design decision to be the deciding factor.
The content of your website — the literal story it tells — can interact with design elements and interactive features to create the perfect brand experience.
Proof of Concept
By starting the website process with storytelling — content strategy — you can spend more time thinking about the larger strategic purpose of your website. Whether collecting contact information, driving subscriptions, or closing sales, once you understand your website’s ultimate purpose, you can customize the design elements and user experience to achieve the ultimate goal.
How we deliver a story — our tone, expression, and body language — is as influential to the message as the words we use. If your content marketing strategy is your story, your web design is your body language. Your brand story should influence not only your design but also your overall web architecture.
A website designed to close sales should tell a different story and follow a different user flow than a website built for generating leads.
Beyond the conceptual benefit of building a story-first website, starting with your story has practical, time- and cost-saving benefits. The design process for a story-first website is simply more efficient.
The website process’s most time-consuming aspect is proofing and editing because the design phase focuses on such details. Getting approval and stakeholder buy-in during the conceptual and written phases often cuts design time by more than half.
As much as most of us writers hate to admit it, it’s easier for most people to write a sentence than to draw a detailed picture. It’s easier to make changes and anticipate problems during the conceptual phase.
Plus, many clients and stakeholders actually prefer to see the written content before the detailed design begins. Some even require a written plan as a part of their creative process. It helps them understand the site’s messaging and flow and can lead to more informed design decisions.
A Collaborative Approach
A story-first website shouldn’t exclude designers. In fact, designers should be key participants in the story construction phase. In practice, a collaborative approach usually works best.
Designers and copywriters can work closely together from the project’s inception, with each informing the other’s work. This collaborative process can help ensure that both the design and copy are aligned and create a cohesive user experience.
Just as content informs design, design elements can influence how content is perceived. When designers and copywriters work closely from the project’s inception, they can be sure their ideas are aligned, and both pursue the same cohesive user experience.
Beyond the more practical advantages of visual and written brand collaboration — a designer can better convey brand feelings visually when they can experience the story firsthand.
Start Simply
No one is expecting you to sit down and write a 100-page book detailing your brand’s story. In fact, no one even wants that.
Start small. We don’t need your entire company history right now — just the website’s main point. Come up with a few headlines that describe your brand’s main benefit or your website’s ultimate purpose. Start with bad and obvious headlines to get the ball rolling.
- “Our shoes make you 5% faster.”
- “We want you to subscribe to our email.”
Write a few 100-word descriptions to go with each headline. Can you prove that your shoes make people faster? How will your email newsletter benefit me?
With a story mostly outlined, you can begin the early visual sketches of your website and write the final content marketing strategy simultaneously.
Wireframing is one valuable exercise in the early stages of integrating your content marketing strategy into your web design.
A Genius’s Guide to Wireframes in 5 Easy Steps
- On a sheet of paper, with a black pen, draw a tall rectangle. That’s your website, good job.
- Write one or two of your headlines in the box.
- Draw a box near the headline with a big X inside of it. That’s where a picture will go one day (but not today because today is just for wireframes).
- Draw arrows showing the navigation path you want visitors to take.
- Now, rearrange the elements to find more appealing and efficient layouts. Try to match layouts from some of your favorite sites.
These early visual representations of your website’s layout allow designers and copywriters to iterate versions of the story and make adjustments before putting in the effort and time the final build will require.
Breaking the project down to words and lines can also lead to better and faster idea generation by demystifying the process and alleviating some of the creative pressure.
Need Help Marrying Your Content Marketing and Web Design?
Content Workshop helps brands like yours tell their stories every day. We work with organizations to craft compelling content marketing strategies and build story-first websites.
