Planning for a Content-Heavy Web Design

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.

Planning for a Content-Heavy Web Design

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.

Swishlife

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.

Nuvographics

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?

Vertical Space

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.

Boxesborder

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:

Typography

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:

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.

Variety

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

Nuvographics
Nuvographics Showcase

What is Blik
Blik

Swishlife

The Feast
The Feast

Lord Likely
Lord Likely

The 9513
The9513

Housing Works
Housing Works

Live Stream
Live Stream

Aiga
Aiga

Design Shack
Design Shack

Simplified Safety
Simplified Safety

The New Yorker
The New Yorker

Problogger
Problogger

MSNBC
MSNBC

Activecollab
Activecollab

Conclusion

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.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.