Sun, Fun, and Learning All Courses for Only $9.99

Mar 20, 2013

20 Web Design Examples of Blog Front-end Structures

20 Web Design Examples of Blog Front-end Structures

For our weekly website selection, today we bring you a collection related to blogging: below are the best and most suggestive websites created for blogging or generating chronologically-ordered content. Though the important thing in blogging is the content itself, as a blog centered on web design and user interface, today we’re going to focus on the structures for presenting that content with the aim of offering inspiring ideas for remodelling or creating a blog in the future.

Presenting the blog items: first interface

There are many different ways to present information on a website designed for generating content: in some cases they are aimed at sharing content from other blogs, videos, images or other multimedia elements according to the communication needs. From the classic vertical list posts of chronological entries, to the most innovative pinboard interfaces that are so fashionable lately, since the rise of Pinterest...and of course running through grid displayed presentation with infinite scroll or horizontal scroll cards.

Classic list posts | Horizontal scroll | Grid system | Pin board blogs


Entries are viewed on a grid of rows and columns. They can be ordered chronologically or otherwise. Often the entries open by displacing the surrounding cells to leave space to show the content of the selected item.

Pin boards

It looks like an announcement or bulletin board where posts are pinned in chronological order. It’s similar to a grid distribution but in this case one of the dimensions, usually the rows, has no predefined size and is flexible. The elements build up in the spaces... The social network Pinterest is the main example of this presentation structure.

Classic list posts

The positioning of blog entries is linear and chronological, from most recent to oldest. Scrolling is vertical. It’s even common to see the entries already displayed, though there is usually a link to see the entries on another page. In lists the scroll at the end of the page may not be infinite, using the pagination of the list of entries.

Horizontal Scroll