Home > UX and Prototyping > Prototyping for a better content strategy

Explore how interactive prototyping can put your content strategy on the map in your web design process and help you create better user experiences.

With user-centered design all around, how we deliver our content to users is a number one factor in determining the success of our products and services. Having a strong content strategy from the offset of your web design project can really help you to establish the voice of your website, product or software. In today’s post, we’ll discuss the importance of content-first design in web design projects and how prototyping can help you reach outstanding content strategy whilst also improving user experience (UX). 

Content-first design

Content contributes to the overall UX of your web site or app, and introducing content in the moment that users need it is just good UX. Your content needs to speak the right language to your users and you should therefore be testing what copy works and doesn’t work from as early on as possible. But how do you establish a content strategy during the design stage of your web project? Well, in our experience, building your content strategy into your design process is easier when you use a prototyping tool. In fact, we recently upgraded our website, building a content-first design through prototyping with Justinmind. We don’t mean to toot our own horn, but toot toot!

Why design content-first?

Ben Thiefels describes content-first design as the process of using copy as the driver of web design, with the intention of composing content first, and then design around said content. Not long ago, we were discussing the inherent link between content and visual design and we concluded that the two need to be integrated in order to achieve great user experiences. However, we still often leave content out until after the fact.

So why should we design with content in mind? Google’s Product Director Luke Wroblewski explains that by designing with real content, we can “inform and guide decisions results in product designs that scale well and communicate effectively.” OH! And designing content-first intends to ensure that our content is a pleasure to read.

The importance of content-design harmony

“When we go content-first we are thrusting the content centre stage in the design process and ensuring we respect and consider the opportunities, constraints and implications of content on our designs.” Liam King, Lagom Strategy Founder

When we talk about design harmony, we’re referring to the visual design principle that indicates that all parts of the visual imagery – colors, texture, shapes – and layout should relate to and complement each other. Much like in a painting, design harmony on-screen helps to unify all text, imagery and white space and can make the composition more of a delight to read, a better experience. Content needs to be tested alongside design in order to validate the content-design harmony of a webpage or app. In some cases, content actually becomes a design filter and helps us to design with UX insights. In other cases, design has the final say.

Take our example. During the Justinmind website renewal process, we needed to redesign our Features pages. As you can see from the link, we opted for a grid layout to display all of our features plainly for users. There are sub-categories and linked pages to explain more about each sub-category. The grid layout acts as a type of content container, which means that every cell has a character limit that must be adhered to to avoid breaking the grid structure. Here, design limited our copy choices because we had to ensure we said what we needed to say in fewer words than we might have intended to initially. Depending on the purpose of your content and where it will be displayed, you’ll need to adjust it. Preparing for this from the beginning can make all the difference. This is what we call content granularity and some clever web designers have come up with a variety of different techniques to cater for different screens, including responsive and adaptive web design.

In Responsive Web Design, your content and design are molded for each screen.


Download Justinmind today and design content-first prototypes!

Download free


The limitations of dummy text

In publishing and graphic and web design, lorem ipsum is used as a placeholder text, or mock content, to demonstrate the graphic elements of a visual presentation. Many desktop publishing packages and web page editors established lorem ipsum as their default pre-copy content solution in order to avoid distracting the reader with readable content with the intention of only validating a page’s layout. For instance, web design agencies will often use lorem ipsum when presenting a web design to stakeholders or clients so that they focus on the visual layout of the page, and not the copy.

Despite the practicalities of lorem ipsum, there are some tradeoffs. Luke Wroblewski advocates that: “Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws.” 


Not convinced? Need lorem ipsum in your life? At least make it interesting!


Before lorem ipsum, graphic designers were actually accustomed to using real content. In publishing and graphic design, real content was the designer’s briefing, or requirements, as we now know them. Using real content enabled not only the designer to understand better the client’s order, but helped the client to ensure their requirements were being met – great for the designer-client relationship! And with content re-entering the design process, it looks like we’ve come full circle.

Now that real content is back on the cards, it’s really important to do it right. Design in itself is about delivering content the right way, but how we really go about designing with content? Enter content-first prototyping.

Prototyping content-first design

Real content = effective design

To quote ourselves, content contributes mountains to design. So why wait to bring it into the process? Creating a fully-developed product model just for the sake of testing your content can be a very costly option. A great workaround? Content-first prototyping. Not to be confused with content prototyping, prototyping content-first design allows you to visualize real content in your designs from very early on in the design process. Here are few ways in which a smart prototyping tool can help you to implement real content in your designs:

  • Using templates to test different types of copy to view all possible user touch points, with different visual layouts.
  • Inserting HTML and Docs into your prototypes to easily include pre-made copy.
  • Integrating data-driven prototyping with real data in your prototypes to ensure real, accurate results with user testing.
  • Adding styles and design hierarchy to create design harmony between visual elements.

To give you an idea of what’s out there, Justinmind has an adaptable Text Box widget that will expand as you type into it, allowing you to easily visualize how your text will look on the screen as you write.

Justinmind’s adjustable Text Box widget

Implementing real content in your prototypes

“We prototype our interaction and visual design to exhaustion, but accept that the ‘real words’ can just be dropped in later. There is a better way.” Andy Fitzgerald on ‘Content-First Prototyping’

In Justinmind’s recent website redesign, we began our initial design process using lorem ipsum as a filler for where our claims would later be placed. However, this was only during the paper wireframing stage and at the beginning of the digital wireframing stage, where the information architecture was being established. Soon after this, we moved from mock text to real copy in our static wireframes and high-fidelity prototypes in order to test our designs and content together.

The content we had used wasn’t necessarily the final copy, and we’ll admit that this did cause some issues along the way. For example, when we were redesigning our Features pages, we’d started out with copy of a certain character length, that fitted our design layout nicely. However, upon changing some of the claims, we ended up having to tweak the designs and copy in order to find a middle ground. But you see, that’s the beauty of prototyping! You can muck around in your designs as much as you like without having to change a lick of code – with the added bonus of seeing what the content and design will actually look like to the user!

Content-first prototyping: thinking beyond design

It’s not only the design process that content-first prototyping can boost. Think about the wonders it can do for your team. Prototyping content-first can make for a collaborative and enjoyable design process. By incorporating real content into your designs, you are not only going to get a more realistic idea of how your final product will look, but you also enable your team to make coherent decisions based on genuine design proposals – facilitating all-important conversation during the design process.

How do we figure this? Well the way we see it, everyone has their own requirements and objectives that they want to reach in a project. By bringing content suggestions to the table from day one, you open up discussions about how the content will appear to users, and can therefore bridge communication gaps within the team, clients and external parties from early on. 

In order to effectively merge UX design and content, we need collaboration across teams. Justinmind is a great collaborative prototyping tool that also allows you to include content in your prototypes. With our tool, you can import real content and data into your prototypes to give your content strategy a more realistic from the very beginning. Additionally, Justinmind’s Google Fonts help to facilitate conversation in the design process without any coding!

Download Justinmind and boost your content strategy today!

Emily is Marketing Content Editor at Justinmind

Add comment

Your email address will not be published. Required fields are marked *