Avatars in Blog Comment Design

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

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.

PSDTUTS

Freelance Folder

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 Folder

Freelance Switch

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.

FSw

Smashing Magazine

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.

Smashing Magazine

Pro Blog Design

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.

Pro Blog Design

Blog.SpoonGraphics

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.

Blog.SpoonGraphics

Arbenting

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.

Arbenting

Noupe

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.

Noupe

Six Revisions

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.

Six Revisions

Darren Hoyt

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.

Darren Hoyt

Mostly Lisa

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.

Mostly Lisa

Fuel Your Creativity

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.

FYC

Bittbox

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.

Bittbox

GoMediaZine

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.

GoMediaZine

We Are Not Freelancers

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.

We Are Not Freelancers

ImJustCreative

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.

ImJustCreative

ColorBurned

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.

Colorburned

Copyblogger

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.

Copyblogger

Blog Herald

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.

Blog Herald

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:

Published November 19th, 2008 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

35 Responses

Comments are now closed on this post.

  • Max, November 19, 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.

  • ImJustCreative, November 19, 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

  • John Wang, November 19, 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.

  • Bill Biwer, November 19, 2008

    Great article, really breaks down the basic formats of comment areas. Funny that I showed up in one of the above images.

  • Vandelay Design, November 19, 2008

    Thanks Bill. I guess when you left that comment you didn’t plan to see your face in another article :)

  • Vandelay Design, November 19, 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.

  • pickupjojo, November 19, 2008

    LOL, I’m a star! :)

  • Joe Krause, November 19, 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

  • Angie Bowen, November 20, 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!

  • John Leschinski, November 20, 2008

    I agree, Angie. However, I find I tend to check up on the conversation after adding too it less on sites without avatars.

  • Colorburned, November 21, 2008

    Thanks for the mention!

  • balinbandara, November 28, 2008

    Good to look !Really appreciate for the collection of different types of avatars in blog commenting.It has very useful information.

  • Jon Williams, November 29, 2008

    Some nice avatars :D

  • mohan, December 11, 2008

    really interesting it will be if we used comments like this….great post friend…….

  • david leonard, January 2, 2009

    i will think of comment box designs in a whole new way

  • Website Development, January 3, 2009

    I think your blog is so nice.So I impressed your beautiful expression.Thank you Avatar.

  • Ian, January 7, 2009

    Certainly gives some good ideas cheers!

  • amrita@website Designdubai, January 29, 2009

    hi
    think so your blog is so nice
    thanks

  • Web Design Dude, June 2, 2009

    Some nice ideas. It’s always a good idea to take a look around at similar sites before starting any work.

  • Deesuza John, June 9, 2009

    Blog comment design want creativity and its useful for each blog. Without blog comment the blog is not like complete.

  • whisky, July 29, 2009

    Very nice, they are very handsome and beauty :)

  • Dallas Web Design, August 12, 2009

    Good blog layouts. I think its important to have your blog clean and net with a lot of white space in your web design.

  • Web Design Company, August 14, 2009

    Avatars are great and I think the funny ones are even better. I sure beats a lot of sites that have a blank image some shadowed background that says add image or no photo. Anyway it was good info and gave us some great idea to use in our web design. I think you guys have a lot of useful information on here and we appreciate it. Thanks

  • Paragliding, September 11, 2009

    Interesting article on the different variety of comment boxes. WWhich one is the most effective at what?

  • aion kinah, September 29, 2009

    Blog comment design want creativity and its useful for each blog. Without blog comment the blog is not like complete.

  • jim, October 27, 2009

    Great article! Thanks a lot!

  • trCreative Web Design, December 2, 2009

    Some great Avatars on show – I like the cartoon ones in particular!

  • website design, December 16, 2009

    This is really awesome. Thanks..

  • khaled, March 12, 2010

    BLOGS beautiful and forward the very useful information

  • Web Design Hereford, May 23, 2010

    It’s well understood that information is more readily absorbed when presented in a visual form. Also that web site visitors typically scan information on web pages, rather than methodically passing through it.
    In the end, visuals add to the information flow, so yes, let’s power up those avatars.

  • Web Design Dallas, October 5, 2010

    I really dig what Fuel Your Creativity did with their speech bubbles. Thanks for putting together this resource, it is appreciated!

  • Gray Creative, February 10, 2011

    The avatars are good for giving the commenter a sense of belonging, the more unique they are the better. Very good ideas here.

  • Brian Montgomery, October 30, 2011

    Couldn’t agree more with Gray Creative, avatars definitely give the commenter a sense of belonging but also the ability to feel more connected with other users.