Classic List, Grid displayed, infinite scroll... today we’re going to focus on the structures for presenting that content

20 Web Design Examples of Blog Front-end Structures

  • Share on Google
  • Share on Pinterest

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


Grid

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



Fotologs

Awwwards

By Awwwards Team

Awwwards – recognizing the talent and effort of the best web designers, developers and agencies in the world. We aim to create a meeting point where web professionals from across the world can come to find inspiration; a space for debate; a place to share knowledge and experience; give and receive constructive and respectful critiques. “Always hungry”.

awwwards.com

CLOSE