20 Web Design Examples of Blog Front-end Structures

Imagem

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.

silktricky

Silktricky

facesofnyfw

facesofnyfw.com

farfromthetree

farfromthetree.com

postersinamsterdam.com

postersinamsterdam.com

faebric.com

faebric.com

theverge

theverge.com

designonline

designonline.org.au

www.frenchcuisse.com

frenchcuisse.com

middlemojo.com

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.

silktricky

garethwrice.com

piccsy

piccsy.com

nowyteatr

nowyteatr.org

designspiration

designspiration.net

typetoken

typetoken.net

mapltd.com

mapltd.com

skivefestival.dk

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.

thegreatdiscontent.com

thegreatdiscontent.com

orderedlist

orderedlist.com

layervault

Jordan Staniscia

ministryoftype

ministryoftype.co.uk

williamleeks

williamleeks.com

layervault

layervault.com

ucdarchitecture.ie

ucdarchitecture.ie


HORIZONTAL SCROLL

minimalmonkey

minimalmonkey.com

Blogging

gallyapp.com

trentwalton

trentwalton.com

trackemfindemkillem.com

trackemfindemkillem.com


Fotologs

letstravelsomewhere

letstravelsomewhere.com

ithinkimight

ithinkimight.com

thisisacult

thisisacult.org

bentrova

bentrova.to

samking

samking.co

letstravelsomewhere

www.letstravelsomewhere.com

via awwwards.com

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s