For most websites, designing for content isn’t an issue. For most websites that include a blog, the content is not the main focus of the site. They typically have a blog page and post a few times a week. However, websites where content is their reason for existing is another story.

Websites with lots of content, or content-heavy websites, face a different type of design challenge. In this article we’ll discuss how to design for a website with lots of content.

The Challenges of a Complicated Build with Lots of Content

The example above is from UX Mag.

For some websites their content is what they exist for and they produce a lot of it. These websites often include content such as how-to’s, reviews, interviews, news, events, thought-pieces, product information, and lots more – all on a wide range of topics within the genre the website serves.

A large amount of content typically requires lots of categories. Sites that focus on content also tend to post often. This means that content can disappear from the homepage quickly.

If the content is not organized well, such as within the navigation structure and with well-thought-out meta tags, it can be difficult to find. If the layout to show this amount of content isn’t designed well it can quickly become too cluttered.

They can also have too many categories and content to search through. Lots of content can be difficult to organize if the layout isn’t designed with content in mind. Too much content packed into a small area can get lost or ignored.

Designing for large amounts of content requires thought.

Designing for Content Takes a Lot of Planning

The above example is from Creative Bloq.

Think of your favorite restaurant’s menu. Food is divided into categories that make sense. You intuitively know where to look for specific things. You don’t have to consciously think about the structure. For example, you wouldn’t expect to find pizza and drinks listed with burgers. Each one has their own category. The more items the menu has the more categories are helpful. This categorization is planned carefully.

Planning would include choosing typography that helps improve readability. It would determine how to use subheadings, lists, boxes, to separate categories and make them easy to skim. Planning would help you find the proper content density for your audience.

Articles need to be grouped by topic and sub-topic. Similar things need to be grouped together. For example, services need to be grouped by types of services.

Articles from specific categories can be placed within boxes or groups and displayed with white space between the articles and between the content blocks. Content needs featured images and the right amount of meta and excerpts for your design. Latest and popular posts should be identified.

Structuring Content in New and Unique Ways is Difficult

This example from Wired magazine shows posts within categories.

Think of your favorite magazines, blogs, newspapers, news websites, etc. They know that the key to solving these problems is organization. They organize topics into categories and then display those categories in the cleanest way possible.

They don’t even try to structure content in a new or unique way. They know what works and they stick to it. They don’t make users think about the layout. They don’t make them work to understand their content’s organization. They don’t use heavy text content within a bad design.

The layout has to be easy to navigate. This requires a solid structure such as a tiled layout with simplified titles. Too much content is overwhelming. Too many categories in a menu are too difficult to read.

Simplify the content to keep it readable. Use a title and photo. Don’t use large excerpts. Use color, space, blocks, titles, to separate categories. Images should be clickable. Remember mobile design.

Displaying categories within boxes with white space to separate them helps to create a clean and elegant layout that’s easy to understand and navigate. Our eyes need a rest. If we have to take in too much content in a small area we tend to look over it. Everything blends. Less is more.

Elegant Themes’ demo for Extra is one of my favorite examples of excellent layout design with lots of content. This layout shows lots of articles groups by categories and keeps the layout clean and easy to follow. Content is placed within boxes that are labeled well and stand apart from each other. This was built with the Category Builder.

Extra’s Category Builder was designed for publishing content, making it a great choice for magazines, news, and blog layouts. The Category Builder includes tabbed posts, featured post, a post slider, masonry and standard blog feeds, a post carousel, and an ads module. This isn’t normally available to the Divi Builder.

Divi Extras is a Great Solution

The best and easiest solution for Divi users is a plugin called Divi Extras. This is a plugin that adds Extra’s Category Builder modules to the Divi Builder, allowing designers to integrate magazine and blog layouts into their Divi designs. The Category Builder modules can be used on any page or post using Divi, Extra, or the Divi Builder plugin.

Divi Extras makes it easy to organize your content into categories and present those categories in a simple layout that’s easy to navigate. The plugin is easy to use and the modules work the same as any Divi module. They’re marked a different color in the Divi Builder so they stand out.

For more information about Divi Extras, see the article How to Use Divi Extras To Build Unique Divi Web Designs.

See Divi Extras is the Aspen Grove Studios store.

Ending Thoughts

Designing a website for lots of content can be tricky. It requires a lot of careful planning of navigation, categories, tags, and to present the content in a way that’s easy to navigate and consume. A magazine layout is one of the best options for presenting content in categories to make that content easier to use. Divi Extras makes that task easier by adding the Category Builder modules from Extra to the Divi Builder – allowing designers to use Category Builder modules on any post or page.

We want to hear from you. Have you used Divi Extras to solve content design challenges? Let us know about it in the comments.