our thoughts

Blog Design Trends

December 30 2005
by Rachel

Here’s a summary of some of the common blog design trends out there right now which may give you some inspiration:

  • Big fonts: Gone are the days when only 11pt Verdana was cool. Big fonts for headers (and even content) are back on many blogs – such as Garrett Dimon’s blog or Whitespace (which, by the way, has recently discussed the merits of big text.)
    Big fontsWhitespace
  • Top border: a tonne of sites now have a thin top border spanning the width of the window, irrespective of the width of the rest of the design. It’s usually 5 or 6 pixels high. Examples include: A List Apart, Tech Crunch, Whitespace, GigaOM
  • Big headers/footers: Sites like Juque, Read/Write Web, Business Logs, The Hot Crew use contrasting or even subtle colours to make their large headers and/or footers stand out. These will span the full width of the window, while the rest of the content is much narrower. Big footer
  • Bright colours: Fill boxes with bright colours with a subtle vertical gradient and you get sites such as 9rules, Blinksale, Serene Green, Fruitcast.
  • Speech bubble comments: Adding a little more interest to comments as seen at hicksdesign and Digg, among many others.
  • Rounded corners: CSS techniques are making these easier to pull off and they’re turning up everywhere.
  • Highlighted links: Links aren’t underlined but their background colour is different – often a pale yellow.

I’ll add more sites that fit into these design trend categories as I come across them.

Have you seen any blog design trends lately that I’ve missed off?

Update: See this follow-up post: The Content-Rich Footer

your thoughts

moeed m

December 30 2005

Great list, definatley noticable in most of todays blogs.

now, a stunning woman who likes CSS? must be dreaming!

Stephen

December 30 2005

Nice to see you back and the new blog looks great. I’ll be watching with interest to see how WP 2.0 works out. Nearly jumped ship to WP a while back but didn’t have the time to learn a new blogging system. WP 2 looks like it might be worth the effort.

garrett

December 31 2005

Hmmm, http://indieanthems.com seems to fit all of those. Just remember, I did it first ;)

redstar

December 31 2005

Great examples. Its always nice to get some inspiration from al lot of differend manners(is that correct written?) the development in blogs is verry interresting, and there are some real champions in between. For now, a happy new year(here(holland) it s one more day away)

Justin

December 31 2005

Stumbled upon this site and I really like the different design techniques you displayed. I am currently looking to make my ‘blog’ look more like a ‘blog’ — and switching from MT32 to WP2 I think will aid in that. I’ve marked this as a ‘blog’ about blog design seems extreamly interesting.

Pete...

December 31 2005

*makes notes*
Bright Colours, big text? Well, all of none of my blogs fit in with that, but I really like your list, nice to see whats going on, esspecially as I really need to change mine a bit more as its still pretty much standard MT.

Rachel

December 31 2005

Indieanthems is a nice site Chris :) I’d love to know who started these trends but it’s almost impossible to figure it out now.

Thanks for stopping by Justin!

*Waves to Pete*

Mike Rundle

December 31 2005

Hey Rachel, two of those “top border” sites you highlighted were my fault ;)

And you’re damn right if I’m going to continue doing it… I love the look!

Happy new year-
Mike

Rob Goodlatte

January 1 2006

Found your post through my referral logs, thanks for the recognition :)

I’m currently redesigning my current blog and I keep kicking myself as I find myself tied to trendy design techniques I see everywhere. Although some of these elements just make good sense – i.e. big fonts grab attention, some are more arbitrary – graphics for graphics sake (i.e. 5px top bar)

Theres definitely a bubbly aesthetic circulating amongst the “Web 2.0″ crowd (don’t you just hate buzzwords?), and these trends are some common fibers.

Rachel

January 1 2006

Mike – you make beautiful sites, much respect! :) Keep with a good thing.

Hi Rob, thanks for stopping by – will keep an eye on your blog as you redesign!

Idea Grapes

January 3 2006

Rachel Cunliffe在cre8d design blog寫了一篇Blog Design Trends,

[...] Ya puestos a hablar de tendencias (que no de modas), tendencias en rediseños de blogs. Esta temporada se llevan, parece ser, las tipografías grandes, los bordes superiores, cabeceras y pies grandes, los colores brillantes, comentarios con bocadillos de cómic, los bordes redondeados y destacar los enlaces con el color de fondo. A todo esto, yo estaba pensando en cargarme la cabecera de otro blog más y dejar el título en lo alto de la barra lateral… Quedaría más limpio, ¿no? [...]

Cre8d Design – Blog Design Trends via ProBlogger…

miscblogger

January 3 2006

this is a great list. i love it! lately, I’ve been designing a bunch of blogs and this will be a very useful resource so that all my blogs won’t look the same. thanks!

[...] Highlighted links [via Rachel over at cre8d design] [...]

sang nguyen

January 3 2006

don’t forget gradients. lots of sites are using them for quick spice-ups

[...] 3 Jan 2006 Blog设计的7个趋势 Posted by Tony under 网志å?šå®¢  Blog DesignTrends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。 – 大字体(Big fonts): 11å?·Verdana字体已ç»?过时,大字体的标题和正文é‡?新æµ?行。如Garrett Dimon’s blog或Whitespace都使用了大字体。在传统的西文网站中,字体过å°?的情况的确比较普é??。对中文网站æ?¥è¯´ï¼Œ12px的大å°?个人觉得还是ä¸?错。而在Blog中,å†?大一点的字体也许å?¯è¯»æ€§æ›´å¼ºï¼Œè¦?ä¸?è¦?把我的Blog正文字体改为13px? – 顶端粗边线(Top border): 这是一个很细å°?的装饰,但的确很æµ?行,那就是在网页最顶部加上一æ?¡100%宽度ã€?5或6pt高的边框,就åƒ? A List Apartã€?Tech Crunchã€?Whitespace和Giga OM那样。这样的横æ?¡è™½ç„¶åŸºæœ¬ä¸?å½±å“?æµ?览,但是的确很有现代感,我个人也很喜欢,但是这ç§?设计似乎在中文网站中还较少è§?。 – 超大的页首和页尾(Big headers/ footers): 例å­?如Juqueã€?Read/Write Webã€?Business Logsã€?The Hot Crew,使用高对比色和超大文字图片æ?¥å‡¸æ˜¾é¡µé¦–和页尾。这个趋势很有张扬个性的æ„?味在其中,在国外的设计类和艺术类Blogé?žå¸¸å¤šä»¶ï¼Œä»Žè¿™ä¸ªéƒ¨åˆ†æ?¥è¯´ï¼Œå›½å†…çš„Blog设计显然还比较ä¿?守。ä¸?过我相信在2006年会有很多这样设计的中文Blog出现,因为Blog将为更人用æ?¥å±•现自己的个人风采。 – 明亮的色彩æ?­é…?区å?—å?Šé¢œè‰²çš„æ¸?å?˜ï¼Œ9rulesã€?Blinksaleã€?Serene Greenã€?Fruitcast都使用了大é‡?这样的元素。这类效果对整个页é?¢æ?­å»ºå?Šè‰ºæœ¯é…?色都有比较高的è¦?求,ä¸?过最终的效果的确是é?žå¸¸çš„炫目。希望能è§?到越æ?¥è¶Šå¤šå›½å†…的网站也能作得那么漂亮。 – 对è¯?气泡框ä½?的回å¤?(Speech bubble comments): 回å¤?部份的个性装饰,例如hicksdesign和Digg。Digg的回å¤?框令人å?°è±¡æ·±åˆ»ï¼Œä¸?过我觉得这样的设计还是è¦?é…?å?ˆæ•´ä¸ªç½‘站的风格效果æ‰?比较好。 – 圆角(Rounded corners): 用CSS而ä¸?是图片æ?¥å®žçްå?„ç§?å?„样的圆角,具体的技术细节A List Apart有介ç»?。圆角很好看,ä¸?过用起æ?¥è¿˜æ˜¯è¦?花å°?å°?的功夫。 – 高亮链接(Highlighted links): ä¸?用下划线,而是用鼠标划过以å?Žçš„背景色改å?˜æ?¥è¡¨çŽ°è¶…é“¾æŽ¥ã€‚å‘µå‘µï¼Œæˆ‘çš„Blog就是例å­?。的确å?¯ä»¥æ??高超链接的å?¯è¯»æ€§å’Œæ•´ä½“页é?¢æ•ˆæžœã€‚ 这些趋势å?ˆä¸€ä¸ªå…±å?Œçš„特点,就是针对较短篇幅的文字进行阅读体验的优化,值得所有的Blogger借鉴学习。 [...]

mark

January 3 2006

great observations! You’re so right as I’ve noticed them on many blogs.

mark

January 3 2006

good observations.

I’ve noticed them too on many blogs.

The Web Design Blog -

January 3 2006

[...] This is a nice short summary of popular blog design trends. There is some nice information there for anyone who designs blogs. « I like your colors   [...]

Cheyne

January 3 2006

Great list, and very true. I blogged about this article on http://thewebdesignblog.com

Simone

January 3 2006

Rachel, great succestions…
I designed this skin for SubText Blogging engine (inspired by the Asual theme for blojsom) look at this example at http://micahdylan.com

I think that gradient as, someone said above, are great to enanche the apperance of a blog… as do rounder corner…
Simo

[...] WebDesign – Blog Design Trends by retorta | posted in Recomendações Trackback URL | Comment RSS Feed Tag at del.icio.us | Incoming links [...]

A quoi ressembleront nos blogs en 2006?…

Rachel nous dresse une liste des tendances à suivre ou ne pas suivre, tout est une question de goût. Au passage, si n’hésitez pas à partager en commentaire les évolutions que ce soit en terme de design, de fonctionnalité, ou…

Qbic

January 4 2006

[...] Questo riguarderà il campo strutturale e “tecnico” quanto quello estetico e del design delle pagine web. Cunliffe su Cre8d (poi su Caymag) segnala 7 delle maggiori tendenze che si svilupperanno durante tutto l’anno nella creazione dei layout web. Io ne confermo alcune e aggiungo altri clichés che, credo, verranno usati parecchio durante il 2006. Ci sono tendenze nuove ma anche alcune già intraviste nel 2005. Ove possibile e necessario, riporto anche degli esempi. [...]

[...] Da problogger un post che punta dritto a un altro… con tutte le regole per avere blog graficamente à la page. Ve lo traduco molto velocemente qui per rendervi le cose più semplici: [...]

[...] A time lapse video of the seasons in Norway. Dallas toddler’s talking Elmo book asks ‘Who Wants To Die?’ This guy has the world’s longest ear hair Hey, this Kopi Coffee tastes like shit Should Sufjan Stevens next “State” release be California? 7 blog design trends for the new year. Oversized plastic car model kit wall art. [...]

[...] Ecco, per quel che concerne il web design, le sette tendenze che con tutta probabilità si affermeranno nel corso del 2006 … [...]

[...] Bron: Cre8d Design Blog [...]

[...] ProBlogger links to a post on blog design trends written by Rachel Cunliffe in the cre8d design blog. Cunliffe, in her post, enumerates elements of current blog design trends: big fonts, big headers and footers, top border, bright colors, speech bubble comments, rounded corners, highlighted links. [...]

Antoine Cailliau

January 4 2006

Any trackbacks ? Or I haven’t seen the link ?

> http://www.ac-graphic.net/blog/88-un-design-hiver2005.php5

Rachel

January 4 2006

Hi, I’m not sure what you mean?

Stefano

January 5 2006

penso che tutte le indicazioni utili possano essere prese in considerazione ! ciao

[...] En cre8d design, un blog de una chica de Nueva Zelandia encontré estos dos listas, una que describe sitios o servicios que ella descubrió en el 2005, y la otra, una lista de tendencias de diseño en blogs. [...]

Jeroen Gerits

January 5 2006

Maybe is the usage of sIFR 2.0 (Rich Accessible Typography for the Masses) a good addition to this list…

sIFR website: http://www.mikeindustries.com/sifr

[...] Blog Design Trends – cre8d design blog [...]

Danny Foo

January 7 2006

Wow! It’s really great having your stuff to read again. :)

Anyway, about the link with a background color. I think it could be confused with highlighted text if not put to good use.

But we’ll see as 2006 rolls out its long carpet.

Rachel

January 7 2006

Thanks Danny :) I felt that the Designer Blogs topic was a little too narrow – so here I am again :)

[...] Reality Tagging via.Big IDEA Blog Design Trends (via: problogger) via.블로그 나ë?¼ 블로깅 넷 국내 설치형 블로그 비êµ?표 dPolls.com via.TechCrunch [...]

Jauna

January 9 2006

Urte Berri On Deneri.
I am not a fashion victim so I do not care of what is up to date ;-)
Take care Rachel.

[...] Rachel Cunliffe en cre8d design: Blog Design Trends [vía] [...]

[...] Mira que estaba yo aguantando la tentación de escribir sobre las tendencias para 2006 en varios ámbitos, pero uno no es de piedra y no se puede estar reprimiendo esa tentación durante mucho más tiempo. Buscando un objetivo que sacie mi sed de comentarios de tendencias, llego a través del siempre genial eCuaderno, a Blog Design Trends, que no es sino la predicción de Rachel Cunliffe, que es fundadora de Cre8d design, un estudio de diseño especializado en diseño de weblogs. [...]

Sean Wilson

January 11 2006

Rachel, nice examples of good design. Thanks for the ideas.

[...] As a follow to my recent blog design trends post, I just found a tongue-in-cheek tutorial which shows you how to make a Web 2.0 layout. [...]

[...] cre8design: Tendencias en deseño de blogs para o 2006. [...]

[...] De plus, Presse-Citron relayait l’article d’une jeune Néo-Zélandaise Rachel Cunliffe en l’adaptant et reprenant des exemples de la toile française. Rien de vraiment nouveau mais la tendance est à suivre les préceptes des stars du marché : grandes typos, couleurs vives, headers et footers de taille plus que respectable, meilleures visibilité des liens. La seule chose qui soit vraiment nouvelle par le biais de CSS 3, ce sont la généralisation (en fait la facilité de leur intégration) des bords arrondis. [...]

[...] Posted in Mood at 10:00 am by å¾?家汇,衡山路®©™ Beta cre8d design blog里有一篇关于Blog Design Trends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。   [...]

James

January 19 2006

You missed Zebra comment backgrounds, and (g)ravatars.

merkley???

January 24 2006

apparently from what i see the trend is to make stuff that is entirely BORING. there are actually cool designs out there, that is if your idea of good design isn’t a box for cookware or toasters.

i hated your article.

Business Man

January 25 2006

It’s a good starter article – what would be great would be more depth on the design coverage – hope to see you add that to the article over time.

filet-o-rish

January 26 2006

Hello Rachel, thanks a lot for your summary of the trends, I learned a lot. I’m just starting out, a newbie/rookie/inexperienced fool who is just in the initial stage of researching design. My website is going to be dedicated to sports satire articles and I was just wondering what you thought was the best sort of design for that kind of niche (though I realize there are many possibilities). I really like the whitespace design, but I was hoping some of you might have general tips/suggestions and perhaps good examples that accomodate longer articles. Thanks, and sorry for the long post.

[...] This tutorial will explain how to change or hide the display of Trackbacks/Pingbacks in Wordpress. You can see an example of this. [...]

Rachel

January 30 2006

filet-o-rish, good question :) I would go for something which is clean and uncluttered yet still has the feel of a sports magazine.

For longer articles, make use of the “More/Continued” functionality. Also, you might want to have a look at sites like: The Onion, A List Apart and Particle Tree (among many others) handle an online magazine running on blog software.

[...] Rachel Cunliffe在cre8d design blog寫了一篇Blog Design Trends,列出她觀察到的7個設計趨勢,將在2006的blog界大為æµ?行。以下是我粗略的翻譯,粗體字則是個人的感想: [...]

Christian Watson

February 7 2006

Rachel – I think some of these trends have been around for a while. It will be interesting to see which ones continue into 2006 and what new trends emerge.

On a related note, I posted a showcase of typography for headlines, which touches on one of your points: big fonts!

Rachel

February 8 2006

Nice site Christian! Agreed – nothing is new really, unstyled H1 tags are pretty big :) More and more sites are picking up on these trends though – for a few years, tiny text was in.

4234

February 9 2006

Rachel – I think some of these trends have been around for a while. It will be interesting to see which ones continue into 2006 and what new trends emerge.

On a related note, I posted a showcase of typography for headlines, which touches on one of your points: big fonts!

网站建设
网站设计

[...] Blog设计的7个趋势 cre8d design blog里有一篇关于Blog Design Trends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。 [...]

trendoffice

February 13 2006

I am pleased to have found this post, because I have always liked the more colourful sites with interesting fonts. It is my opinion that even if the text is valuable, a dull colour (or lack of any) and boring fonts may just cause most of the readers to skip the valuable things the author has to say. And the oposite – a well designed site is a pleasure to read and surf through.

[...] cre8d design blog里有一篇关于Blog Design Trends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。- 大字体(Big fonts):11å?·Verdana字体已ç»?过时,大字体的标题和正文é‡?新æµ?行。如Garrett Dimon’s blog或Whitespace都使用了大字体。在传统的西文网站中,字体过å°?的情况的确比较普é??。对中文网站æ?¥è¯´ï¼Œ12px的大å°?个人觉得还是ä¸?错。而在Blog中,å†?大一点的字体也许å?¯è¯»æ€§æ›´å¼ºï¼Œè¦?ä¸?è¦?把我的Blog正文字体改为13px?- 顶端粗边线(Top border):这是一个很细å°?的装饰,但的确很æµ?行,那就是在网页最顶部加上一æ?¡100%宽度ã€?5或6pt高的边框,就åƒ? A List Apartã€?Tech Crunchã€?Whitespace和Giga OM那样。这样的横æ?¡è™½ç„¶åŸºæœ¬ä¸?å½±å“?æµ?览,但是的确很有现代感,我个人也很喜欢,但是这ç§?设计似乎在中文网站中还较少è§?。- 超大的页首和页尾(Big headers/ footers):例å­?如Juqueã€?Read/Write Webã€?Business Logsã€?The Hot Crew,使用高对比色和超大文字图片æ?¥å‡¸æ˜¾é¡µé¦–和页尾。这个趋势很有张扬个性的æ„?味在其中,在国外的设计类和艺术类Blogé?žå¸¸å¤šä»¶ï¼Œä»Žè¿™ä¸ªéƒ¨åˆ†æ?¥è¯´ï¼Œå›½å†…çš„ Blog设计显然还比较ä¿?守。ä¸?过我相信在2006年会有很多这样设计的中文Blog出现,因为Blog将为更人用æ?¥å±•现自己的个人风采。- 明亮的色彩æ?­é…?区å?—å?Šé¢œè‰²çš„æ¸?å?˜ï¼Œ9rulesã€?Blinksaleã€?Serene Greenã€?Fruitcast都使用了大é‡?这样的元素。这类效果对整个页é?¢æ?­å»ºå?Šè‰ºæœ¯é…?色都有比较高的è¦?求,ä¸?过最终的效果的确是é?žå¸¸çš„炫目。希望能è§?到越æ?¥è¶Šå¤šå›½å†…的网站也能作得那么漂亮。- 对è¯?气泡框ä½?的回å¤?(Speech bubble comments):回å¤?部份的个性装饰,例如hicksdesign和Digg。Digg的回å¤?框令人å?°è±¡æ·±åˆ»ï¼Œä¸?过我觉得这样的设计还是è¦?é…?å?ˆæ•´ä¸ªç½‘站的风格效果æ‰?比较好。- 圆角(Rounded corners):用CSS而ä¸?是图片æ?¥å®žçްå?„ç§?å?„样的圆角,具体的技术细节A List Apart有介ç»?。圆角很好看,ä¸?过用起æ?¥è¿˜æ˜¯è¦?花å°?å°?的功夫。- 高亮链接(Highlighted links):ä¸?用下划线,而是用鼠标划过以å?Žçš„背景色改å?˜æ?¥è¡¨çŽ°è¶…é“¾æŽ¥ã€‚å‘µå‘µï¼Œæˆ‘çš„Blog就是例å­?。的确å?¯ä»¥æ??高超链接的å?¯è¯»æ€§å’Œæ•´ä½“页é?¢æ•ˆæžœã€‚这些趋势å?ˆä¸€ä¸ªå…±å?Œçš„特点,就是针对较短篇幅的文字进行阅读体验的优化,值得所有的Blogger借鉴,更值得BSP学习。 [...]

[...] cre8d design blog里有一篇关于Blog Design Trends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。 [...]

[...] In ogni caso si tratta sicuramente di una moda destinata a propagarsi soprattutto nella cerchia elitaria dei webdesigner più in vista, così come è gia accaduto per altri trend che ho segnalato tempo fa sul mio blog personale. [...]

[...] cre8d design blog里有一篇关于Blog Design Trends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。 [...]

[...] An adaption of the top border trend that I’ve been seeing on a number of blogs recently is a multicolored top border: [...]

[...] cre8d design blog裡有一篇關於Blog Design Trends的文章,例舉了目å‰?Blog設計方é?¢çš„7個趨勢。這些趨勢已經在很多的國外Blog中被廣泛應用。 [...]

温控仪表太ä¸?好找了!

[...] As you may have noticed on New To Blogging, that we have changed out look. I am going with a new “Web 2.0″ design look (see other web 2.0 blog design trends). There is alot more to do, I need to fill post and make sure the links work and go somewhere! But I wanted to get everything going and thought it would be better to get started with it partially done, than to wait till I fix all the blog tweaks. Oh I forgot, It’s time for a shameless plug If you would like to purchase a custom blog design, please check out thinkinnovations or contact me via this blog! [...]

Prashanth naidu

April 18 2006

Greate topic
Web designer Prashanth naidu

babygirl

April 19 2006

i think that blog 27 r the best…:P luv ya!!!!!!!

[...] 国外: 1.blog design 101:creating your own wordpress theme 就是那个写blog设计的7个趋势的著å??网站写的 [...]

INTERRACIAL

May 13 2006

Robert Elms had a piece about secondary transfer in Time Out last week but I canÒt point you directly to it as you have to pay to get it online.

[...] iQwwgyJf ); è?½èŠ±æœ‰æ„?,æµ?水无情Just another My.donews.com weblog 五月 16, 2006 Blog设计的7个趋势 cre8d design blog里有一篇关于Blog DesignTrends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。 [...]

anal

May 19 2006

It’s a good starter article – what would be great would be more depth on the design coverage – hope to see you add that to the article over time.

links for 2006-06-13

June 14 2006

[...] cre8d design blog » Blog Design Trends (tags: webdesign css) [...]

Amb-En

June 22 2006

Nice site! Thx

Joker :)

tom rmb

June 23 2006

Nice!
Big headers/footers:
~~~~~~~~~~~~~~~I can’t accept this issue ,
especially big footers, and now it is’t popular.

[...] English(英文版本) [...]

[...] cre8d design blog里有一篇关于Blog Design Trends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。 [...]

[...] Blog设计的7个趋势 cre8d design blog里有一篇关于Blog Design Trends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。 [...]

[...] cre8d design blog » Blog Design Trends (tags: blog design) No Tags .adHeadline {font: bold 10pt Arial; text-decoration: underline; color: blue;} .adText {font: normal 10pt Arial; text-decoration: none; color: black;} [...]

kevin

July 13 2006

hou to use it ? thank you .

[...] cre8d design blog里有一篇关于Blog Design Trends的文章,例举了目å‰?Blog设计方é?¢çš„7个趋势。这些趋势已ç»?在很多的国外Blog中被广泛应用。 [...]

[...] Blog Design Trends [...]

Elsewhere: Skype MSN Messenger Twitter Facebook