Examples of Excellent Blog Post Formatting and Styling
While front pages are usually the part of blogs that get showcased, blog design includes a lot of other details that can add to the overall look and appearance of the blog, not to mention usability. The pages of individual blog posts provide opportunities for design and styling in a number of different areas.
In this post, we’ll look at a few aspects of blog posts and showcase some design elements that are used to make the post more helpful, inviting, or attractive.
Intro Areas
At the start of posts, some blogs include additional elements or design techniques to improve the post in one way or another.
ANidea
ANidea’s appraoch is pretty unique. Each post has a lead image that appears above the right sidebar, and just below that is a list of related posts.
Blogfullbliss uses a lead image at the top right of each post.
Ecoki uses a thumbnail just to the left of the post title, followed by the author name, date of publication, and categories.
Tutorial9
Tutorial9 posts start with a lead graphic and links for social media voting/sharing.
Above each post on Web Design Ledger is a lead image. Between the image and the post title is a comment count, date of publication and category link.
New visitors to the Art of Nonconformity will be greeted with a brief intro to the site that includes links to get more information about the site or to subscribe.
Above posts on the Creative Tempest is a large lead image.
Design Reviver
Design Reviver also includes a large lead image above the post title.
Sub-Headers:
Readability is obviously important to any blog in order to build an audience and encourage repeat visits. One of the best ways to improve readability in posts is to make use of sub-headers, and to have them styled effectively.
ANidea
ANidea uses all uppercase letters on its sub-headers to make them stand out and break up the rest of the text.
Viget Inspire also uses uppercase styling, and if you click through to this post you will see that their use of sub-headers and bold text helps to make the post scannable.
Reality Equation has a colorful theme, and the purple sub-headers fit well with the approach of the design and they look nice.
CSS Globe doesn’t use different colors for sub-headers, but changing the font family and the size of text makes it an effective approach.
UX Booth uses different colors for h3 and h4 tags, which helps to visualize the flow or outline of the post.
End of Post Area/Promotion:
At the end of posts and before the comments, many blogs are including things like buttons and links for social media voting, and calls to action that will encourage readers to subscribe.
Web Designer Wall
Web Designer Wall includes some hand-drawn design elements in this area to go along with links to popular social media sites and a link to the previous post.
Webdesigner Depot includes an area for promoting submissions and votes at a number of social media sites, plus an icon and link to the feed.
Ecoki provides links to a few related posts and some icons with links to subscribe, share on Twitter and email to a friend.
GoMediaZine
GoMediaZine has a dark, textured area with social media icons and links, as well as related posts and subscription options.
We Are not Freelancers
We Are not Freelancers continues the hand-drawn approach to its design by using a hand-drawn heart, “Promote Me” text, and an RSS icon.
Colorburned
Colorburned includes an area for social media promotion, followed by a list of related posts with thumbnails for each post.
Well Mediacated has an area for encouraging social media votes and an “about the author” section.
Blog.SpoonGraphics uses the doodle icons for social media (these icons were created and distributed by Chris Spooner).
AppStorm
AppStorm uses a box that contains two simple lists for related posts and popular posts.
Foodess uses a list of similar recipes, and a few small links for social media.
UX Booth uses an attractive area with encouragement for social media votes.
About the Author Section:
Including author information on posts is also very common, especially on multi-author blogs. We’ll see a few different approaches to this here.
Viget Extend show the author name and photo at the top of the post, rather than showing a brief bio at the end of the post as is more common.
Line25 includes a brief author bio with a photo at the end of posts.
Tutorial9
At the end of posts on Tutorial9 there is an “about the author” section with a brief bio, photo and a link to the author’s site. The bio also includes a subtle background image that helps to make it an attractive area of the post.
PSDTUTS includes the author area after a brief post intro at the top of articles.
For more design inspiration see:
