What is content-first design? Without the right content flow, you don’t have a website. Without quality content, you’re not being heard. Without a clear content strategy, your website is just a beautiful empty vessel that leaves no lasting impression and won’t convert. A content-first design approach prevents all that.
Content-first design stresses the importance of your content when defining the design, the layout and the navigation of your website. It ensures that your users’ needs are met. Only then, you design and style your website to adapt. It is a concept that ensures close collaboration between writers, designers and developers.
Without a content-first design approach and quality content, your website is just a beautiful vessel that will never convert or leave a lasting impression. Click To Tweet
Content-first design is a fairly new concept. It relies on a clear content strategy that centers on your users and gives your content the importance, and all the space, it needs. It stresses the importance of writing in the design and development process.
“Content design is a way of thinking. It is about using data and evidence to give the audience what they need, at the time they need it and in a way they expect.” (Sarah Richards)
In the past, a designer would create a visually stunning web page, add some place holder text (aka lorem ipsum) and get approved. Then the client would send the actual copy to be used, and the designer would have to adjust the design: text box lengths would change; headline spaces would be off; balances would shift. The once beautiful design would become disheveled and not what the clients had expected from the flawless mock-ups they’d seen. The design would have to be readjusted. Layout and navigation needed to be changed. The design would have to be redesigned. Time wasted, money lost.
Your site (re)design process can’t start with what the site looks like, but rather must first address the goals that the site is set out to meet.
Only then will the user interface take the design shape to fit your content—and only after you know exactly what content your users need and what content you want to provide. A clearly mapped content flow ensures that your users won’t get lost. Only a content-first design approach ensures that your users’ expectations are met. It focuses on content quality, not quantity.
“Content precedes design. Design in the absence of content is not design—it’s decoration.” (Jeffrey Zeldman)
Content is essentially all the images, words, videos and data across your site. A content-first design ensures that all your content is represented as you envision it and that the page is functional, reaches its target audience and consequently converts. Your site visitors interact with you and your services through vital content. A content-first approach makes sure that your site visitors are indeed put at the center stage.
“Web design is an extension of page design, and page design is all about crafting the perfect paragraph. To craft the perfect paragraph you need to be working with the content.” (Mark Boulton, a UK digital designer)
To test whether your site puts your site visitors’ content needs front and center, ask yourself this: If you were to remove all styles and design elements on your site, does your website still tell a cohesive, consistent and clearly developed story? Do you convey your central message? Do you keep your users hooked? The answer should be yes. If not, your site content seems to have been added after the design, put into placeholders that were never clearly structured or defined. Your content was squeezed-in, an afterthought. Your design has taken over your message.
Your goal is to make sure that your site design displays the content in the exact order as needed and empowers the users to immediately get the answers they need.
You develop your site by starting with your content—and then design out from there.
“A content-first approach is the equivalent of planning out a book and then following through with it. With every character and storyline ready, everything falls into place.” (Inkbot Design)
During the actual web design phase, a content-first approach ensures a design flow from the bottom up. It prevents the new design from having to be rebuilt and restructured as the content flow emerges after all the content has been gathered and submitted or the content has changed mid-way. It also ensures that future content modifications can easily be done. Establishing a clear content flow before the design phase even begins ensures that any content changes, later on, will not compromise the site’s layout, structure, functionality and usability.
Content-first design is more efficient because it relies on development collaboration by the entire team from the get-go, from writers to designers, developers and stakeholders. Everyone gets involved from the start and knows exactly what’s needed. It reduces costs, helps stick to a set timeline and aligns with long-term business goals.
“By adding lorem ipsum to the design you are essentially dressing your king before you know his size.” (Kyle Fiedler, Thoughbot)
Your site’s content is what makes your website useful for the user, not its design. Deciding on the right content flow early on will prevent bottlenecks or design restraints later. And your organized and structured content fleshed out in the pre-design phase will be ready when needed.
Content that doesn’t fit your site’s goal, its mission and your message or is duplicated can be easily eliminated. The design adjusts. You are not tempted to add superfluous content just to fill rigid design elements (like boxes and sidebars), squeeze headlines into allotted spaces or work with too many (or too few) templates that the developers haphazardly built into your site.
Lastly, a content-first design approach ensures that your content is better searchable, search engine optimized, organized and user-aligned. When mapping out and planning the content before the design has even started, your site structure will become clearer and manageable. You set the parameters before the design phase begins. You see what’s missing early on and can plan ahead.
Below is a general overview of the phases involved in a content-first design approach.
Define the Site Structure
You structure your content into types that are like reusable containers for managing content by common structure and purpose; they group together, structure and organize your content. Content types can then be reused, presented, formatted, searched and classified consistently across the site, no matter the design. There are two models used for this:
- Domain Model represents concepts and relationships. These can be similar to page types: Blog, Services, Shopping Card, Donation Page, About, Services, Contact, Portfolio, Projects etc. Each page displays a defined set of content types. This model arranges all main subject matters/topics needed for the visitor in alignment with the site’s goals.
- Content Model defines specific content types by using attributes and grouping them together by relationships (name, title, item, cost, size, description, color, category, tag). It identifies reusable content patterns and elements (headlines, subheads, intro, summary) and ensures that they stay consistent throughout.
Perform User Research
Ask your users open-ended questions and identify which problems you solve for them. Then map the content types (i.e. keywords, topics, pages) to give them all the information they need.
- What assumptions do they have?
- What issues are they facing?
- How does the content type fit the users’ journey?
- What do they need to know?
- What do you want them to take away?
- What do you want them to do next?
Analyze the Content
- Assess your website’s goals. Does your content meet them?
- Define your core content. Start with what users need to know, what they are looking for on your site and what you want them to take away from visiting your site. What are your main goals for your users and next steps you want them to take?
- Map out your ideal content flow by recreating the journey you want a user to take when visiting your site.
- Perform a content audit. Find any gaps and decide which content stays, needs to be updated or created to fulfill the users’ needs.
- Flesh out your content strategy. Decide on your content hierarchy that aligns with your organization’s/brand’s goals.
- Create a content sheet for each content type with its exact attributes (i.e. who, what, when, why, even attributes that will be added later) to define, dig deeper and provide more info for each larger content piece.
Create Visuals & Design Elements
It will be much easier and efficient to design the pages and site structure of your site if you have mapped out all the necessary pieces of content beforehand.
Next, assemble a full-page rendering (mockup) of the pages with all your content types/data in the exact place where they should be. Is something missing? Does a crucial content type get drowned out by others? Do you have duplicate content types? Is the content hierarchy, from high (important) to low, clear and consistent?
Only then the design and developer team will add structured semantic HTML rendering of all the content attributes you flagged and layer on the CSS to style.
Add Menus & Navigation
Add menus and navigation last—after all content types are known according to the content/domain model and finalized. The content flow dictates the navigation and site structure—not the other way around. Follow a simple URL structure to provide a clear path for your users.
“Telling a web designer to work on your site without giving them the content is like telling an interior designer to work on your living room before you buy an apartment.” (Karol K, Adobe)
Content-first design is crucial because every good design is based on good content. A content-first approach focuses on your storytelling as if you were conducting a conversation with your site visitors.
The design becomes a tool to tell that story, not the main focus.
When designing your website, highlight and support your content, don’t drown it out. Your site visitors will thank you.
“Good copy makes good designs better. Bad copy, copy meant just to fit boxes and fill spaces, only makes for a pretty mockup.” (Tobias van Schneider, Desk)
Newsletter Signup
I’ll be in your inbox periodically with actionable content + design tips and tricks, checklists and tools that you can apply immediately. I’ll share with you links to relevant blog posts (mine and curated recommended must reads) and other engaging content that will help you amplify your message and find the right site design.
This is your one-stop shop for content-rich websites: content strategy, content design, site care.
