If you are a regular reader here, you know that I put a lot of emphasis on paying attention to blog design elements that usually don’t get much attention at all like comment designs. The comments form is another one of the blog design elements that usually ends up getting rushed at the end. There really is no right or wrong way to design a comments form as long as you pay attention to basic usability guidelines. The following are 37 ways other blog designers have designed their comments form:
2. Adii
3. Renaissance
4. Avalonstar
5. Bartelme
7. coda.coza
9. CSSAddict
10. Mancub
11. Darren Hoyt
12. Design Disease
14. Edmerritt
15. Elitist Snob
17. greg-wood.co.uk
18. High Resolution
19. ifoh designs
21. KISSmetrics
22. Kulturbanause
25. Lucy Blackmore
26. MonsieurLam
27. Natalie Jost
28. Noupe
29. Oaktree Creative
30. Ordered List
31. pixelgraphix
32. Playground Blues
33. Chris Shiflett
35. Tim Kadlec
36. Wilson Miner
37. Yanko Design
Conclusion
Now go make your comments form that much better or sexier. I know I need to and that is why I am currently taking a second look at my own blog design. A redesign is coming in the future, along with an article about the whole redesign process.
Subscribe today by RSS for free and get more great blog design tips and lists. If you don’t know about rss feeds or you want to use the email subscription option, read this page on subscribing to Blog Design Blog.
61 comments
Great samples of forms. Makes me think about my pitiful standard comment forms and how much they need to be redesigned…
Regarding the title of this post I was afraid to see another showcase of overdesigned web forms. But au contraire. Nice write-up and showcase, too, that leads to the conclusion that good designed comment forms don’t overplay. They keep it simple. Users want to get to action fast. Fill up the form fields fast, write the answer and send it. No deflection.
Great post Vinh I’m off to steal some peoples CSS
Very nice, gives me a lot of inspiration being right in the midst of a redesign. It’s all in the details and comment forms are definitely overlooked more often than not. Time well spent on this post.
Awesome examples, gonna bookmark this for later use when I will create my own comments form
That’s a great list. I absolutely love coda’s web design and how he fully integrated it in wordpress: http://coda.co.za/blog/
Great collection! Bookmarked.
These are very nice! Very inspirational for making sure every part of a site or blog is well designed.
Thanks for the include Vinh Le, great post. Lots of inspiration.
very nice, clean, simple designs. thanks for putting this together.
I like the on of Oaktree Creative (#29), #35, Tim Kadlec is nice too..
The one I’m typing in right now isn’t bad either
#1 Is easily my favourite, lovely post really will be coming back to this time and time again. Thanks!
These are all pretty sweet, but mine’s better and not even because it’s mine but because it’s something different to the lot.
thanks for share… looks good
Nice examples, when I get to construct forms there’s where I mostly gonna get lazy, I don’t like designing forms, but in the end I love the way they look.
I’ve seen a nice one in this designer’s site too:
http://jonnotie.nl/
Nice work buddy! Some of these are classics!
Stumbled for sure!
Awesome post, the little things do make a huge difference.
When it comes to usability, it is best to keep the name, email, and website above the text area. Sure, you can use tabindexes, but for the average user they are accustomed to seeing the input boxes above the textarea.
I think it’s better when the text field appears on top of the form. That way, ideas are easy to write because you don’t miss anything while you fill the Name and E-mail fields…
A nice effect is to put the label into the field, and make it disappear when the user click on it or give it the focus; it takes less space and is more intuitive I think: you can see a implementation here on my comment form:
http://www.binocle.ch/blog/post/pilule_bleue_ou_pilule_rouge/
its a jquery plugin made by remy sharp:
http://remysharp.com/wp-content/uploads/2007/03/label_over_example.html
@Mark: I stare at mines too and think, wow redesign please.
@Björn: I agree, usability should always take priority over design, but once you get that taken care of there is no need to hold back. =) Glad you enjoyed the post and that it didn’t turn out to be a bad showcase for you.
@styletime: Haha, you go do that =P
@Jeremy: Thanks. I found it was much harder to find good comments form design than comment designs.
@Matt Rossi: No problem, love your work.
@Mark: Thanks, but this one needs some work. =)
@liam: I agree #1 is very well done. Glad you found it useful.
@Swizec: It is indeed different and quite creative. Nice work.
@fred: Nice find! That comments form is a really nice example of using textures.
@impNERD: I agree, in general it is best to keep the same format people expect unless you have good reason to change it.
@Niserbm0n: That is an interesting point. I never thought about it that way. #1 is a great example of that too.
Thanks for the inspirational post, I think if anything, this post really helps emphasize the point that simplicity works. To me, the best ones above are the most simple and easy to navigate.
Best Wishes,
Drew
Lot’s of interesting content on your blog. Happy I found you
I don’t find a search box on this blog? That would be helpful.
Any input on hot to design a sign up form for maximum results? I just wrestled with this issue and went through a lot of graphics for the form. Not 100% satisfied, but will leave it for now. If you wish, please take a look. The form is at the right hand side “Stay Updated”:
http://www.softwaremarketingsecrets.com/
Best,
Peter
Thanks for the tips. Mrlam rocks
fancy comment forms are nice but I think they should still stick to a standard layout for the fields, people go funny when they see something different!
This was a great post, voted ya on vot.eti.me too!
Great idea of post, thanks for this !
There are some great ideas here. I must redesign my blog sometime. I am going to start from scratch this time I think.
Hey these are awesome! Definitely inspiring me to up mine, I put a Background behind mine, but it can use some CSS Modification
Thanks again! Great post!
I only liked about 7 of the comment designs. Not to plug myself, but I really love what my designer did at http://www.alexshalman.com/blog with the comments.
My favourite is #8 by Creattica Daily - Simple, clean, does the job with a nice little design tweak. #25 & #21 are also very nice.
To comment 29 - Your comments form may as well be the standard one. “Not to plug myself” indeed…I think you’ll find that’s exactly what you’re doing. Still, think positive, and give us another popup that breaks Firefox.
Great collection!
Ouch.. just another boring list. Do you think, anyone could learn something from such randomly collected stuff? The design of a single interaction element (such like contact forms) normally follows the overall design scheme of a site. Your list illustrates this, as expected.
Great Form Collection!
I actually think there are just a few ones that work very well from a usability point of view. Most of them are difficult to read /find as the conflict with the background.
this is on a contact page, but the design is great!
http://secretpenguin.com/contact/
very good… Thanks you very much !
Love this blog Vinh! Keep it up
Thanks for the great desings…
It will help me to redesign my jobs site
Hi,
Nice thought .This is very useful and nice. Its very help in design.
These are very nice examples. If wordpress can modularize the comments form even more, it would be even simpler to redo the comments form.
Your comment form appears to be broken in FF2 on XP. The email and website fields are pushed off to the left.
Great post though!
Design Intellection ROCKS!!!!!!!!! Amazing work.
Nice post! I think my comments form need some new design too!
nice post… I’ll try to improve mine .. Thanks!
Currently redesigning my contact page and came across this post, thanks for some great ideas, especially like the use of a contact form on the 404 page.
статья оказалась не очень полезной.
I just found your blog, I bookmarked it and reading just one post I already love it. : D
nice post
Great tip! Is there no end to how many times I am ‘completely finished’ tinkering with my code? I’m off to rethink my comments …
что-то у тебя расплывается все в сафари…
Thanks so much! So useful
Автор, у тебя посты никто не тырет c сайта? А то меня задолбали уже - копируют и копируют. Только и делаю что нахожу их…
Forgetting your own comments box for a second, I really like how you’ve listed your own comments with the speech bubble.
Your response in green, with the bubble angled right is the finishing touch!
Shame you didn’t use this idea for your own comments box though?
I feel let down…:(
that’s nice bro
this is nice to make the comment box more attractive….and all are good..nice designs
greats tips excellent post
Very cool, forms are so often overlooked and treated as an afterthough in design. Very nice resource list.
yes, very nice forms. they give me many ideas for my templates. yes yes. thank you
Я так понимаю, в последнем абзаце как раз таки вся соль и изложена
Add a comment