Writing Great Website Content That Matches Website Wireframes

Jun 27, 2023
9 Minutes
Writing great website content that matches website wireframes

Creating effective website content that matches website wireframes is critical for engaging visitors,  and achieving business goals. It’s equally as important to have well-written content as it is to have a well-designed and developed website. Written content won’t effectively tell the story of your brand without visuals to accompany it, and a website without well-written content won’t make sense to users or search engines. Despite this, the importance of creating great website content is often overlooked by many organisations.

In this guide, we'll explore tips and strategies we use at Psychoactive for writing great website content that aligns with wireframes and maximises user experience. Learn how to craft compelling headlines, structure your content for easy consumption, optimise for search engines, and more. By the end of this guide, you'll have the tools you need to create website content that matches wireframes and drives results.

At the heart of collaboration are workshops

Over the years we have explored many ways of creating written content with our clients - we’ve tried our hand at writing it all for them, and we’ve tried letting them write it all themselves. When we gave our clients free rain, they often produced work which didn’t align with the wireframes we designed, and when we did it all for them we weren't able to capture the essence that can only come from direct experience within an organisation.

What we’ve found works best is more of a collaborative approach where we guide our clients through each step of the process with workshops while they write their own content internally. This allows both teams to feel confident knowing that we are working towards the same vision. It also empowers our clients to manage their own content strategy after the project is completed.

Content strategy workshops are essential for writing great website content that matches website wireframes.

Here’s what Psychoactive’s clients can expect from our content writing workshops:

  • Understanding the purpose of website content:
  • Discuss the importance of website content and how it impacts website traffic and user engagement.
  • Identifying the target audience:
  • Understanding who the website content is for and how to tailor the content to meet their needs.
  • Crafting compelling headlines:
  • Tips and tricks for writing headlines that grab the attention of readers and encourage them to click through.
  • Writing for the web:
  • Best practices for writing web content, such as how to use short paragraphs, bullet points and lists, and incorporating multimedia.
  • Search engine optimization (SEO):
  • An overview of SEO principles and how to optimise website content for search engines.
  • Content strategy:
  • How to plan and organise website content to ensure it meets the needs of the target audience and supports business objectives.
  • Editing and proofreading:
  • Tips for reviewing and refining website content to ensure it is error-free and polished.
  • Hands-on exercises and group activities:
  • Interactive exercises and group activities to reinforce key concepts and allow participants to practise writing and editing website content.
  • Q&A and feedback:
  • Time for participants to ask questions and receive feedback on their website content writing.

Content strategy starts on day 1, and so does content writing

As soon as you know that you’ll be having a page on the website - start writing content for it! You know that you’ll be showcasing your product or services on the website, so make sure to write them down, nicely organised, and ready to go, even before we begin workshops. You can then use that content to fill the website content (link at bottom of the page) and inform the website wireframes and designs. Don't leave writing your content until the end of the project.

Content helps to Inform the website designs

Having written content is helpful to inform website designs because it helps Psychoactive designers and developers understand the purpose, tone, and messaging of the website. Content can influence the design by providing guidance on the layout, structure, and navigation of the website. In addition, content can be used to create a hierarchy of information and determine the placement of key calls to action. By having a clear understanding of the written content, designers can create a more effective and user-friendly website that communicates the intended message to the target audience.

Set internal deadlines to get content completed

Psychoactive provides the strategy, while the organisations we work with provide their own management to deliver the work. To ensure writing gets completed in a timely manner, make sure to schedule focus time into your team's calendars. Plan that it might take twice as long as you expect.

Keep the page formatting tidy

To keep the document formatting inside Google Docs tidy we recommend organisations we work with at Psychoactive follow these tips:

  • Headings
  • When creating a new heading, always list it as a heading style. If you want to change the look and feel of a heading style, make the heading look how you want, then ‘update heading to match’

  • Table of contents
  • Setting text as a heading will automatically add it to your table of contents on the left side of your screen, creating a clear hierarchy and making it easy to navigate. For consistency, the table of contents should match up with the structure outlined in the website architecture and wireframes. For convenience and professionality, you can also add a table of contents at the top of your doc which will update with your headings when you click the ‘refresh’ icon.

  • Bullet points
  • Use bullet points and numbered lists to break up long paragraphs and make the content easier to read.

  • Copy and pasting
  • When copy-pasting text onto the content doc from another place, always select it and give it a style such as ‘normal text’ or ‘heading’, otherwise you’ll have different styles, fonts, font sizes and colours scattered throughout your doc

Use text colours to denote differences in content type

Using different coloured text helps to quickly visualise and segment types of content so that everybody is on the same page. Here’s an example of how we usually colour-code content types with organisations we work with at Psychoactive:

  • Pink = Informational and structural content.
  • Basically, anything that is helping to guide the content doc. This includes names of pages, names of sections, and general information such as tips and tricks. Nothing in pink will actually go onto the website.
  • Black = Confirmed website content
  • An indication that the content is ready to go either into the website designs or into the development environment.
  • Red = Needs content
  • This could be placeholder text like lorem ipsum or could be work-in-progress content that still needs to be refined or confirmed before it is made black.
  • Blue = Call to action (CTA’s)
  • Links or buttons that connect to other places on the website or externally
  • Green = Content updated
  • We usually use green later in the content development process. Any changes made to black content after it has been uploaded into the designs or development should be highlighted in green. This will help the Psychoactive team to quickly identify which content needs updating. If you don’t update it in green, it will be impossible to know if you have changed a word or a sentence. Once we have updated content highlighted in green on the designs or development environment we will change it back to black to indicate it is up to date.

Use two screens - one for content doc, one for wireframes

When writing website content, make sure that it matches the structure of the wireframes. If you find that the content differs from the wireframes, or you have any questions, feedback or suggestions to change the wireframes, please make a comment in the Figma file where the wireframes live so that we can discuss how we can adapt them to match.

The best ideas are shared, so get collaborative!

We always encourage collaborative writing where multiple contributors from within the organisation get together a few times a week to write on the content doc together. This helps to bring different perspectives, skill sets, and ideas to the table, avoids writer's block, and makes the process more enjoyable which can lead to a more well-rounded and engaging final product. Collaborative writing can also help to ensure consistency and accuracy throughout the content, as multiple people are able to review and provide feedback on each other's work. We’ve found that the content creation process works best when content is created from within organisations rather than outsourcing it.

Write your meta descriptions first

A website meta description is a brief summary of the content of a webpage that appears in search engine results below the URL. Writing your meta descriptions first before getting stuck into your page content will help you to visualise and summarise core themes, keeping your content focused and keyword optimised.

To write effective website meta descriptions, start by summarising the content of the web page in a concise and compelling way. Keep the length to between 150 - 160 characters, including relevant keywords to improve search engine optimization (SEO). Use active voice and a clear, specific language that entices readers to click through to the website. Avoid using duplicate meta descriptions for multiple pages, and make sure the meta description accurately reflects the content of the page. Finally, ensure that the meta description is relevant to the user's search intent and provides a clear understanding of what the web page is about.

Write headings that tell a story

To write compelling website headings that tell a story, start by identifying the key message or idea that the heading should convey. Use strong and specific language that resonates with your target audience and creates a sense of urgency or excitement. Incorporate relevant keywords for search engine optimization (SEO) purposes and consider using emotional triggers to capture the reader's attention. Keep the heading concise, clear, and easy to understand, avoiding any ambiguity or confusion. The goal is to create a heading that is both informative and attention-grabbing, motivating readers to engage with the content that follows, almost like a poem.

Use tools like ChatGPT to your advantage

Tools like ChatGPT can help you save time and effort when writing website content while also improving the quality and effectiveness of your content.

  • Use it to generate ideas for your content
  • Improve your writing by using the model's suggestions to rephrase or make your content more engaging
  • Enhance your website's SEO by incorporating keywords naturally into your content
  • Generate catchy headlines by inputting a few keywords or a topic
  • Provide additional context and information to support your content.

Focus on getting the draft content out ASAP

Psychoactive needs content to fill the designs, so a draft needs to be ready before we begin the design phase. In most situations, this means you’ll only have a few weeks to create the draft during the wireframe phase, and then a few more weeks to polish it during the design phase. It doesn't need to be perfect, but it does need to indicate that what we are proposing in the wireframes actually aligns with the structure of the content.

Content doc example to get you started

Please find this example of a content doc to get you started.