When working on website projects, it isn't always realistic to have all approved content before any design work happens. But there is something better than non-contextual place holder content like Lorem Ipsum. Enter: proto-content.
The content-first approach
When redesigning a website, we recommend a content-first approach that focuses on the content upfront can help to avoid problems further down the line.
Content is often overlooked in the early stages of web design projects, but this is a mistake too many organisations make. It is your content that will allow users to complete their tasks, achieve their goals and ultimately get what they need.
'In order to create the most usable interfaces, content can’t be an afterthought — words alone can define the experience of an app or website', as prototypr say.
The content-first approach is what it says on the tin: it's thinking about the content before anything else. This isn’t about forgetting design or getting all of your content done before you start design. But it is about paying more attention to content at the start of a project and using content to guide the design process.
This strategy also increases teamwork and communication across silos, gets everyone on the same page, connects content behind the scenes, and ultimately changes the way designers think about websites and collaboration. You can read more about content-first design in these articles:
Proto-content is the most fundamental part of content-first design. It's never too early to start designing with content. When you’re redesigning a website, stuffing Lorem Ipsum into wireframes and prototypes is standard practice. But why?
As Liam King says in our guide on Content Strategy for UX Designers, "it’s inert, meaningless and lacks context, revealing very little about the relationship between the design and the content." Proto-content is, by definition, going to be low fidelity. We don’t need perfect content to design and validate our imperfect prototypes, but we do need something better than gibberish. Lorem ipsum can also be blamed when things go wrong.
What can we use as proto-content?
Proto-content isn’t the final and approved content. Don't worry! But it’s a good idea to start thinking as if you’re creating the final piece of content. Here are some ideas for different types of content you can use for proto-content:
Design with current content. There’s nothing to say you can’t use current content. You might find you can edit it and rework it. If you're an educational institution, then you could use last year’s prospectus for example.
Design with competitor content. This is also a good idea if you're launching a new service and a competitor has the same service. You must remember to change this before going live though!
Write your own throw-away content. This can be time-consuming, but you can write what comes to mind when you’re designing. If designing a new web page, write something in context of what the page is. Rather than write address 1, address 2 etc., write an actual address. This can already start to reveal insights into issues around content length.
Use draft content (don’t wait for sign off). It's common to get bottlenecks in the content production process, and people become difficult to get hold of to sign off final pieces. If your writers are having these issues, don’t wait. Remember, it’s proto-content. Done and imperfect is better than not done with Lorem Ipsum.
Commission sample content. Depending on the size of the project, you may want to commission writers to do outlines, drafts and specific sample content.
Pick some of these methods and give it a go in your next project. Be sure to mark any proto-content as “draft” so team members know to review and update as needed before the site is launched. If you've got a workflow in your content tool, add a stage for proto-content.
Issues without proto-content
Proto-content can help us make smarter design decisions early. Otherwise, we can run into issues, like:
The design needs to be changed to fit the content. This happens all too often. It's a waste of time and money when elements need to be re-designed to fit around content that's too long, too short, or content that doesn't fit the format well.
The content needs to be changed to fit the design. On the flip side, you have another set of issues arising when content needs to be changed to fit design. Messaging gets lost or diluted and last minute, rushed edits are made (sometimes by people who aren’t the editors and writers and sometimes without sign-off).
The final content is late. With Lorem Ipsum, this means the site can’t go live and will sit (probably for a while) with no usable content. If you start with proto-content then a good amount of the work is done early on, and if you get desperate it could be perhaps edited quickly and shaped up to go live initially.
Proto-content allows content and design to work together and in parallel from the start. It takes little capacity and resources to quickly jot down rough ideas or copy and paste from another piece of content, so use this! Proto-content means we can start to eliminate guesswork (which inevitably creates more work in the end).
Examples of proto-content
To help you visualise the benefits of using proto-content, we’ve got a couple of examples using wireframing and prototyping tool UXPin to develop and digitise a sketched interface into a lo-fi HTML prototype we can play and test with.
This is an example for an education company taken from our Content Strategy for UX Designers guide. We’ve created a panel for Education Agents in our prototype and added proto-content beneath:
Using proto-content reveals immediate insights:
The panel's heading quickly widows to a second line at the standard wing width.
Will education agents be able to easily self-identify which region they are from? Do we need to be more specific?
South East Asia is a fairly long region name which easily fits into a dropdown of this width. Are there any longer ones?
We continue to design the expanded version of the panel which reveals the Education Agent Liaison Officer contact details and ‘ask a question’ form for the selected region. You can see that rather than pasting in Lorem Ipsum or using generic labels like email@bu.edu we’ve used proto-content:
Even more insights:
We get a feel for the amount of text that will be on the page, and sentence length, structure etc.
Is this profile photo too small? Perhaps we shouldn't show photos on the side-wing version of the panel and only when it is embedded in the body area of the page (which much more width to play with)?
This typical character-count email address is too long for the available width —we will need to rework the layout or the email address is going to break the template. What is the longest email address we know of?
This layout can't handle phone numbers either. Do we even need to say the word 'phone'? Let's look at our competitor examples again to see what they do.
This layout is struggling to display a typical address. Is there even sufficient user need to include a post address in the panel? Could that level of detail be show in the general staff directory area of the site?
Should we limit the character count of questions? Where does the content in the forms actually go and get stored?
The mixing of design elements and content elements helps us to build a clear picture and visualise a site better, helping us spot problems and opportunities for UX early on in the process.
Using proto-content for better UX and better internal collaboration
Thinking about real content early on helps web designers bake user experience at all angles and touch points into the design process. It means you can make better decisions and iterate around user journeys and the functionality of the site, thanks to the context that proto-content provides.
A content-first strategy and working with proto-content also ultimately increases collaboration between content strategists, writers, editors, subject matter experts and web designers as silos are connected and communication begins early on in the process. This helps create an environment of responsive, user-focused web design.
When working on website projects, it isn't always realistic to have all approved content before any design work happens. But there is something better than non-contextual place holder content like Lorem Ipsum. Enter: proto-content.
The content-first approach
When redesigning a website, we recommend a content-first approach that focuses on the content upfront can help to avoid problems further down the line.
Content is often overlooked in the early stages of web design projects, but this is a mistake too many organisations make. It is your content that will allow users to complete their tasks, achieve their goals and ultimately get what they need.
'In order to create the most usable interfaces, content can’t be an afterthought — words alone can define the experience of an app or website', as prototypr say.
The content-first approach is what it says on the tin: it's thinking about the content before anything else. This isn’t about forgetting design or getting all of your content done before you start design. But it is about paying more attention to content at the start of a project and using content to guide the design process.
This strategy also increases teamwork and communication across silos, gets everyone on the same page, connects content behind the scenes, and ultimately changes the way designers think about websites and collaboration. You can read more about content-first design in these articles:
Proto-content is the most fundamental part of content-first design. It's never too early to start designing with content. When you’re redesigning a website, stuffing Lorem Ipsum into wireframes and prototypes is standard practice. But why?
As Liam King says in our guide on Content Strategy for UX Designers, "it’s inert, meaningless and lacks context, revealing very little about the relationship between the design and the content." Proto-content is, by definition, going to be low fidelity. We don’t need perfect content to design and validate our imperfect prototypes, but we do need something better than gibberish. Lorem ipsum can also be blamed when things go wrong.
What can we use as proto-content?
Proto-content isn’t the final and approved content. Don't worry! But it’s a good idea to start thinking as if you’re creating the final piece of content. Here are some ideas for different types of content you can use for proto-content:
Design with current content. There’s nothing to say you can’t use current content. You might find you can edit it and rework it. If you're an educational institution, then you could use last year’s prospectus for example.
Design with competitor content. This is also a good idea if you're launching a new service and a competitor has the same service. You must remember to change this before going live though!
Write your own throw-away content. This can be time-consuming, but you can write what comes to mind when you’re designing. If designing a new web page, write something in context of what the page is. Rather than write address 1, address 2 etc., write an actual address. This can already start to reveal insights into issues around content length.
Use draft content (don’t wait for sign off). It's common to get bottlenecks in the content production process, and people become difficult to get hold of to sign off final pieces. If your writers are having these issues, don’t wait. Remember, it’s proto-content. Done and imperfect is better than not done with Lorem Ipsum.
Commission sample content. Depending on the size of the project, you may want to commission writers to do outlines, drafts and specific sample content.
Pick some of these methods and give it a go in your next project. Be sure to mark any proto-content as “draft” so team members know to review and update as needed before the site is launched. If you've got a workflow in your content tool, add a stage for proto-content.
Issues without proto-content
Proto-content can help us make smarter design decisions early. Otherwise, we can run into issues, like:
The design needs to be changed to fit the content. This happens all too often. It's a waste of time and money when elements need to be re-designed to fit around content that's too long, too short, or content that doesn't fit the format well.
The content needs to be changed to fit the design. On the flip side, you have another set of issues arising when content needs to be changed to fit design. Messaging gets lost or diluted and last minute, rushed edits are made (sometimes by people who aren’t the editors and writers and sometimes without sign-off).
The final content is late. With Lorem Ipsum, this means the site can’t go live and will sit (probably for a while) with no usable content. If you start with proto-content then a good amount of the work is done early on, and if you get desperate it could be perhaps edited quickly and shaped up to go live initially.
Proto-content allows content and design to work together and in parallel from the start. It takes little capacity and resources to quickly jot down rough ideas or copy and paste from another piece of content, so use this! Proto-content means we can start to eliminate guesswork (which inevitably creates more work in the end).
Examples of proto-content
To help you visualise the benefits of using proto-content, we’ve got a couple of examples using wireframing and prototyping tool UXPin to develop and digitise a sketched interface into a lo-fi HTML prototype we can play and test with.
This is an example for an education company taken from our Content Strategy for UX Designers guide. We’ve created a panel for Education Agents in our prototype and added proto-content beneath:
Using proto-content reveals immediate insights:
The panel's heading quickly widows to a second line at the standard wing width.
Will education agents be able to easily self-identify which region they are from? Do we need to be more specific?
South East Asia is a fairly long region name which easily fits into a dropdown of this width. Are there any longer ones?
We continue to design the expanded version of the panel which reveals the Education Agent Liaison Officer contact details and ‘ask a question’ form for the selected region. You can see that rather than pasting in Lorem Ipsum or using generic labels like email@bu.edu we’ve used proto-content:
Even more insights:
We get a feel for the amount of text that will be on the page, and sentence length, structure etc.
Is this profile photo too small? Perhaps we shouldn't show photos on the side-wing version of the panel and only when it is embedded in the body area of the page (which much more width to play with)?
This typical character-count email address is too long for the available width —we will need to rework the layout or the email address is going to break the template. What is the longest email address we know of?
This layout can't handle phone numbers either. Do we even need to say the word 'phone'? Let's look at our competitor examples again to see what they do.
This layout is struggling to display a typical address. Is there even sufficient user need to include a post address in the panel? Could that level of detail be show in the general staff directory area of the site?
Should we limit the character count of questions? Where does the content in the forms actually go and get stored?
The mixing of design elements and content elements helps us to build a clear picture and visualise a site better, helping us spot problems and opportunities for UX early on in the process.
Using proto-content for better UX and better internal collaboration
Thinking about real content early on helps web designers bake user experience at all angles and touch points into the design process. It means you can make better decisions and iterate around user journeys and the functionality of the site, thanks to the context that proto-content provides.
A content-first strategy and working with proto-content also ultimately increases collaboration between content strategists, writers, editors, subject matter experts and web designers as silos are connected and communication begins early on in the process. This helps create an environment of responsive, user-focused web design.
Rob is Founder of Fourth Wall Content working with clients on content strategy, creation and marketing. Previously, in his role as Head of Content at GatherContent he managed all of the organisation's content output and content operations.
Share on Facebook
Share on Twitter
Share on LinkedIn
Share with email
