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.
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.
I just saw, that some minutes ago I commented on a relatively old article (see below). Not sure whether you can still have in the ‘normal’ Divi the Extra category builder as a plugin, as presented in the article of June 2018.
Hello, nothing has changed in regards to the implementation outlined in this article.
Thank you for this insightful article!
I agree the Extra theme is great for organizing your content if it is mainly published in articles. But what to do if you also have lots of more or less ‘static’ content that isn’t updated often but which you want your visitors to keep having easy access to all the time?
For example, a site with lots of information about the technology behind a particular way of generating energy and its pros and cons. Plus overviews of various variants of that technology. If that kind of technical information is to be easily accessible all the time, it is not useful to publish it in standard articles, which get out of focus after new articles are added.
It seems that then the magazine-style Extra is not enough to keep the information accessible. Something extra is needed on the site to keep the technical facts continuously easily accessible.
Anyone with good ideas?
Thanks fro all valuable tips.. very helpful..
I really like the point #Designing for Content Takes a Lot of Planning:- yes this take time ,, we need to understand the text and than can organize text with some appropriate images..
Your choice of layout is a hugely important component of the overall design of your site. However, it can be a seriously overwhelming task, especially if you dive in without a plan.
Thankfully, this area has been widely studied, and there are plenty of strategies you can employ to ensure a superlative outcome.
Important Areas of Design to Focus on for Every Website design, Which we take care while design a website
1) Use a grid system.
2) Structure your content in a Z-pattern or F-pattern.
3) Repeat important design elements.
4) Use white space appropriately.
5) Typography and Fonts