Best Practices: Designing a Content Hub презентация

taking into consideration marketing goals, brand positioning, and the competitive landscape.

Our guides aim to educate marketers on trends, opportunities, and content strategies that best-in-class brands are utilizing to engage their audiences. In this guide, we’ll take a look at the best practices for designing a content hub, covering both stylistic choices and user experience.

Interested in learning more? We’d love to hear from you! Feel free to reach out at strategy@newscred.com.

- Dan Rudy, Strategy Team Designer, NewsCred

#THINKCONTENT

your customers and connecting them with information, ideas, images, and stories. Once you have this content to pass along, you need a place to house it all. Somewhere that is capable of handling a constant feed of new content, from a variety of sources, covering a variety of topics, while still looking aesthetically pleasing and functioning so well that a customer will want to spend hours browsing what it has to offer.

This isn’t an easy task, but one that will be simplified and attainable after reading this guide. The guide is split into four sections, two dealing with your main hub page and two dealing with your specific article page. For both page types the guide is split into a form and function section. Form being your most basic layout, the pieces you need for the page and how to handle them stylistically. Function guides you through how a user will experience each page and the added elements to help improve this experience.

Each suggestion is analyzed on its own page and is accompanied by a screenshot of a site that demonstrates the topic. If you want to explore the entirety of the site, you can click the magnifying glass in the upper left corner of the screenshot to launch the full site on your browser.

#THINKCONTENT

Click this icon on the following pages to visit our favorite content hub examples.

Article Page

appear on the site.
Do you want your content hub to be associated with your company, or exist as a unique source of content?
If your content hub is to be associated with your company start your design with your brand’s guidelines. Follow through the rest of the design process keeping in mind your brands colors, fonts, and main site’s styling.
If your content hub is a stand-alone site then move forward with a unique brand and design system.

#THINKCONTENT

can be used throughout your site.
Pick a primary color that will be used most often, and multiple accent colors that complement it.
Many sites provide color themes or can help determine what accent colors will look best with your primary choice.
https://color.adobe.com/create/color-wheel/
For a cleaner look, choose tints/ shades of your primary color as your accents.
Color will play an important role in the design of your hub as it will help to accomplish a number of things without making your hub too busy.
Break up the monotony of a page
Add type hierarchy
Organize (color-code) different article types

#THINKCONTENT

your site.
Choose a heading font + a body font
These can be different weights of the same face
bold/ medium/ italic
Can also be different treatments
colored/ all caps
Keep sizes consistent between uses
All headings remain the same size
All body text remains the same size
No more than two fonts on your site
Develop typographic hierarchy using size + weight + color
Most important information (sections, titles, etc.)
largest/ boldest/ most intense color/ caps
Less important information (dates, sources, etc.)
small/ light/ dull color/ lowercase

#THINKCONTENT

and kind of information presented on a content hub.
Determine your overall page width and divide it into columns.
Let this underlying grid help to organize your page but not limit you with a boring and repetitive design.
Let images/ articles span across multiple columns. This allows certain pieces of content to stand out and also breaks up the repetition.
Basing your page off of a grid will allow the user to navigate through pages and page types ( hub > article ) while keeping a consistent feel and not having items jump around the page.
While developing your grid it is important to consider responsive design. You want to determine at which point your site structure will change for smaller displays and mobile. These break points will shift your grid system from a more complex layout to eventually a single column for a better mobile experience.

determined by the articles/ article imagery. Because these will be ever-changing, the background of the hub is a smart area to customize and add in branding.
Colors
Use a lighter color to avoid pulling your users’ eyes to the space between articles and to the margins of the page.
Use a tint of your primary color to connect your header/ footer to the body of the page.
Textures
Subtle texture can be nice to break up solid blocks of color and images.
Pattern
With the proper padding, a repeating pattern can make a visually interesting background.

#THINKCONTENT

determined by the kind of content, the audience, and the purpose of the site. As a general rule you will want to present the user with the newest/ most successful content that you provide as well as allowing them to browse past articles and determine which would be of interest to them based on topics, authors, length, etc. The layout is a balance of presenting the user with the content they want without overwhelming them with content they don’t. This can be accomplished in a number of ways while still keeping the site aesthetically pleasing.

#THINKCONTENT

continued…

is a great solution for presenting your audience with your top choices and starting your hub with dramatic imagery.
Choose your top three articles and place their images in a carousel at the top of the page. Make these images 100% width of the page or at least take up multiple columns in your grid so they will stand apart from the rest of the site.
Update these often and users will be immediately presented with your latest/ greatest when visiting your site.
To take up less real estate on your site, you could also do a carousel of article titles that remains at the top of every page on your site. This has less of a dramatic impact but still lets your top articles stand out.

continued…

the rest of your site should be based around showing other relevant content and letting the user navigate through it to find what interests them. There are a number of ways of accomplishing this in your design.
Topic Columns
If you have few topics try breaking apart your grid into a column per topic so that all similar articles will be grouped together.
Random Columns + Cards
For a site with too many topics to break down into individual columns, organize your grid so that all of the columns fill in with “cards” representing each article. These “cards” will provide the user with the information they need about each article.

#THINKCONTENT

continued…

that is relevant to the article that the card represents. Choose dramatic imagery that is of a quality that doesn’t get pixelated at the dimensions of the card. Even simple images can be made dramatic with interesting crops.
Try using an animation to catch a user’s attention when applicable.
Information
The article information can be presented directly on top of the image (if the image is edited to be dark enough that white text is legible), on top of the image as a roll-over (it darkens the image and appears as the user interacts), on top of the image in a colored box, or in an area below the image for definite legibility with an unaltered photo.

continued…

give on each card about the article depends on your site’s purpose.
Title, author, source, kind (text, video, infographic, etc.), date, topic, length, shares, reads, etc. are all valuable information that can help a user determine if they are interested in that piece of content.
Article Groupings
You can use a column or two of your grid to break apart the flow of your most recent cards with some special groupings. Here you can put in an area a select number of cards that stand apart from your general archived content.
Popular, trending (read, shared, commented), exclusives, recommended, top, etc.

#THINKCONTENT

continued…

don’t have space for multiple groupings, try using one designated area for them with tabs for the various options.
Ads
Along with the content you want to provide, you may need to find places to fit ads. When sticking to a grid, these ads have potential to get lost among your non-sponsored content or at least look nice alongside it.

Article Page

see what you have to offer upfront on your main page. The first interaction that you will need to design into your page is a way to navigate between your main page, topic pages, different articles, etc. This is important for a user who is only interested in certain topics that your hub has to offer. By grouping all similar topics onto one page, it will allow them to more easily find the content that interests them. There are a number of options on how to handle your hub’s navigation.
The most basic method is a standard navigation bar. This bar will fit at the top of your page above your column structure and have a button for each separate topic that you offer on your hub, allowing your user to navigate between pages.

#THINKCONTENT

continued…

is a small button that will reveal all of your navigation options when clicked on. This is not recommended for a content hub, as most users will want to see their topic options and quickly click through. Although it is a nice way to keep your site clean, it requires more work of the user.
For a more simple hub with less topics, you can even have a forward / back button on either side of the page labeled with the topics they will lead to and allow the user to scroll through entire pages of specific topics.

HAMBURGER MENU

of your site will scroll. Generally with a content hub you will have much more information than will fit on one page, and you need to design a solution of how to deal with the overflow.
A “Load More Articles” button is a great solution. As the user reaches the bottom of the page they will be given the option to load an additional set of cards. This way the list of content provided is never-ending and the user will be able to continue into past cards without navigating away from the main page.
Defined page lengths are another solution to handling this overflow. With this solution, at the bottom of the page the user will be presented with a button to return to older articles. Your user will browse your article catalogue a page at a time.
In both cases be sure to include a “return to top of page” button so that no matter how far back in your archives your user gets, they will quickly be able to return to current content.

#THINKCONTENT

a time when the user navigates further down the page than where you initially designed some of your key features to be (and with the case of an infinite scroll, much further). A solution to this is to have certain elements of your page be “sticky,” as in they will remain at a set spot in the browser as the user scrolls beyond their initial position. This allows the user to easily access certain features without back-tracking through the page.
There are a variety of elements that you may want to consider making sticky to give your user a better experience.
Navigation, ads, sharing, trending topics, featured articles, CTAs, search boxes, etc.

#THINKCONTENT

chance to learn more information before navigating to an article page. By allowing a user to read about an individual card, you are providing them with a more upfront and detailed description of an article that they may be interested in without cluttering the main hub.
Any detailed information from the “content – article information” section that you may have left out can be presented as a rollover for each card.
For larger cards, use a rollover to preview the text of the article itself. Having the opportunity to read the introduction to an article can help a user determine if it’s something they’re interested in reading without having to enter the article page.
For a hub that is very visual or for an area of your hub that is image-heavy, you can even have the article name appear on rollover, leaving the hub a clean collection of images.

#THINKCONTENT

content hub’s main page in order to help the user organize the content presented. This is important in helping the user find the content that interests them without having to sort through everything that doesn’t.
Filters
Add in a filtering option for topic, length, date, etc.
Search
Sort
Let the article cards feed in by certain attributes first (latest, popular, featured, etc.)
System
A visual system is a great way of organizing cards for the user without them having to take any actions.
A great example of a system is color coding. Give each topic a color and use this color on the card placing it visually with others that are similar.

#THINKCONTENT

COLOR CODING

your navigation, be sure to have different CTAs to keep your user up-to-date with what your hub has to offer and to keep them connected to your company on social media, etc. Sample CTAs include:
Subscribe to our newsletter
Follow us on social media
Recommended or trending articles
Search nav bar
Download app

#THINKCONTENT

solely for entertainment purposes or even to give your user a different look at what your company is doing.
“Sites we like” is a nice way of steering your users to other hubs or sites that complement your own, as well as promote general good will.
Different social feeds can give your users an insight into other areas of your company beyond the hub, and also promotes them following you on these networks. An ever-changing feed box in your grid can break up the cards and add an interesting element.
A poll is a fun way of gathering data and allowing users to interact with the hub / other users.
A “Top Contributors” section is a great way of connecting the user to the author whose work they are reading. It can also be a nice way of letting a user find other articles written by the same contributor.

#THINKCONTENT

Article Page

the branding used for your main content hub, be it a unique brand or that of your company.
For your article page, you may want to scale back the amount of unnecessary branding / decorative elements. While your hub needs to make a first impression, your article page needs to let the user read the article with ease. Decorative elements will draw the eye away from the content the user is trying to focus on.

#THINKCONTENT

be thoughtfully incorporated to your article page. As a general rule, colored text is more difficult to read but can still be used to create hierarchy.
Try using colors to separate sections of an article or to draw attention to specific text such as a heading, name, link, etc.

#THINKCONTENT

page in that you are now working with a large body of text rather than individual lines of information. The main challenge here will be type size and line length.
First, determine the number of columns from your initial grid that will have your body copy placed into it. This will affect the rest of your article layout.
Type size should be selected to balance legibility and the amount of scrolling the user will need to do. As a general rule, size for a screen should be slightly larger than what you would use for print work. Somewhere in the range of 12pt – 16pt. This will be further determined by your line length.
Line length will also play a large factor in font size and the overall legibility of an article. Each line should have between 45 and 70 characters in it. This helps a user keep their focus while not interrupting their flow with too many line breaks.

#THINKCONTENT

your article page. This will be important so that the transition between the two isn’t jarring as everything on the page shifts around. If you have extra content elements on your hub page that you wish to carry over onto the article page, try to keep them in the same column and at the same height so the user will know where to locate them without having to hunt. You can also use your grid structure to accentuate pull quotes or to keep a system in place as you insert images into the article.

Your article page grid will need to have the same responsive break points as your hub so that a mobile user will be able to read the article copy comfortably. With the article page, the responsive design will help to keep an appropriate line length so that a mobile user won’t need to zoom to be able to read. The way that the article images shift into the single column will also need to be considered so that the body text isn’t split up too much hindering the flow of the text.

can be a good spot to add in some style. Consider bringing whatever background used on your front page on your article page. Just keep in mind that anything other than a light color you will want to have a white box with ample padding to house your article text.
Reading an article on top of a pattern or texture will be uncomfortable for the user and distracting from the content itself.

#THINKCONTENT

the article on your article page. This content will help provide users with information about the article that they are reading with the hope that it will aid them in finding more content that interests them.
Article and basic article information
The bare minimum for the article page will be the copy of the article itself along with its basic information (author, source, date, etc.).
List the topics that the article covers as links so that the user can explore similar content directly from the article.
Break down the topic list even further by showing the user a list of other articles trending in the same topics.
Be sure to include a button to return to the top of the page from the bottom so that when the user is done reading they can still easily access the recommended articles/ view the topics discussed.

#THINKCONTENT

Article Page

to guide users to articles that may interest them and to present them with your newest content. On the article page you are given the benefit of knowing a piece of content that interests them (the article itself). From here you want the design to lead the user on to another similar article while still giving them the opportunity to explore other topics.
Keep your main navigation bar/ button consistent between your hub and your article page so that the user has the same options that they have already explored once on the article page.
Use a button to either side of the page that will take you to the previous/ next article in the series. Be sure to label the article either at the button or with a rollover so the user knows what the content is before they commit to it.
At the end of the article prompt the user to continue reading other articles. Show them the previous/ next articles in the series and/ or your hubs current recommendations.

#THINKCONTENT

the user to access new information and explore the variety of content that the hub is offering. On the article page scrolling is how a user will continue to interact with the same piece of content that they are currently reading. Because of this different purpose scrolling needs to be thought of differently on the article page.
On the article page, an infinite scroll allows the reader to navigate the article with little effort. With a longer article the user will be able to focus on reading while scrolling up and down on the mouse / keyboard. Split into individual pages, a longer article would need to be accessed by a series of buttons, disrupting the users flow.
Infinite scroll can be used on an article page in a number of ways:
A scroll from beginning to end of the individual article
A scroll that includes the current article and continues to scroll on to the next
A scroll through multiple articles in one series/ topic

#THINKCONTENT

page than on the hub itself. On the article page your user can literally be in the middle of reading a sentence and want to reference something concerning the article. By adding sticky features to your article page, you can keep relevant information easily accessible without interrupting their experience with needless scrolling.
All navigation elements should be sticky so that at any point the user can access all other areas of the hub.
Keep the sharing elements sticky. If a person finishes reading an article and enjoys it, you want them to be able to share it and continue on to the next article – not have to scroll back through to find where to share.
The article information should remain sticky so as a user is judging how they feel about an article (like it, don’t like it, want more info, etc.) they know the author, source, topics, dates, etc. and are able to make their next article decision based off of this information.

#THINKCONTENT

and similar page interactions. This is because the information can remain hidden, and not distract from the article, until the user chooses to interact and learn more.
Other recommended articles can have only a small amount of information provided about them on the article page. When the user decides to move on to another article, they can use rollovers to reveal more information and explore their options.
Links in the article copy can provide the user with a chance to learn more about a topic, make a purchase, etc.

#THINKCONTENT

the copy of the article to the user, it is still important to consider their ease in finding similar content. As they read the article, certain topics may spark their interest, and it is important that they are able to access other content around these topics without much effort.
Consider making one of your “suggested article” groupings have multiple tabs so the user can explore a variety without taking up too much real estate.
Keep your search box on the article page so the user can access all of the content you have on a topic right from the article itself.
Try tagging your articles with specific sub-topics. Show these tags at the bottom of the article body so that the user can easily continue to another article that interests them. These sub-topics can be more specific than your navigation and presenting them at the bottom of an article gives the user an opportunity to continue exploring a subject that they were just reading about.

#THINKCONTENT

is presenting users with many options for their next click, either diving in to an article or narrowing down their options to something that interests them more. On the article page, they have now made a decision and you want their next one to come easily. Set up the design of the article page to have no dead ends. At the end of the article you want to present the user with a number of options.
Recommended articles to read next
Similar topic, featured, more from author / source
Option to subscribe
Social share buttons
Ability to favorite the article
Commenting capability
Click to tweet an article quote
Follow the author on social
Video on topic

#THINKCONTENT

minimum, aside from options that will improve the user’s experience (article info, CTAs, recommended articles, etc.). Too many elements floating around the page will detract from the article itself.

#THINKCONTENT

be an overwhelming task. There is a large amount of ever-changing information that needs to be easily sorted, browsed, and archived – yet look inviting and function smoothly so that a user can potentially spend hours reading the content on the site.

Thankfully, there are plenty of examples of sites that not only handle and organize the content well, but look and function great while doing it. Despite these sites all offering different content and serving different purposes to their users, they all follow general, technical design principles which allow them to be so successful.

Understanding these ideas and breaking them down into what elements work best for the type of user experience you’re looking for is an easy way to create your own powerful, branded hub.

#THINKCONTENT

growth engine.
From ongoing support and program management, to customized strategy sessions and workshops, we’ll set your brand up for success.

#THINKCONTENT

Want to learn more?

Strategy@NewsCred.com

demo today!
NewsCred.com • Sales@NewsCred.com • +1 (212) 989 4100 • @newscred

#THINKCONTENT