10 Samples of How Blogs Display Their Posts

When it comes to designing a blog, one of the main elements of the design is how the posts are going to be displayed on the front page. Here you see some trends and samples of how other blogs are displaying their posts.

There is no perfect recipe for designing the way a blog will be displayed, it vary mostly depending on the content of the blog, the style of it’s design, the amount of posts made and much more. The most important thing is to first select all elements that you want to display and place them the way it will play out the best on your design.

Trends

There are a few clear trends on the design of the display of the posts, here are some of them.

Different color title
A lot of blogs are using a different color on the text of the title of each post, that way it draws the attention of the viewer to the title and it’s also easier for the user to distinguish when a new post is starting to show.

Retweet button
With the popularity of twitter a lot of blogs are starting to place a retweet button on their post display to allow the viewer to tweet about the post before even seeing the whole thing.

Comment Icon
Having a lot of comments is a way to show the success of a post in some cases and a lot of blogs are finding a better way to display the comment count of each post and that’s when the comment icons get in place and give that extra touch on the look of each post display.

Showcase

1 – Six Revisions

Post display from sixrevisions.com

sixrevisions

SixRevisions plays it very simple and a little unusual by the fact that they don’t always display their post the same way. The post thumbnail varies in many sizes, the post description can come before or after the thumb, and sometimes the post only contain a thumb and no description. All the posts follow the same base which is the title on top on a bigger font followed by information line that contains the date, name of the author and number of comments. Every post also ends with a continue reading bottom.

By having a couple different ways to display the post within a post base can make a little more confusing for the viewers but at the same time it will won’t give that static look that a blog can get from having all it’s content organized the same.

SixRevisions display 7 posts on the front page.

2 – Psd Tuts

Post display from psdtuts.com

psdtuts

PsdTuts has a set way to display all the posts which makes it easy for the viewers to recognize each one of them. The posts start with a 200px square thumb on the left site and all the info on the right, starting with the title and an icon with the number of comments followed by the information line highlighted in red with the date, category, and author. The post description is in italic and have a continue reading underlined text link in red at the end of each post.

By having this post base PsdTuts shows a very organized content and it’s able to display a lot of posts in a small space because of the fact that they split the post space in 2 with a thumb in one side and text on the other.

PsdTuts displays 10 posts on the front page.

3 – Smashing Magazine

Post display from smashingmagazine.com

smashingmag

Smashing Magazine always display very rich content and that reflects a lot on the way it’s displayed on the front page. The posts begin with a green color typo title followed by the information line that begins with a small clock icon, continues with the name of the author, date, category, and number of comments.

A new item was recently introduced to their post display which is the Retweet button that allows the user to instantly retweet about that post, along with a long post description with a thumb in between with a read more underlined text link at the end.

The fact that they put so much text information on the front page shows that the posts were well developed and helps engage the reader with all the info about the post.

Smashing Magazine display 8 posts on the front page.

4 – Naldz Graphics

Post display from naldzgraphics.net

nadzgraphics

Naldz Graphics has a cool unique way to display their posts. It starts with the title and has a icon for the number of comments followed by the post description that has a small thumb on the right side which is not very common. Under the post description there is a read more and a retweet button and at the bottom of the post the information line is shown with the name of the author, category and date.

Having the information line at the bottom of the post display can be confusing as you scroll down the page gets harder to notice if that info is for the post above of bellow.

Naldz Graphics displays 9 posts on the front page

5 – Pro Blog Design

Post display from problogdesign.com

problogdesign

Pro Blog Design starts the posts with a big and unusual typeface for the title that highlights as you roll over, also a green highlighted information line with the number of comments, date, and name of the author. Along with a full width thumb followed by the post description and and a click to read button at the end.

Using a unusual font for the title can get a lot of attention but if the typeface doesn’t look or fit good the attention can be turned the wrong way.

Pro Blog Design displays 7 posts on the front page

6 – Spoon Graphics

Post display from blog.spoongraphics.co.uk

spoongraphics

Spoon Graphics has a very cute way to diplay its posts. It all fits the design and theme of the blog and the posts are displaied very simply with the title, thumb, description and the information line at the end that only contains the category, number of comments and a read more link.

Having a simple post display makes it very clear for the viewer to access any of the posts and also allows it do display a good amount of in a small space which in this case gives spoongraphics the looks and feel of a small blog.

Spoon Graphics displays 6 posts on the front page

7 – Well Medicated

Post display from wellmedicated.com

wellmedicated

Well Medicated plays it very different from other blogs. It has a thumb on the left side with the category info under it and some cool options that include delicious, stumble, designfloat, facebook and twitter. On the right side of the post display is the tittle with the name of the author on the top right under the title which is very unusual to see. Also a good description with a continue reading text link at the end.

The way the post is presented is very clear and it has some unusual features that most blogs don’t have.

Well Medicated displays 6 posts on the front page.

8 – Freelance Switch

Post display from freelanceswitch.com

freelanceswitch

Freelance Switch is show a lot of personality on the way their posts are displayed, with the use of big typography and not a set size for thumbs each post has it’s on charm. Starting with a big title along with a big icon for the number of comments, a highlighed area to display the information of the post; name of the author, category, and date and followed most of the time by a thumbnail without a set size with a lot of information on the description of the post and continue reading highlighted text link on the right bottom of the post display.

The use of big elements on the beginning of the post makes it easy to distinguish when a new post is beginning and also concentrates the attention of the viewer on the title of each post.

Freelance Switch displays 12 posts on the front page.

9 – Design Finds Me

Post display from designfinds.me

designfindsme

Design Finds Me has a post display that already gives a taste of what’s coming. Each post starts with the date and title followed by the information line that contains; date and number of comments. It also comes along with a short description and one of the images from the post instead of a thumb and a view more underlined text link at the end.

The fact that it already shows an image as a thumb is great for a inspiration website that has images as its main content.

Design Finds Me displays 10 posts on the front page

10 – Design Shard

Post display from designshard.com

designshard

Design Shard has a compact way to display the posts where a 140px square thumb is displayed on the left side while the post title and description fit in the same amount of height on the right side followed by the information bar at the end that shows: date, category, comments, and a continue reading link.

Design Shard displays 11 posts on the front page.

When it comes to designing a blog, one of the main elements of the design is how the posts are going to be displayed. Placing every everything in the right place and using the only elements. Here you see some trends and samples of how other blogs are displaying their posts.

There is no perfect recipe for designing the way a blog will be displayed, it vary mostly depending on the content of the blog, the style of it’s design, the amount of posts made and much more. The most important thing is to first select all elements that you want to display and place them the way it will play out the best on your design.

Written By Paul0v2

Hello there! My name is Paulo Canabarro, I'm a graphic design student, blogger and freelancer. I'm a writer for abduzeedo.com and I have passion for cool and well done design. To find out more about me and my work, FOLLOW ME ON TWITTER

8 Comments

  1. Logo bliss

    October 8th, 2009 at 06:45 pm

    Great collection of post presentation, lots of inspiration!

  2. Max Stanworth

    October 12th, 2009 at 05:21 pm

    Thanks for featuring design shards layout, its interesting to see how some of the other design blogs compare, great stuff

  3. Megan Price

    May 4th, 2010 at 01:59 am

    Undoubtfully interesting blog u got here. I’d like to read a bit more about such theme. Thank you for giving this material.

    Megan Price
    Industry supplier

  4. vasant sathe

    September 23rd, 2010 at 11:23 pm

    pl, display my blog or show me how to make blog properly and display on blog. because i have creat a blog but it is not display on blog earror is their. please explain me the details

  5. frburueiw

    December 1st, 2011 at 11:51 pm

    dvudufvd

  6. frburueiw

    December 1st, 2011 at 11:52 pm

    wvduwvf efbef fjbefe fbif
    ;ff

  7. himama

    December 1st, 2011 at 11:53 pm

    fgnuycuugv
    rittcitt

  8. stupid old big H tim/maddy

    January 3rd, 2012 at 10:30 am

    i AM studid big old H and my name is tim and

What Do You Think?