Updated: January 25th, 2010

thumbnail Introduction

If you follow web design at all, you probably see 5 billion top NN posts on a daily basis mentioning site and blog designs, fonts, icons, etc.

However, nobody seems to be paying attention to these little but important guys: comment forms.

If you have an appealing comment box, you are more likely to receive comments (this is based on days of scientific research that I imagined I did in my head) and your content is more likely to be re-shared, voted up, and saved.

I really do feel that way when I visit blogs, especially when an otherwise aesthetically pleasing site has a plain vanilla comment box.

Let's Go

So here we go. I have looked through hundreds of sites to make this collection, go ahead and let me know if you like it (yeah, I know, my comment box is not as spiffy as theirs).

I've also included my notes with the parts that I liked.

1. blog.spoongraphics.co.uk 


  • interesting submit button
  • fun background
  • great font
  • grungy
  • border glow
  • normal:


  • focused:



2. springydevelopment.co.uk


  • 2 column
  • wide submit button


3. css-tricks.com


  • Chris Coyier doesn't mess around with crappy designs – his website is superb in general
  • normal:


  • focused:


  • internal disappearing labels
  • dimming labels
  • interesting submit button
  • custom images


4. net.tutsplus.com


  • tongue:


  • internal disappearing labels
  • appealing default avatar


5. smashingmagazine.com


  • simplistic
  • appealing submit button
  • absence of author website – less spam


6. branded07.com


  • fading
  • interesting background


7. depcore.com


  • simplistic
  • unconventional – looks like a pad of paper or a letter
  • contains an anti-spam measure


8. marcofolio.net


  • notify/don't notify option (for the first time the design is cohesive – not some random checkbox under the submit button)
  • lots of formatting buttons
  • smilies


9. jankoatwarpspeed.com


  • handy and appealing formatting buttons
  • flag next to the country – it then shows up next to each commenter, kind of cool:

http://www.jankoatwarpspeed.com flags 

10. dezinerfolio.com


  • highlight the field with focus – concentrate attention on one spot
  • large padding
  • by the way, they have an amazing header. I couldn't resist:

http://www.dezinerfolio.com header


11. sohtanaka.com


  • I love it
  • custom submit button
  • hovering quote
  • very polished look


12. productivedreams.com


  • the comment box actually sits *above* the comments – a radical, yet interesting approach
  • custom icons
  • really nice custom highlight on hover effect:

http://www.productivedreams.com hover

  • usability and UX at their best


13. kevadamson.com


  • grungy, sloppy – looks great!


14. line25.com


  • clean
  • side by side
  • symmetrical, exact
  • I love it


15. markforrester.co.za


  • colorful, crayon-like (though it looks better on the site itself – you need to see it in its natural habitat)
  • internal disappearing labels


16. jrvelasco.com


  • simple, and yet sophisticated


17. gizmodo.com

http://gizmodo.com 1

http://gizmodo.com 2

http://gizmodo.com 3

  • very simple from the UX perspective:
    • single line box, without the need to login first
    • expands on focus
    • no need to login even then, unless you want to – just enter your email


18. instantshift.com


  • this is one of my favorites
  • I love, love, love the way the comments look, especially the way the author ones stand out:

http://www.instantshift.com comments


19. koodoz.com.au


  • internal disappearing labels
  • the design itself, while seemingly not too special, mashes with comment list very well. Check it out – I think the curvy lines are very creative:

http://www.koodoz.com.au comments


20. elliotjaystocks.com


  • click the image – it's bigger than it looks
  • if you can't tell (), the elements are MASSIVE, which makes this comment box pretty unique



If you liked this post, you might also enjoy

So, what did you think? The comment box you're looking for is at the bottom of the page.

● ● ●
Artem Russakovskii is a San Francisco programmer and blogger. Follow Artem on Twitter (@ArtemR) or subscribe to the RSS feed.

In the meantime, if you found this article useful, feel free to buy me a cup of coffee below.