Learn Website Content Modeling in 3 Simple Steps

Structure is the key to effective web content. But since structure doesn't come naturally to most of us, web content development can be challenging. Fortunately, it's easy to learn how to structure web content through content modeling — an exercise for structuring content. The best way to learn content modeling is to try it for yourself on an existing web page. In this post, we'll show you how.

Today we're doing this exercise with one our client sites, the Olivet Nazarene University Graduate School. Their site a good example of university website design, but the content modeling process can be applied to any company or industry. 

This simple exercise is a great way to learn how web page design is structured. When you're done, you'll have a re-usable template you can use for your own web projects.

1. Divide Your Web page into Zones

The first step in content modeling is to break up your web page design into visual zones. Here is the Olivet University homepage with the zones labeled in red:

We divide our zones by function and visual priority. The header zone contains the most essential information about the site, such as the brand name, logo, and main navigation. Content within the header is consistent across all pages in the website; content below the header will change as users navigate from page to page.

Beneath the header is the main content, which we divide into two zones: above the fold and below the fold. The "fold" is an imaginary line that marks where your content stops on a laptop screen. Content above the fold is your first impression — it should be clean and simple, squarely focused on your target users' most pressing needs. Users will need to scroll to see content below the fold. This is the place to serve deeper content for users already interested in your site.

When you're working on your own web content development, don't worry about fitting in all of your content above the fold. Instead, focus on a simple, concise message for your users. It's better to say one or two things clearly than five things all at once.

2. Identify the Elements in Each Zone

Once you've identified your zones, you're ready to define the elements in each zone. The elements are the "buckets" that contain content. For example, the element "Body Copy" contains the content "As one of the nation's top Christian universities...."

Here's each zone of the Olivet web page design with the elements labeled in red:

Header

Above the fold

Below the fold

3. Create Content Tables

After you've identified all your elements, you're ready to create a content table for each zone. In your content tables, list each element and define it with content.

Header

Within the Olivet header zone, we have four elements: Logo, Primary Nav, Utility Nav, Contact Info. Note that the navigation is an essential part of the header - it's a defining element of the website. Before you create any content, you'll want to plan your navigation in a visual sitemap.

Above the fold

For the content above the fold, we two key elements: Slideshow & Secondary Nav. Since Olivet is a university website, their primary focus is delivering information about their degree programs. They also use their slideshow to tell their brand story.

Note that we see some of the Body Copy and Video above the fold. We could define that content here, or include it in our below the fold content table. Since many sites feature body content below the fold, we've put that content in the next table.

Below the fold

For content below the fold, we have five elements: Body Copy, Video, News, Events, Calls to Action (CTAs). This our deeper informational content for users already interested in Olivet. Here we see two CTAs popular in university website design: "Apply Now" and "Request Information." These are the next steps for users who want to contact Olivet.

Making a New Content Template

This content modeling exercise is espcially useful if you're writing content for a new website. If you need to create new website content, practice by modeling content with a website you like. Then, use your templates to create your own web page content.

At first, don't worry about being original — you'll revise your drafts with your team and they will take on a life of their own. Remember that good content depends on structure. So, by studying the structure of websites you like, you can generate new ideas for your own content.

Keep your users in mind

Structure is important, but it's not the only thing. Good website content is aligned with your user's interests and your business objectives. Without a clear understanding of who your user is, and what you seek to accomplish with your website, the best-structured content won't mean much.

Thorough planning key to writing good website content. When designing the Olivet Nazarene University Graduate School website, we started the project with strategic discovery. During the discovery process, we identified each core user group and business objective. Then, we planned the site to account for trends and best practices in university website design. So, once we started content development with the Olivet team, we had a solid, user-focused design plan in place.

Want to learn more about web content development? We help people plan, create, and launch their web content. If you have any questions, we'd love to hear from you — just leave us a comment or drop us a line.