Knowledge Base Articles > Content-First Design

Content-First Design


SUMMARY: In order for your website or application to succeed, you need to have the right content to meet your goals. By starting with a content-first mindset, you will ensure that proper time is given to understanding what you want to say and how to say it. Otherwise you may end up trying to cram content into a website that cannot hold it properly and your message will be lost on your users.


Content is design. The type of content you use. The tone of it. The length of it. All of this plays a big role in shaping your user’s experience. By focusing on what users will consume on your site – before sketching a wire, or writing a line of code, will allow you, the creator, to focus on what really matters; delivering content to the user in a clear, concise and hopefully delightful way.

Let's Start With Answering the Question, What Is "Content-First" Design?

It’s quite simple actually, it’s an approach where the content for your project determines the design of the site. Think text, photos, charts, tables, lists… any element that can go on the page or screen is the content. Start your project by taking inventory of what needs to go on each page. Are you creating a dashboard with charts and tables? Or a marketing site with eye-catching photos or illustrations, plus supporting text?

The more you know about what will go into the site, the better you can plan the design to fit the content. Think of it as building a house. Your architect will want to know how many bedrooms you will need before starting construction. Try to know as much as you can before starting to design.

"Ok, I'm sold, how can I start a content-first design project?"

Alright, let me ask you a few questions first. Is this a new project with no content created? Or is it a redesign of an existing project?

"I'm working on a new project."

Awesome, can you answer one or more of these questions?

  • “What are we trying to communicate to our audience?”
  • “What story are we trying to tell?
  • “What actions are we hoping our users will take on the site?”

This is a great starting-off point for your new project. You can use your answers to help generate an outline to structure your site and build a site map. Site maps are a great way to identify all the pages / screens you will need. Which helps identify what content will be needed to fill your site.

A site map is a visual representation of the pages in a site. It details the basic structure and determines the hierarchy of all the pages. This is a handy way to determine the design of the navigation and what templates may be needed.

Example of an Ecommerce Site Map

Example of an Ecommerce Site Map

You can learn more about about creating site maps in Balsamiq here.

If you are designing an application try creating a Process or User Flow.

A process flow is a documentation of the users’ paths through a product. It highlights the steps taken to achieve a desired goal, calls out key tasks, and user needs.

Example User Flow:

From the article Build Professional User Flows in Balsamiq

From the article Build Professional User Flows in Balsamiq

Another great exercise to try is a Competitive Analysis. At the start of any design project it's beneficial to explore competitors websites or applications. This research can help you gain a better perspective for what you want your project to be. You can use this analysis to see how your site features stack up to others, or to simply discover what else is out there. Are there things that work well? Aren’t working? Look for ideas you may want to incorporate, and one that you would not like to add. It could be copy or an interaction. Dig into the details!

Here's a checklist to follow:

  • What message are they trying to communicate?
  • What are their key differentiators / features?
  • Who is their target audience?
  • How do they use visual design to communicate their brand?
  • Finally, look for positives and negatives of each competitor from your perspective.

There are lots of ways to create a competitive analysis document. Starting with a simple spreadsheet to document each competitor is a great way to understand what each has to offer.

You can view and use this template here.

Using a spreadsheet is a great way to track what each competitor has to offer.

Using a spreadsheet is a great way to track what each competitor has to offer.

If you want to better understand what offerings your competition has, a competitive analysis matrix is a great way to visualize it.

Read more at UX Collective’s article Essential Ingredients for Every Competitive Analysis.

Read more at UX Collective’s article Essential Ingredients for Every Competitive Analysis.

"I'm redesigning an existing site / app."

No problem. I have some other questions.

Does the content on your current site help answer the questions above? If not, what’s missing? Also, is the content update-to-date? Relevant? Duplicated anywhere else in the site?

A simple way to help answer these questions is by conducting a content audit.

A content audit is the process of documenting and analyzing all the content on a website or application.

Knowing what you are working with is a great starting point. It will help you understand what you want to keep, and what you want to change. From here you can start thinking in terms of templates.

Content audits are typically created with a spreadsheet too. Yay for familiar tech! These can also be very simple. It consists of breaking down your site with the purpose of bringing out the text to a format where you can focus on the text only. Read your headlines, body text, captions and look for places where you can be more clear in your words, or for places where you are repeating yourself. If you have a large site, you likely don’t have to go through everything, but just the more recent work.

Here is an example:

Checkout the article How to Conduct a Content Audit from UX Mastery to learn more.

Checkout the article How to Conduct a Content Audit from UX Mastery to learn more.

You can download the template I use here.

To Recap

  1. Answer some background questions about your project
  2. Create a site map
  3. Conduct an Competitive Analysis and/or a Content Audit

You will now have a much better understanding of what content will go into your project and can start thinking about how you want it to design it.


Templates

Once you’ve spent spent time diving into what content your project will need, it’s time to move onto to creating templates. Most websites are designed and developed using a limited number of page layouts called templates.

Large websites typically use only 5-7 templates to support hundreds or even thousands of pages of content. Why? Templates are a great way for users to become familiar with your site. It improves their ability to navigate and find what they need more quickly. Also, it is far easier to develop and support a limited number of page types that each hold different content.

To get started creating templates, take all of the work you’ve done and begin to look for similarities in content between pages. For example if you are creating a blog, all article pages should follow the same format. For a marketing site, your features page could look similar to a pricing page.

Another way to think about it is, “How many of these pages should follow the same format?”A good way to start looking for similarities is by sketching thumbnails of your templates. This will help you understand if you will need a template to hold 3 images and lots of text, or 20 images and not a lot of text, or both.

Marketing site home page
Marketing site home page
Gallery page
Gallery page
Text heavy page
Text heavy page

If you’d like to learn more about creating templates, checkout our chapter on Templates in our Intro to UI Wireframing course.

Start with initial sketches and then move onto full wireframes

Start with initial sketches and then move onto full wireframes

Phew, that was a lot of work, but it will be worth it. You are now pretty far along in the design process and can start creating full wireframes of your new site. You also have a good idea how much content you will need to account for in your designs, so you won’t have to try to squeeze content into a page not designed for it.

I hope you found this walkthrough of content-first design helpful. Use the suggestions here to guide your project from the perspective of the ultimate goal, effectively communicating what you want to say, or what you want your users to do.


Further Reading

If you are interested in exploring more about how content can impact a website's design, checkout this great case study about how content writers use wireframes.

If you would like to see some of the topics we covered in action, watch the first video in this live wireframing session with with non-profit organization Bellies Abroad.


Billy CarlsonBy Billy Carlson
Got questions or feedback? Email learn@balsamiq.com.