New Web Order: An Overview of Content-first Design

Designers do not simply decorate, they create an experience of moving through content. But what happens if a client or team members don’t understand how content should drive design? To avoid an upside-down process, there are strategies that can help explain the importance of content and rally a team around creating it up front.

User experience and great content are recognized as being essential to a successful product design. Nevertheless, it’s easy to consider them as secondary to aesthetics. A product team can easily place focus and attention on the look and feel rather than the elements behind the style. If a project kicks off with the visual design process as the first call to action, inefficiencies are bound to occur.

Design aesthetics should be based on business objectives, user research, and content. A client can most likely provide business objectives, and user research may already exist—or with the right team be easily attained. Content creation is a long and tedious part of the project and is often overlooked, but the role that it plays in the design process and ultimately in the success of the product continues to be widely misunderstood.

Here, we establish the importance of content and the strategies a team can use to create a content-first design.

The Importance of Content-driven Design

When content is deprioritized, and creating and collating content is left to the last minute, significant problems inevitably arise:

• Delays occur in designing, building, and launching the product.
• Templates don’t fit the content appropriately.
• Too many (or too few) templates are created.
• Actual content doesn’t align with the vision of the website design.
• Issues can arise when using dummy content.
• Designs are compromised when beautiful placeholder imagery is replaced with low-quality images available for use.

Align Clients and Designers from the Start

A problem that often arises when asking a client for real content is a “chicken and egg” scenario—the client is convinced they need to see the design in order to know what content needs to be created.

This makes sense from the point of view of someone who might not be well-versed in the process of design—creating something from nothing. It is up to the designer to facilitate the decision making process around what the content should (and can) be. Innovation agency Smashing Ideas advises that when designers give “ample opportunity for your stakeholders to voice their opinions and deliver feedback, you bring them along on the journey and both your product and approach only get stronger.”

Through this content-first design process, the vision for the end product will be established collaboratively and in realistic terms regarding, for example, feasibility and budget constraints. The client and stakeholders will be more invested in seeing how a great design is based on data and content. By aligning the client at the beginning, the team will be more informed when it comes time to sign off on final designs.

Base User Experience Design and Content on Research

Designing with data allows designers to create a solution based on real users and their behaviors. However, this is just the beginning. Once the research has suggested what content is required to meet the user needs, it has to be created.

“Design in the absence of content is not design, it’s decoration.” - Jeffrey Zeldman

When design and content are created based on user research, the designer creates something that effectively targets the user. More consideration is required at the beginning of the project, but it doesn’t have to dramatically change the constraints of the client’s content scope. By making content decisions based on user research rather than ambiguous ideas, the product will consequently be more streamlined and focused on the end user.

Save Time and Money with Content-first Design

When content isn’t prioritized, inefficiencies accumulate throughout the project—a designer creates too many (or too few) templates, layouts need to be adjusted when real content doesn’t fit, and designs are reassessed when real images are less than desirable. The time it takes to revisit the designs when content is created late in the process is unnecessary, and a strain on the team.

Quite often, the time and resources required for content creation are underestimated and content is pushed to the end of the project. This is made easier with resources that support the lack of content during the design process. Websites like Lorem Ipsum and Placeholder helpfully generate dummy copy and images for designs without content. While these can be useful in creating a good-looking design, things can fall apart when real content is put in its place. Kyle Fiedler, Chief Design Officer of the digital design agency thoughtbot, believes that “by adding lorem ipsum to the design you are essentially dressing your king before you know his size.”

Problems are amplified when a product is engineered and coded before content is created. The image above illustrates how dummy content doesn’t match the real content. Titles and meta copy are much longer and push past the constraints of the nicely laid out boxes. A lack of content in some areas creates empty space, and real images that are much smaller and of lower resolution cause major issues in the layout.

This team is now faced with having to adjust the design and potentially adjust the product’s code. This could have been avoided by creating the content before getting too far along with design and development.

Tactics for Content-first Design

Content Audit and Inventory

The very first step to gathering content is to perform a content audit and inventory. This includes analyzing all content that exists on a current product, such as a website. This can be an insightful and informative process because it provides the team with an idea of the scope of the required content. Additionally, it can be used as a starting point for the information architecture.

Content-first Strategy Workshops

Group sessions and collaboration, in general, can get everyone on the same page when creating content by bringing them together in order to craft a unified content strategy. A workshop typically focuses on articulating content types, identifying content responsibilities, developing a brief, and mapping a content production process. A workshop can also highlight:

• Bottlenecks
• Known issues
• Lack of internal content skills
• Internal politics

Gathering Content

One problem that plagues content creators is collecting the content in a way that can be efficiently accessed, shared, and edited. Without a proper workflow, there is a good chance that hundreds of individual documents will be created, each with various versions that are inconsistently sent through email chains, or uploaded to the cloud in ways that give only some people access. This sets the scene for miscommunication and inefficiencies.

It’s vital to agree on a workflow solution from the start and provide access to all necessary team members. Google Drive is an adequate solution, however, there are dedicated tools such as Gather Content that allow for sharing, editing, versioning, and exporting into various content management systems.

How to Effectively and Efficiently Create Content

Invest in Copywriters

The most successful projects are ones where stakeholders within the company work closely with copywriters at the beginning. This prioritizes content in the minds of the client. The project leader is able to effectively manage the project, and leave the content creation to a professional writer. These projects allow for enough realistic content to be created before the design stage.

Enlist Content Creators

If a copywriter doesn’t fit into the budget, then it is critical that someone from the internal team is appointed to work closely with the client to coordinate the content creation. Each member of the team can be responsible for creating or collating the content. A clear outline defining what is needed should be articulated in a good content-first strategy plan.

Start with Proto Content

As a last resort, proto-content can be used. Proto-content is taken from the client’s current website or from a competitor’s website and used in mockup designs. By using this rather than dummy text, the content is more representative of the real content that will be produced. Title length, body copy length, metadata, and imagery pulled from existing websites can give a more realistic idea of how to design the layouts than lorem ipsum can.

Leading with Content

It’s important that everyone on a product design team—including clients and stakeholders—understand the role that content plays. By establishing a clear content-first strategy at the beginning of a project, the team will save time and money. The final product is more likely to be aligned with the vision of the product and meet the needs of the user more effectively.

Designers who value a content-first design process will fare better in creating a purposeful product through a streamlined process. Pseudo content can be left behind to make way for other productive tactics. When content is given the attention it deserves, everyone wins.