Planning for a Content-Heavy Web Design
The majority of websites on the web today have very minimal content, while focusing on the main message of that content. This is why many web designers are probably more used to designing for little to a medium amount of content. Yet, there are many websites out there with large amounts of content - news sites, certain blogs, online shops, communities, and more. When a website will require heavy content, and a large amount of content on one page, then special planning is required.
In this post, we'll go over the essential steps and additional tips for creating a content-heavy web design. It takes a good amount of client communication and proper collaboration, as well as organization. With these parts of the web design process intact, a content-heavy website can be created quickly and productively, while maintaining the best result for the final outcome.
Get All of the Content Up Front
For a website that will require a lot of content, the design will have to be specifically designed around that content. It will need to be a part of the design phase. In other web designs, filler content is sufficient while the client is getting content put together, and this is because many content areas in a design can be flexible in text length. However, with a content-heavy design, with so many content pieces on a page, it can be incredibly helpful to know how long blurbs, introductions, or other pieces of static content are. Also, if there are variables pieces of content, it would be helpful to know the average size of those pieces.
Also, many clients who don't offer the content up front will forget about certain pieces of content that they'll eventually say they need on the front page, or another content-heavy page that will have little adjustment flexibility. In a content-heavy design, things are tightly fitted, organized, and placed properly based on hierarchy and available space. A web design with less content on the page would allow for more room to "squeeze in" an additional piece of content, unlike a content-heavy design.
In the above example, article titles and blurbs are planned appropriately according to the design, and require specific restrictions in content length that are planned ahead. The organization present in the web design would not have been possible with the variation and amount of content without content samples to plan around. If a new piece of content or section would need to be placed on this front page, it would take considerable planning, and wouldn't be a piece of content that could just be dropped in.
Use a Grid
It's nice to break the grid every once in awhile, or allow variation within a grid system. This is what can make web design fun and interesting. With content-heavy web design, though, there's not a lot of room for variety. With possibly a few minor exceptions to your creativity, for content-heavy design, use a grid, and keep to it. Organize margins and padding in detail within the design process, and plan ahead of time for the size of each content area.
Above is a use of the popular 960.gs grid system, but there are many more options, or you can create your own grid on the spot. For content heavy design, it is also often necessary to plan the grid vertically as well, while most pre-made grid systems focus on horizontal alignment only. As changes in text length occur, that means there is a change vertically. Take a look at each boxed section that will hold a piece of content with a grid: based on its width and the content that will go inside, what will be the vertical length required? Does the content need to be cut off at a certain point, or the grid altered?
In our same web design, note above how the length in content was planned according to the grid available. Even with varying content lengths, certain pieces will need to share the same length, only to be continued through a link. In these cases, be sure to communicate with the client (or plan yourself if a personal project) how much content within a blurb should be shown on the page in question. Too short and not enough content may be shown to make the blurb effective, while at the same time, too tall and it could break the design.
Borders, Boxes, Margins, and More
From a purely aesthetic design perspective, content-heavy design takes a different route in this way as well. Organizing a webpage through hierarchy, rhythm, and order, and defining functional design is a major part, as it is heavily stressed throughout this article and many more like it. Color and shape, though, have a lot to do with it too. While many aesthetic design choices are best for content-heavy design, many are also good for the functional part of the design too. In a way, they complement each other.
Design styles that match a content-heavy design best are those that are minimal, and offer plenty of whitespace. While for many of the websites that feature a lot of text may not seem that minimal based on how much is going on on one page, from a design perspective it is. There is generally more line space between lines of text, greater margins and/or padding between pieces of content, and in the areas where there is no content, the area is kept clean and open. Plan for whitespace intentionally, more so than you would for other types of designs. It is essential to the success of a web design that is bound to be "busy."
Creating enough open space and in the correct spots can help separate and organize content, as well as define hierarchy among all of the text even further. At the same time, the empty space can be put to good use by being filled with design elements - simple design elements that separate and define unique areas.
Many common ways to do this are to use borders and varying background colors. Decorative borders or horizontal rules can add decor to a minimal content-heavy design, and can be used as imagery to draw attention in the same way a photo would. Take a look at Problogger's design above. There is plenty of padding and margins for efficient whitespace usage, but various content areas are further differentiated by varying background colors. Even below the featured area, two background colors are used to separate the two areas on the left and right, but are also so close in color that it bonds them visually (therefore helping the top featured area stand out against both simultaneously).
So Much Type Requires Smart Typography
With so much type on a page, one way to keep the design uncluttered is to not use many additional visual elements, and instead, let the type do the designing. Creative and beautiful type is a feature of many content-heavy websites, including The New Yorker:
There is a mix between serif and sans-serif fonts, font color, size, and style. A completely unique font is used for the main headlines. While typography can bring interest to a design, especially one with primarily text only, it can also serve an essential purpose in hierarchy, repetition, and design organization. Where will the reader look next? If all the type of the page is much the same, it would be difficult to know. However, with intelligently designed headlines, we do know where to look. With so much type on the page, it can easily become difficult to read and focus on one piece of content. Smart typography will embrace vertical rhythm, correctly planned content widths, and adequate whitespace for easily legibility of one piece of content in a sea of text.
Check out the resources below for more information on organizing and designing not only beautiful typography, but smart typography:
- 10 Web Typography Rules Every Designer Should Know
- 8 Rules for Creating Effective Typography
- A Basic Look at Typography in Web Design
- On Web Typography
- Five simple steps to better typography
Format Variety - Blurbs, Images, & Lists
One may notice that for a website with a lot of content, it isn't just the same repetitive format over and over again, spanning horizontally and vertically across the page. While repetition is important to the aesthetics and organization of design, too much of it can make things boring. It can also make the web design lose essential flow and hierarchy.
The above example keeps things interesting by combining different variations in content length and format, while still including plenty of enticing links right on the front page. The variety keeps to a grid, but at the same time "breaks the grid" vertically for visual interest. This is also a great method for creating accurate hierarchy. The most important pieces of content (for example, "Our Mission") are next to images and have longer descriptions, therefore taking up more space and drawing more attention. Items that require less attention are further from the primary points of interest, and have less text - many of them are just titles within a list (for example, "News").
A Showcase of Content-Heavy Websites
A website with a lot of text doesn't have to be busy or cluttered. Content-heavy design takes special techniques and practice to accomplish successfully, but it can be done, and done well. As the Internet becomes more of the go-to place for information, news, and resources, we are seeing the need for more of this content per website, and per page. It may be a changing, rising trend, but it doesn't have to be frustrating. In fact, planning for a content heavy website can be an interesting and entertaining challenge.
Always be sure to plan ahead, get the content you need, and keep organized when dealing with so much text on one page, and within one website. While there are a number of visual guidelines that go best with text-heavy websites, such as the use of boxes, borders, minimal color, separation of color, etc, there are also very important guidelines for the organizational part of the design — hierarchy, order, whitespace, and more. Keep all of this in mind, and a content-heavy web design can come together easily and with an excellent outcome.