Designing a good website that accommodates a lot of content is a tricky balancing act to pull off. Does one attempt to present the user with all the information in a clean, organized manner, or reveal it bit-by-bit, in an effort to create an engaging breadcrumb trail that tugs the user along the road to enlightenment? Get it wrong, and you risk overwhelming your visitors, who’ll then leave without retaining any part of what they just read. Get it right, though, and you’ll have gained a new audience member who not only understands your message, but also might just bring a few friends with them when they return.

“Afraid of being exposed, dying to be seen — there’s a dilemma for you.”
-Philip Roth, The Human Stain

Information overload is a brick wall for website engagement that sets in very quickly – and once it does, it can be very difficult to regain your visitors’ attention.

In our online travels, we’ve identified several tools and principles that should live in every designers’ utility belt. They can be used to attack the challenge of creating a content-rich site:

  1. White space – allowing the content (and your visitors’ eyes) room to breathe
  2. Boxes, borders & graphical planes – Segmenting the information into visual categories
  3. An intuitive search method – Letting your users jump straight to the info they need
  4. Grids – Although not always necessary for comprehension, keeping content within a rigid, consistent structure helps reduce the effort required to process it
  5. Strong information hierarchy – Establishing a consistent design language using content types (blurbs, excerpts, call to actions)
  6. Visual hierarchy – The relative importance of different content areas and elements can be visually implied in many ways, ranging from typographic treatments (headlines, sub-headings, pull-quotes, etc.), to image sizes and saturation, placement, etc.

In the examples of content-rich websites that follow, you’ll see many of these best practices applied effectively in order to maintain an enjoyable, friction-free experience.

Polygon

Polygon

http://www.polygon.com/

What is it?

Polygon is a videogame review site from the founders of gadget-enthusiast upstart The Verge (also profiled here).

Why we like it

The Verge

The Verge

http://www.theverge.com/

What is it?
As the new kid on the block that’s populated by the likes of Gizmodo and Engadget, The Verge is taking a fresh, bold approach to covering the wide world of technology.

Why we like it

Conde Nast

Conde Nast

http://www.condenast.com/

What is it?
Being the parent company of many of the best-known magazines around (including a couple we’ve featured here), almost makes Conde Nast’s site genetically predisposed to offer a mountain of content that could easily be overwhelming if not approached with caution, forethought and disciplined design.

Why we like it

Blik

Blik

http://www.whatisblik.com/

What is it?
Blik is one of the biggest destinations around for art supplies, and with such a diverse range of media and materials to accommodate, it needs to ensure that its creative audience can quickly find the items they need when inspiration strikes.

Why we like it

USA Today

USA Today

http://www.usatoday.com/

What is it?
As one of the largest newspapers in the US, USA today knows a thing or two about managing a large amount of content in a limited space.

Why we like it

The New Yorker

The New Yorker

http://www.newyorker.com/

What is it?
The venerable publication famed for its satirical cartoons brings a stately approach to presenting its content online.

Why we like it

AIGA

AIGA

http://www.aiga.org/

What is it?
The national professional membership organization for the graphic arts, AIGA has its hands in many avenues of outreach for its members, including conferences, perks, publishing and more. In this instance, presenting their overwhelming amount of available content in an effective way meant exploring outside the traditional layouts of similar organizations.

Why we like it

A List Apart

A List Apart

http://www.alistapart.com/

What is it?
One of the de-facto bibles of designing for the Web, A List Apart publishes daily, thought-provoking articles on the finer points of our craft. This is deep, thought-provoking stuff, so a usable interface and pleasurable reading experience are paramount.

Why we like it

The Black Harbor

The Black Harbor

http://theblackharbor.com/

What is it?
A showcase of art spanning an eclectic variety of styles from the artist collective I Shot Him Because I Loved Him, Damn Him.

Why we like it

Ebony

Ebony

http://www.ebony.com/

What is it?
One of the best-known magazines for Black-American articles, opinion and insight, Ebony covers an incredibly broad number of topics in its mission to share the perspectives of the African-American community.

Why we like it

Wired

Wired

http://www.wired.com/

What is it?
The original home of pan-genre tech and geek journalism, Wired covers a breathtaking variety of detailed content – making accommodating it all comfortably on their website quite the achievement.

Why we like it

Boston Globe

The Boston Globe

http://bostonglobe.com

What is it?
This widely-reknowned newspaper caught the attention of the Web last year, when they rolled out a major site redesign – one of the first mainstream sites to embrace responsive design methods.

Why we like it

Co.Design

Co.Design

http://www.fastcodesign.com/

What is it?
Fast Company’s design blog showcases all the latest goings-on in the world of product and graphic design. Needless to say, there’s a lot going on in those areas these days…

Why we like it

Think Quarterly by Google

Think Quarterly by Google

http://www.thinkwithgoogle.co.uk/quarterly/index.html

What is it?
Google’s quarterly publication with their musings on the trends and movements of the Web is a surprisingly refreshing reading experience coming from a company with a reputation for deeply-entrenched engineering background.

Why we like it

Wrapping it up

Make no mistake – none of these examples successfully navigated the minefield of creating a content-rich website by accident. It takes a ton of time, strategy and deliberate planning in order to not only execute these designs, but also ensure that future content updates fit flush within the overall user experience. Therefore, it pays to keep the following guidelines in mind:

Prioritize – When everything’s important, nothing is. You should clearly establish what content is required by the user up-front, and what can be hidden. Once you’ve figured that out, make that hidden information easy to find when needed.

Semantic Categorization – Categorize your content in a way that makes sense to your user – not to you, nor your client, nor your colleagues. Be ruthless in identifying and eliminating internal jargon and acronyms that you toss around in a usual day at the office.

Design Consistently – Keeping all your elements, typography and spacing consistent across the whole site takes on a whole new level of importance when taking on a content-rich site, not only for the users’ sakes, but for minimizing future maintenance headaches. For example, keep related image assets all the exact same dimensions, so they can be reused seamlessly across the site.

Make user flowcharts – Chart the journey of different groups of visitors through the site. Challenge yourself as you’re designing to answer common questions, or consider how you would accomplish typical tasks that a new visitor might have within your proposed site structure and page layouts.

Read others’ takes on planning and creating good, content-heavy websites:

So, what’d we miss? Share your tips for creating killer, content-heavy websites in the comments!

Comments
  • Joshua

    This is a good article and it did point me into some places that I’d not looked at before or in a long time. However, the one thing I really wish that would have been included are sites that just aren’t news related. There are so many other types of sites out there that have large amounts of content and it would have been nice to have seen some of those thrown into the mix.

    • Jason Amunwa

      Thanks Joshua! Yes, many of these examples are news-related, simply by virtue of the fact that news outlets put out the biggest volume of content – that’s not to say the techniques they use don’t apply to other content-heavy sites, though. AIGA, Blik and The Black Harbor are all great, non-news examples.

  • James

    You should also consider http://www.dwutygodnik.com

    • chau

      James-Thanks for the suggestion. Loving the clean, simple design and use of white space.

  • jal

    you have the most awesome template on your blog, where do you get it, i want it to

  • I like Verge’s design. Beautiful Collection thanks

  • Andy

    Great list. Thanks!

  • “The Verge” is my favorite. Thanks for adding it to the list.

    • Samesies! =) Yeah, I really love how they’ve committed to innovating the presentation of the content – it must take a ton of work to format it, but it keeps my interest and really tells a story. I feel the same way about Polygon.com, too.

  • Thank you so much for this! Great help. From your list here WIRED is my favorite. its really great!

  • Michael

    White space needs to be minimized. Graphics too. Content is king. I want to scan multiple headlines without scrolling. White space is for dummies.