Comment design can either help to give a blog theme a creative look, or it can be an afterthought that doesn’t get much attention during theme design and development. Avatars are now being used by a lot of bloggers (partly due to easy integration with WordPress) to make the comment section more personal and to encourage discussion.
In this post we’ll look at about 20 examples of blogs that are using avatars in the comments. Hopefully, these examples will give you some ideas in case you want to use avatars in your own work.
If you like getting design inspiration by looking at excellent blog designs, you’ll love our new gallery site Blog Design Heroes.
PSDTUTS, and the other blogs in the TUTS family, uses a speech bubble in the comment area coming off of the avatar of the commenter.
Freelance Folder was recently re-designed, and the comment area was certainly not overlooked. Alternating background colors are used, and trackbacks are also separated from comments.
Freelance Switch alternating background colors on comments, and the avatars are kept outside of the comment blocks. The default avatar is the familiar Freelance Switch illustrated character.
Smashing Magazine is one of the few blogs that uses avatars to the right of the comment area. The avatars are smaller than on many blogs and they’re located in the row with the commenter’s name and the date/time.
Pro Blog Design has a beautifully designed comment area. The speech bubble effect is used on comments and avatars have an attractive border added to them.
Blog.SpoonGraphics uses a dashed border on avatars, as well as between comments. This comment design is less blocky than some others becuase it uses a consistent background color and no separation between comments besides the sublt dashed line.
Arbenting keeps each comment in a gray box, with the avatar sitting outside of the gray box and to the left. The avatars have a thin, solid border with a few pixels of padding.
Noupe displays the commenters name at the left, above the avatar. The commenters URL than shows up above the comment, and comments are separated by dashed borders at the top and bottom of comments.
Six Revisions uses a minimal comment design that includes the avatar above the commenters name, and not a lot of other design elements to style the comments. Comments are separated by dotted borders, but there are no blocks or alternating background colors.
Darren Hoyt displays smaller-than-usual avatars above comments with a speech bubble effect. A dark background is used for all comments, except Darren’s.
Mostly Lisa uses avatars to the left of comments with a speech bubble effect on the comments. Avatars have a thin, solid border and a gradient is used at the top of comments to give some added visual appeal.
The comment area at Fuel Your Creativity is open, with no borders, blocks or alternating background colors to break things up. Avatars are shown to the left with padding, a white background and a thin, solid border.
Bittbox shows small avatars above comments and next to the name of the commenter with a solid gray border between the name and the comment. Alternating comments have a light gray background as opposed to white.
GoMedia uses alternating background colors on comments and gray borders to also help visually separate comments. The comments name is in a yellow/gold color, and avatars are to the left.
We Are Not Freelancers keeps each comment in a box with a subtle background gradient. The avatars are to the left with a few pixels of padding and a light one-pixel solid border. The commenter names (linked to user-submitted URLs) use a thin dashed red underline.
ImJustCreative uses a unique comment design. Like Smashing Magazine, the avatars are placed to the right. The comment itself is kept in a box with a thin gray border, and above the comment is the commenter’s name, date and time of comment, and the avatar.
ColorBurned features a dark background for the blog and the comment area. Alternating comments are distinguished by a slightly lighter gray background color. The comment layout is fairly standard with the avatar to the left and the commenter details above the comment.
Copyblogger has one of the more well-known blog designs. The comment section includes a small avatar next to the commenter name, with comments in a gray speech bubble. Comment numbers are also shown at the top right.
Blog Herald uses a rather open comment layout and design. The comments are on a white background, just like the rest of the site. Small avatars are placed in a box with a light blue background above the comment. This box also includes the commenter name/link and the date and time.
What Are Your Thoughts?
This post is intended just to provide a sampling of avatars in comment design. Feel free to mention other blogs that you think are using avatars effectively.
How do you feel about comment design and avatars? Do you feel that it is an important part of blog theme design? Do you prefer to comment on blogs that show avatars, or is it a non-factor?
For more posts on blog design, see:
November 19th, 2008
To be honest i prefer avatars on blog comments, its gives a visual representation of who is commenting on your blog and others blogs, to tell you apart from the rest of the say 100 comments that a post may get, and can sometimes put a face to a comment. but i wont stop me from posting a comment if they are not supported, Gravatar http://en.gravatar.com/ makes it
especially easy to intigrate avatars in to blogs like wordpress.
November 19th, 2008
Hey,
Really appreciate the mention. The comment system is actually bare bones right now, with some subtle features been added over time.
But the essence if will remain the same. Clean, open and fresh. The author’s comment box is actually styled in a pale blue tint to distinguish from the readers comments, which helps with seeing whats what. Also working on making the track backs noticeably different in the same way.
But the comment system is one area I really want to improve in every way to make it as visually and practically pleasing as possible. Without overdoing it or messing it up.
Thanks again for the mention,
Graham
November 19th, 2008
Avatars in comments are great. They make it easier to identify with your audience.
Some other things to keep in mind though. Having a separate comment style for the Owner/Author is extremely useful. It makes it easy for scrollers/skimmers to see that the author does in fact respond to comments left on their blogs.
Another thing that’s nice to have is pagination. If there’s a ton of comments, it’s quite painful to scroll through all of them.
November 19th, 2008
Great article, really breaks down the basic formats of comment areas. Funny that I showed up in one of the above images.
November 19th, 2008
Thanks Bill. I guess when you left that comment you didn’t plan to see your face in another article
November 19th, 2008
Max,
I agree, it does add something to the personality of the comments. I may add them here in the future.
Graham,
I like your approach. It’s different than many others.
John,
I agree about the author comments being styled differently. That’s something I need to do at all of my blogs.
November 19th, 2008
LOL, I’m a star!
November 19th, 2008
Check out what we did on our sign up page:
http://www.sacramentopress.com/user/add
We had our graphic designer bang out a whole suite of default avatars so the user can choose one if they don’t want to upload their own picture.
Here’s a page which where you can see the comments section acting as a true conversation:
http://www.sacramentopress.com/headline/20
November 20th, 2008
I like sites that use avatars since I can recognize who has commented at a glance. That’s not to say that sites without avatars discourage me from posting though, I don’t think it’s something that would make or break a blog.
And thanks so much for including Arbenting!
November 20th, 2008
I agree, Angie. However, I find I tend to check up on the conversation after adding too it less on sites without avatars.
November 20th, 2008
[...] Avatars in Blog Comment Design | Vandelay Website Design Creative comment designs w/ Avatars! You could be featured in here! (If you leave comments on blogs that is) (tags: webdesign inspiration blogs avatar) [...]
November 21st, 2008
Thanks for the mention!
November 28th, 2008
Good to look !Really appreciate for the collection of different types of avatars in blog commenting.It has very useful information.
November 29th, 2008
Some nice avatars
December 11th, 2008
really interesting it will be if we used comments like this….great post friend…….
January 2nd, 2009
i will think of comment box designs in a whole new way
January 3rd, 2009
I think your blog is so nice.So I impressed your beautiful expression.Thank you Avatar.
January 7th, 2009
Certainly gives some good ideas cheers!
January 29th, 2009
hi
think so your blog is so nice
thanks
June 2nd, 2009
Some nice ideas. It’s always a good idea to take a look around at similar sites before starting any work.
June 8th, 2009
[...] Avatars in Blog Comment Design Vandelay Design Blog Posted by root 2 hours 26 minutes ago (http://vandelaydesign.com) Background color and no separation between comments besides the sublt dashed line how do you feel about comment design and avatars and can sometimes put a face to a comment but i wont stop me from posting a comment if vandelay website design powered by wo Discuss | Bury | News | Avatars in Blog Comment Design Vandelay Design Blog [...]
June 9th, 2009
Blog comment design want creativity and its useful for each blog. Without blog comment the blog is not like complete.