Avatars in Blog Comment Design
November 19, 2008 – 8:04 pm
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.
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:
- What Makes Good Blog Design?
- Category Hacks for WordPress Theme Designers
- Enhanced Sidebars with Dynamic Content
- Top 10 Tutorials for Developing WordPress Themes
Copyright Vandelay Website Design.
Thanks for subscribing to the Vandelay Design Blog! If you enjoy the content that is published here, please check out my other design blog, DesignM.ag, or subscribe to the feed.