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
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:
- White space – allowing the content (and your visitors’ eyes) room to breathe
- Boxes, borders & graphical planes – Segmenting the information into visual categories
- An intuitive search method – Letting your users jump straight to the info they need
- Grids – Although not always necessary for comprehension, keeping content within a rigid, consistent structure helps reduce the effort required to process it
- Strong information hierarchy – Establishing a consistent design language using content types (blurbs, excerpts, call to actions)
- 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
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
- Whitespace – Polygon’s articles feature long-scrolling, untraditional layouts that break up the dense bodies of text into digestible chunks with huge, beautiful imagery, akin to custom-designed magazine spreads. Here, the content in each article has been intentionally laid out, instead of simply “pasted & posted” into a one-size-fits-all template.
- Strong information hierarchy – Dramatic-looking pullquotes highlight the core points of the reviews.
- Usable search – There’s an impressive realtime search bar that’s sticky at the top of the browser window, enabling quick drilldown on specific games.
THE VERGE
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
- Story collage – The homepage begins with a big, colorful jigsaw puzzle of leading stories’ headlines, providing a glimpse into the articles they link to, as well as a strong visual draw for the eye.
- Thumbnail sliders – At certain points, the pages are broken up by a useful carousel of image thumbnails, each allowing the user to drill into a specific story.
- You Need To Read This Now – By giving its top stories a bit of whitespace and accompanying them with an explicit directive, The Verge is able to focus attention on the hottest news it has to offer.
CONDE NAST
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
- Bold visual hierarchy – Beginning with the absolutely giant, beautiful content slider in the header of this site, there’s literally no way you could miss what Conde Nast believes are the most important things for you to see on this site.
- Customizable Filters – This site wisely avoids attempting to present all of the available content, and instead puts control in the user’s hands by enabling them to filter down what they see based on their specific interests.
BLIK
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
- Strong information hierarchy – You’re never in any doubt as to what the most important thing is that you should be looking at, especially while browsing the products which follow many of the best practices for an ecommerce product page.
- Grid style – With a kaleidoscope of colors, shapes, lines and patterns inherent to their wide range of products, keeping a clean, rigid grid structure helps impose a sense of orderliness upon what could be a chaotic mess of visual elements.
- Dynamic mouseovers – Blik allows the user to indicate interest in an item by providing more information in a dynamic hover state, instead of unnecessarily cluttering the resting state of the site upfront.
USA TODAY
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
- Clean, organized grid – The clean, sharp lines and rigid layout of this design maintains an orderly feel to this site, which keeps it from feeling disorganized or difficult to navigate
- User-adjustable layout – USAToday offers visitors the choice between a List or Grid view of their top stories. This allows users to control how much they take on at once – allowing them to effectively choose their preferred approach to browsing the content.
THE NEW YORKER
What is it?
The venerable publication famed for its satirical cartoons brings a stately approach to presenting its content online.
Why we like it
- Masonry – The New Yorker’s homepage echoes the trend of the cascading, tiled content block layout that keeps the user scrolling down, scanning for items of interest.
- Variety – There are a wide range of image sizes on offer in this layout, which prevents monotony setting in while browsing through.
- Minimalism – The overall aesthetic here is clean, structured, and minimalist that lets the content speak, while using the New Yorker’s signature font throughout.
AIGA
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
- Grid style – The grid size of each article is proportional to the amount of information it contains, giving visitors an instant visual representation of importance – and time commitment.
- Consistency – Despite covering a profusion of different design styles, typography and color schemes in its imagery, the actual site retains a solid consistency in terms of how it displays captions, headlines, article content, etc.
- Strong information hierarchy – Each article offers the same Title/Subtitle/Excerpt structure. Articles of special importance remain fully saturated, instead of the secondary posts, which are more muted, and only come to life on hover.
- Buttons – Non-rectangular buttons punctuate this layout, noticeable by virtue of their shape. These calls-to-action are nicely styled and stand out just enough to catch attention.
A LIST APART
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
- Clean & simple typography – ALA’s design is well-known in the Web design community for microscopic attention to detail when it comes to the typography on the site. Each line, heading and pull quote is fastidiously and consciously adjusted for perfect readability.
- Disciplined editing – Despite the length of ALA’s articles, you’ll notice that there aren’t any overly-long sections of content. Each post has been carefully broken up into easily-digested paragraphs of 2-3 sentences each.
THE BLACK HARBOR
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
- Rigid grid – Each article is represented on the homepage by a moderately-sized photo, all presented in a clean grid layout, to prevent visual confusion, given the variety of colors, styles and subject matter to be accommodated.
- Content reveal – Simply displaying the descriptions and captions of each picture underneath them adds content bloat – instead, The Black Harbor only reveals this information as an overlay when the user indicates interest by hovering over an image. In addition, when users hit the bottom of the homepage, they’re given the opportunity to reveal more content.
EBONY
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
- Giant imagery – Much like Polygon’s fine example, Ebony uses striking and large images to not only set the tone, but also give users strong implications as to the most important articles on their homepage. Their homepage slider alone takes up the vast majority of the screen on laptop resolutions and below.
- Bold typographic hierarchy – Ebony’s signature headline font, Didoni, serves to call out the major articles on the site at the present moment, with secondary stories headlined in “Trade Gothic”.
WIRED
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
- Readability – Clear sans-serif type, and comfortable column widths keep things simple and easy to read.
- Consistent typography – All headlines, quotes and other text content elements are cohesive across the sprawl of this site.
BOSTON GLOBE
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
- Whitespace – Being a newspaper, by far the most important content is the text, meaning that careful attention has been paid to ensuring a pleasurable reading experience
- Visual hierarchy – Articles with an image are more attractive – and therefore more important – than those without. This rule is further emphasized by the size of the accompanying image, with the leading story having significantly more space devoted to it.
- Hidden content – The leading stories in each news category are smartly hidden in the mega-menu, which is revealed on hover
CO.DESIGN
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
- Giant imagery – Each article is accompanied by a truly massive header image that lets the reader know in no uncertain terms just what they’re about to read.
- Intro sliders – Many of Co.Design’s articles open with an image slider containing key images from the body of the article. They serve as an excellent visual intro for the text that is to follow, and get the reader primed for the overall tone of the article.
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
- Whitespace – The whole layout of this site feels crisp, fresh and open. Type is laid out for maximum impact, instead of content density.
- Overlays & reveals – The index of this online magazine is very nicely done, with thumbnail activating a huge, stylish pull-quote and link to the article upon rollover. Approaching the reveal in this way also allows the reader to continually return to the central theme of the issue.
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.[left-sidebar]
0 Comments: