DESIGN TIMELINE: 2012: Overview (with UX recommendation)


Blog posts and featured content.


Common practice for headlines:

  • Headlines should be significantly larger in relation to copy.
  • Headings should be bolder than copy for clarity of reading.

  • Post headings should link to full article or relevant URL.

  • Headings should integrate key words for SEO (when appropriate)

  • Headings need to be in appropriate proximity of copy and not be separated by images. (This can cause confusion as to which content the given headline applies to (especially when information is stacked one on another). )

  • Content and headline need to be purposeful and elude to what the particular article might be about in as few words as possible.

Blog article summaries

  • Live beneath the headline 

Content and Primary Article

Each article should include the following:

  • Header
  • Article Author
  • Category
  • Copy
  • Comment information
  • Social Icons (as appropriate)
  • keywords
  • images/Video (as appropriate)
  • The footer of Each "Primary Article" contains suggestions for other stories from other articles. (MAX 3)
  • The right side column contains suggestions for other posts from the same category as the primary story. (MAX 5)   

Floating images and article summaries

  • Images should sell the story.

  • Images need to have appropriate alt text with keywords.

  • Images can reside to the left of, or above, heading and article summary.

  • Images should never live between heading and summary copy.

  • A common practice, as we mentioned earlier, is to wrap content around a primary image. it is important to always allow padding between image and copy.

  • When using images thumbnails for summary post - It is common to square the dimension with a clear focal point and appropriate padding.

  • Thumbnails are a “set” size so as not to force the UI to adapt to the image based on it’s orientation. This can be achieved through either cropping or by scaling the given image.

  • When cropping images, find an appropriate focus within the image to center the crop around.

  • Make sure image crops agrees with dimensional requirements.

  • When scaling an image, Set a specific dimension for the thumbnail. Neither the width nor the height of the new image may exceed the specified dimensions. 

Grid and list views

Grid View

Article summaries should be presented in one of two ways. Image to the left side, Image above the content. Both designs will be used and display will be based on article type, position, and purpose of article.

Article landing pages show additional stories unrelated to the current "Category" beneath the primary article as illustrated in the wire frame. Stories related to the current "Category" appear to the left of the article.  


Diagram 1 Sample of content living to the left of the image


When creating a click through with a blog image  - We may elect to use a colored border around the thumb image on hover state. This can also  further draw attention to the article by showing a way the user may access more information. [Diagram 1]

Scrolling page feature

(NOTE: Important that we show play controls and which article you are looking at from the possible options: EX (1 of 7 - Another way of displaying this would be to show 1-3 of 25. This allows the user to know they are looking at the first three of up to 25 items. Allows user to know where they are in the matrix.)

Business requirements for Slide show option:

Business requirements stipulate we consider a slide show option. Location of potential slideshow is in header or as a feature. Slideshow options will allows us to showcase:

  • top posts
  • new features
  • trending content

All article features need to appear in appropriate "zones" or "categories".

Sample: Diagram shows example of stacked content with scrolling option:

Social Icons

There are two places where we display social icons. .

  • The first is a selection that applies to the blog as a whole and is about favoring, or following the blog as a point of interest.
  • The secondary pertains to specific content within said blog. (Explanation is vetted below in a little more detail) 

UTILITY NAVIGATION OR TOP TIER: RSS, FB Like, Twitter Follow, Google+1 Over arching social icons apply to entire blog not to specific content. ARTICLE SUMMARY: Below is a list of social icons that should be seen for each article.

Social Icon Sample

PLEASE NOTE: sample diagram is simply meant to illustrate possible design. It is missing key social networks as discussed by the business.

Category Page

The diagram below shows wire frame blocking layout for The category page (with single item post hover state). Posts viewed in grid mode.

Category design page

BLOG Template & functional
key elements

Blog Wire frame

Search placement

User research indicates search bar will live in the upper right hand side as part of, either the header, utility navigation, or in the top section of the recommended article section.

Subscription module

Subscription should be located in the top right hand column so it is easily discover-able. It is recommended that if we know that the user has subscribed to the blog that we don’t perpetuate that content in the top of the right hand column but rather show a short phrase indicating that we are aware that the user has subscribed and we then can elevate the content below in the column so that it might rise up above the fold.

Tags, archive, trends - modular content.  

Tag clouds allow users to search by Keywords in a section  We can also show trending articles in line with this content. This can be created visually through font/style/orientation - or - by organizing keywords through top to bottom positioning.

archived content

Archived content allows user to view older articles by month or by year.

View More 

View more is recommended as a means of limiting story content from driving other relevant pieces beyond the reach of the user.

If users want to view more about a given article we allow them to click through and drive deeper into a given article. The view more can also be a means of initiating infinity scroll in the primary post section.  Should the user reach the base and wish to see more, the user can then engage the view more button and the page loads the next set of results inline. This prevents all results from loading initially and causing slow initial load time due to excessive content. 

NAVIGATION: The ask is for the primary navigation to scroll until it hits the top of the page and then lock - We are calling this  -sticky Nav -
the content will continue to scroll and run beneath the navigation so to always allow the user access to primary navigation regardless of current location.

TEMPLATES: The design of the blog should fall into three simple sections.

  1. Primary
    • Home page
    • Category page
  2. Search
    • Keywords
    • Search results
  3. Article
    • Articles

Additional notes:

THUMB IMAGES: The best design for thumb images would be one that is cropped to a square pattern so as to be consistent in appearance and not allow for the image orientation to change the format or move UI elements.

FULL IMAGE in articles where the full image is displayed the orientation will not break the scan ability of a given page and therefore the image can be displayed as orientation may dictate.

IMAGES/VIDEO OVER ARCHING: No content or “frame” should ever overlay any image or video, as this may prevent a user from interacting with said image or access controls within an embedded video.

SOCIAL ICONS Social icons, as listed above, relate to the blog as a whole and, in addition, to the content of a given page. KEYWORDS keywords can sit on top of the border, but not over the images or videos that they refer to.