45个杰出的博客设计

读者: 1585    发布时间: 2007

原文: 45 Excellent Blog Designs

Designing a blog is easy. Whatever engine you are using and whatever style you prefer, you’ll always find a number of templates you can apply to your weblog in seconds. No styling is necessary, no playing with colors is needed and no mind jogging about content presentation is required. However, not every weblog should look like a typical blog. After all, not every blogger wants his or her site to look exactly like hundreds of other ones. In fact, there is a small bunch of creative, outstanding and individually designed from scratch blogs.

In this post we didn’t try to showcase some eye-candy (although sometimes eye-candy is indeed offered); the designs listed below were selected for their attention to small details. Pretty and colourful header-graphics doesn’t make a good blog. The blog needs a solid visual structure, a profound hierarchy of site elements; it also has to be able to build some kind of a bridge between the content and its presentation. To do this, you need to think about precision, minimalism and sound use of illustration. These criteria were the ones we’ve used to select the designs listed below. All these aspects make the designs we’ve selected look… well, not always beautiful, but outstanding, almost excellent in their own kind. Mostly it’s the idea the designers used to make the weblog as usable as possible - not the implementation of this idea - which we’ve been after.

Below you’ll find 45 excellent blog designs which impress with creative approaches and attention to details; hopefully you’ll find new ideas you can develop further in your own designs.

Notice that the screenshots we’ve provided may give you a wrong impression about the whole design of the sites; in doubt you should take a closer look at headers, footers, comment-areas, site structure and further site elements. Please also notice that you can click on screenshots to get to the sites from which the screenshots have been taken.

We’ve missed something? Definitely! Let us know in the comments!

Weblogs powered by Django

Ryan Berg (Django)

Screenshot

Derek Featherstone (Django)

Screenshot

Jeff Croft (Django)

Screenshot

Andy Hume (Django)

Screenshot

Weblogs powered by ExpressionEngine

Jesse Bennett-Chamberlain (Expression Engine)
Whitespace in use. The categories and popular entries are listed at the top of the page, not in the sidebar as they usually are.

Screenshot

Veerle Pieters

An almost “classic”, well-known design, but still incredibly beautiful. Veerle makes use of a dark layout with quite colourful scheme. The result is impressive - and the position of site elements extremely well thought-out.

Screenshot

Emanuel Blagonic (Expression Engine)

Screenshot

Weblogs powered by MovableType

Kevin Kornell (Movable Type)
A typical weblog doesn’t look like an illustrated magazine. Kevin Kornell’s blog does. This one makes use of an “oldie”-style.

Screenshot

Cameron Moll

Screenshot

Dave Shea (Movable Type)

Screenshot

Dan Cederholm (Movable Type)

Screenshot

Weblogs powered by Textpattern

Praegnanz.de (Textpattern)
A minimalistic approach with clean web-typography.

Screenshot

Hicksdesign (Textpattern)

Screenshot

Geniant (Textpattern)

Screenshot

Blogs powered by Wordpress

Circle Six (Wordpress)

Screenshot

Pedro Lamin (Wordpress)
Fresh and clean design, lacking almost everything - there is even no navigation in blog categories.

Screenshot

Design Disease (Wordpress)

Screenshot

Surfgarden (Wordpress)

Screenshot

Dan Rubin (Wordpress)

Screenshot

NorthxEast (Wordpress)

Screenshot

Larissa Meek (Wordpress)

Screenshot

Matt (Wordpress)
A Business-Design. Look at the information sections on the left side of the layout.

Screenshot

Agenturblog (Wordpress)

Screenshot

Ben Gillbanks (Wordpress)

Screenshot

Rik Catlow (Wordpress)

Screenshot

FreelanceSwitch (Wordpress)

Screenshot

John Boardley (Wordpress)

Screenshot

Shaun Inman (Wordpress custom PHP-Framework. Thanks, Shaun)

Screenshot

Mstefan.com (Wordpress)

Screenshot

Screenz (Wordpress)

Screenshot

Screencasting (Wordpress)

Screenshot

Blog.Critical (Wordpress)

Screenshot

Wan Zafran (Wordpress)

Screenshot

Viki (Wordpress)
Extensive use of visual elements prevails; it might be a nice idea, but the content should prevail.

Screenshot

Nick La (Wordpress)
Playful design with dozens of swirls, curves and artistic elements.

Screenshot

Laura Alter (Wordpress)

Screenshot

Markus Zeeh (Wordpress)
Playful flower-images and ornaments seem to be trends.

Screenshot

Sidney Collins (Wordpress)

Screenshot

Roman Leinwather (Wordpress)

Screenshot

Bottled Sky (Wordpress)
Probably not the most gorgeous layout ever made, but well-structured. The use of colors communicates the idea of the site.

Screenshot

Johanna Hallin (Wordpress)

Screenshot

Screenshot

Cabana (Wordpress)
Sometimes it is an interesting approach to use a “thin” layout, although it should rather be an exception.

Screenshot

Reflections (Wordpress)

Screenshot

Screenshot

Further Weblogs

Abduzeedo (Drupal)
Stylish, readable and clean. The site doesn’t look like blog at all - at least at the first glance.

Screenshot

Jonathan Snook (CakePHP)

Screenshot

Even more inspiration!

Apart from numerous galleries of CSS-based designs you might find useful the following showcases of weblogs designed on specific plattforms.

  • Textpattern sites
    Gallery of very well designed Textpattern-sites as well as the list of sites based upon Textpattern (sorted by country).
  • Django sites
    A growing showcase of websites powered by Django. Almost 300 entries.
  • Expression Engine Showcase
    A gallery of 200 sites powered by Expression Engine. 15 categories.

译文: 45个杰出的博客设计

开博客是很简单的,无论你用什么工具,喜欢什么风格,你都能在几秒内找到可用的模板,不需要样式,不需要颜色搭配设置,也不需要考虑内容的表现形式。尽管如此,不是每个博客都需要看起来像标准的博客。最重要的是,不是每个博客作者都希望他或她的站点看起来像其他成百上千人的一样。实际上,只有很少一些博客有很出色的创新的独特设计。
本文不会只是列出一些有很好”视觉感受“的站点(虽然有时候美观是确实需要的);我们所选择的博客,主要是关注它们的局部细节。漂亮美观的标题图片并不能成就一个好的博客。博客需要有一个坚实的可视架构,一个有深度的站点元素分层结构;同时需要能够在内容和表现形式之间建立多种形式的桥梁。为了做到这些,你需要考虑插图的位置,大小以及声音的应用。我们根据这些标准选择了以下的博客设计。我们选出的站点做到了这些,虽然不是都看起来很漂亮,但绝对是出色的,也许他们自认为是完美的。多数情况下,这些是使博客更好用的设计方法,而不是如何去实现,后者我们曾经讨论过。
在下面,我们列出了45个杰出的博客设计,它们通过创新的方法来表现,更关注于细节;希望你能有新的更棒的设计应用于你自己的博客中。
注意,我们给出的截图可能会误导你对站点整体设计的理解;如感到困惑,就仔细的观察标题,页脚,注释区域,站点结构以及高级站点元素。请注意,通过点击截图你可以访问截图的站点。
我们忘了什么吗?当然!我们在注释中继续吧!
用Django设计的博客
Ryan Berg (Django)
Screenshot
Derek Featherstone (Django)
Screenshot
Jeff Croft(Django)
Screenshot
Andy Hume(Django)
Screenshot
用ExpressionEngine设计的博客
Jesse Bennett-Chamberlain (Expression Engine)
使用的了空白。分类目录和常用链接列于页面的顶部,而不是通常所在的边栏。
Screenshot
Veerle Pieters
一个经典的著名博客,但也难以置信的美观。Veerle使用黑色背景布局配合极富色彩感的主题,令人印象深刻,同时站点元素的配置也是非常的棒。
Screenshot
Emanuel Blagonic
(Expression Engine)Screenshot
使用MovableType设计的博客
Kevin Kornell (Movable Type)
标准的博客不会看上去像图片杂志。但Kevin Kornell的博客这样做了,使用了一种"oldie"风格。Screenshot
Cameron Moll
Screenshot
Dave Shea (Movable Type)
Screenshot
Dan Cederholm (Movable Type)
Screenshot
用Textpattern设计的博客
Praegnanz.de (Textpattern)
一个小型方案,简单干净的页面。
Screenshot
Hicksdesign (Textpattern)
Screenshot
Geniant (Textpattern)
Screenshot
使用Wordpress设计的博客
Circle Six (Wordpress)
Screenshot
Pedro Lamin (Wordpress)
新颖而干净的设计,几乎没有任何东西-在分类里甚至没有导航栏。
Screenshot
Design Disease (Wordpress)
Screenshot
Surfgarden (Wordpress)
Screenshot
Dan Rubin (Wordpress)
Screenshot
NorthxEast (Wordpress)
Screenshot
Larissa Meek (Wordpress)
Screenshot
Matt (Wordpress)
一个商业设计,注意页面左边的信息栏。
Screenshot
Agenturblog (Wordpress)
Screenshot
Ben Gillbanks (Wordpress)
Screenshot
Rik Catlow (Wordpress)
Screenshot
FreelanceSwitch (Wordpress)
Screenshot
John Boardley (Wordpress)
Screenshot
Shaun Inman (Wordpress custom PHP-Framework. Thanks, Shaun)
Screenshot
Mstefan.com (Wordpress)
Screenshot
Screenz (Wordpress)
Screenshot
Screencasting (Wordpress)
Screenshot
Blog.Critical (Wordpress)
Screenshot
Wan Zafran (Wordpress)
Screenshot
Viki (Wordpress)
使用了很多流行的可视元素,是很好的方法,但内容也要流行才好。
Screenshot
Nick La (Wordpress)
使用很多漩涡,曲线和艺术元素,有趣的设计。
Screenshot
Laura Alter (Wordpress)
Screenshot
Markus Zeeh (Wordpress)
有趣的花图案和点缀,看上去像博客的延伸。
Screenshot
Sidney Collins (Wordpress)
Screenshot
Roman Leinwather (Wordpress)
Screenshot
Bottled Sky (Wordpress)
可能不是最华丽的布局设计,但也是很好结构,色彩的搭配契合网站的主题。
Screenshot
Johanna Hallin (Wordpress)
Screenshot
Cabana (Wordpress)
从某些方面看,它以一种让人感兴趣的方式使用了”瘦“布局,实际上它是个例外。
Screenshot
Reflections (Wordpress)
Screenshot

其它博客工具
Abduzeedo (Drupal)
独特风格,良好的可读性,干净的页面。看起来不像是一个博客——至少是初看起来。
Screenshot
Jonathan Snook (CakePHP)
Screenshot
更多的灵感!
除了很多的基于CSS的设计,以下的站点列出了一些基于特定平台的博客设计,之中你会找到一些有用的东西。
● Textpattern 网站
很多设计得很好的Textpattern网站和基于Textpattern的网站的列表(按不同国家分类)。
● Django 网站
不断增长的以Django设计的博客列表,近300个链接。
● Expression 平台
Expression平台的200个博客,15个类别。