Vandelay Website Design Blog

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:

Originally Published November 19th, 2008

22 Responses

  1. Max
    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.

  2. ImJustCreative
    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

  3. John Wang
    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.

  4. Bill Biwer
    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.

  5. Vandelay Design
    November 19th, 2008

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

  6. Vandelay Design
    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.

  7. pickupjojo
    November 19th, 2008

    LOL, I’m a star! :)

  8. Joe Krause
    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

  9. Angie Bowen
    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!

  10. John Leschinski
    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.

  11. AndySowards.com :: Web Development Nerdy Daily Links For 11/20/2008 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
    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) [...]

  12. Colorburned
    November 21st, 2008

    Thanks for the mention!

  13. balinbandara
    November 28th, 2008

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

  14. Jon Williams
    November 29th, 2008

    Some nice avatars :D

  15. mohan
    December 11th, 2008

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

  16. david leonard
    January 2nd, 2009

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

  17. Website Development
    January 3rd, 2009

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

  18. Ian
    January 7th, 2009

    Certainly gives some good ideas cheers!

  19. amrita@website Designdubai
    January 29th, 2009

    hi
    think so your blog is so nice
    thanks

  20. Web Design Dude
    June 2nd, 2009

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

  21. Avatars in Blog Comment Design Vandelay Design Blog | Best Eye Cream
    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 [...]

  22. Deesuza John
    June 9th, 2009

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

Leave a Reply