Check out the blog post on the importance of building your content marketing destination: http://marketinginsidergroup.com/content-marketing/content-marketing-destination/ A content hub is a valuable way of interacting with 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 on each example page to launch the full site on your browser. Check it out and less us know what you think?

1. Best Practices:
Designing a Content Hub
#THINKCONTENT

2. Welcome!
NewsCred’s Strategy Team helps brands build and hone their content strategies, 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

3. Introduction
A content hub is a valuable way of interacting with 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.

4. Contents
Content Hub
• Form
• Branding
• Colors
• Typography
• Grid System
• Background
• Content
• Function
• Navigation
• Scrolling
• Sticky Features
• Interactions
• Organization
• Calls-to-Action
• Extra Features
#THINKCONTENT
Article
• Form
• Branding
• Colors
• Typography
• Grid System
• Background
• Content
• Function
• Navigation
• Scrolling
• Sticky Features
• Interactions
• Organization
• Calls-to-Action
• Extra Features

5. Form : Content Hub Function : Content Hub
Function : Article PageForm : Article Page

6. Content Hub Branding
• Determine the amount of your company’s branding that will
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

7. Content Hub Colors
• Determine a color palette for your content hub that 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

8. Content Hub Typography
• You will need to determine a typographic system for 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

9. Content Hub Grid System
#THINKCONTENT
• A basic grid system suits the quantity of 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.

10. Content Hub Background
• Most of the visuals on your page will be 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

11. Content Hub Content
The articles themselves and how they are presented is 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…

12. Content Hub Content - Lead Articles
#THINKCONTENT
• Having a set of lead articles 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…

13. Content Hub Content - Organize
After your top articles are presented, 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…

14. Content Hub Content - Card Design
#THINKCONTENT
• Imagery
• For each card choose an image 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…

15. Content Hub Content - Information and Groupings
• Article Information
• The information that you 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…

16. Content Hub Content - Sponsored Content and Ads
#THINKCONTENT
• Article Groupings (continued)
• If you 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.

17. Form : Content Hub Function : Content Hub
Function : Article PageForm : Article Page

18. Content Hub Navigation
You now have a design for a user to 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…

19. Content Hub Navigation
#THINKCONTENT
• Another popular form of navigation is the “hamburger.” This 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

20. Content Hub Scrolling
You will also need to consider how each page 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

21. Content Hub Sticky Features
In both options for scrolling there will be 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

22. Content Hub Interactions
Interactions on your main hub give the user a 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

23. Content Hub Organization
There are multiple elements you can add to your 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

24. Content Hub Calls-to-Action
Among your content cards, your special card groupings, and 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

25. Content Hub Extra Features
Some features on your site can be used 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

26. Form : Content Hub Function : Content Hub
Function : Article PageForm : Article Page

27. Article Branding
The branding of your article page should remain consistent with 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

28. Article Colors
Similar to branding, the colors in your main hub should 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

29. Article Typography
The design of your article typography differs from your front 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

30. Article Grid System
#THINKCONTENT
Keep a consistent grid between your main hub and 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.

31. Article Background
• Similar to your hub, the background of your article page 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

32. Article Content
There should be more content than the body text of 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

33. Form : Content Hub Function : Content Hub
Function : Article PageForm : Article Page

34. Article Navigation
The main purpose of the navigation on the hub is 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

35. Article Scrolling
The scrolling on the main hub is a way for 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

36. Article Sticky Features
Sticky features are even more important on the article 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

37. Article Interactions
The article page is a great opportunity to use rollovers 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

38. Article Organization
Although the focus of the article page is to present 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

39. Article Calls-to-Action
CTAs on your article page are very important. The hub 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

40. Article Extra Features
On the article page, keep the extras to a 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

41. Designing a Content Hub Conclusion
The design of a content hub can 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

42. Our team of strategists can help your brand build a marketing 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

43. Thank you!
Ready to create amazing content? Contact NewsCred for a free demo today!
NewsCred.com • Sales@NewsCred.com • +1 (212) 989 4100 • @newscred
#THINKCONTENT