20個部落格前端的設計範例

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.

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.

20-web-design-examples-of-blog-front-end-structures_01.jpg
Silktricky

20-web-design-examples-of-blog-front-end-structures_01.jpg
facesofnyfw.com

20-web-design-examples-of-blog-front-end-structures_03.jpg
farfromthetree.com

20-web-design-examples-of-blog-front-end-structures_04.jpg
postersinamsterdam.com

20-web-design-examples-of-blog-front-end-structures_05.jpg
faebric.com

20-web-design-examples-of-blog-front-end-structures_06.jpg
theverge.com

20-web-design-examples-of-blog-front-end-structures_07.jpg
designonline.org.au

20-web-design-examples-of-blog-front-end-structures_08.jpg
frenchcuisse.com

20-web-design-examples-of-blog-front-end-structures_09.jpg
middlemojo.com

--------------------------------------------------------------------------------

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.

20-web-design-examples-of-blog-front-end-structures_10.jpg
garethwrice.com

20-web-design-examples-of-blog-front-end-structures_11.jpg
piccsy.com

20-web-design-examples-of-blog-front-end-structures_12.jpg
nowyteatr.org

20-web-design-examples-of-blog-front-end-structures_13.jpg
designspiration.net

20-web-design-examples-of-blog-front-end-structures_14.jpg
typetoken.net

20-web-design-examples-of-blog-front-end-structures_15.jpg
mapltd.com

20-web-design-examples-of-blog-front-end-structures_16.jpg
skivefestival.dk

--------------------------------------------------------------------------------

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.

20-web-design-examples-of-blog-front-end-structures_17.jpg
thegreatdiscontent.com