Read the Full article at Vandelay Website 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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
If you liked this, You might also like:
- Unorganized Cabinet by Colin Tury
- The Frost Chair by FurnID for Stouby
- Free & Cheap Royalty-Free Stock Photos
- There’s an App for That
Avatars in Blog Comment Design
Resources, Website Design · Tagged: avatars, blog, blog comment design, blog comments, comment, Website Design
Read the Full article at Vandelay Website 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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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?
If you liked this, You might also like:
Related Posts
Free & Cheap Royalty-Free Stock Photos
Free Stock Photos
Websites where you can find and download free stock photography. Be sure to review usage
Awesome Chrome Extensions For Web Developers
Extensions are extra features and functionality that you can easily add to Google Chrome. By using extensions, you
50 Useful CSS3 Tutorials
Each day CSS3 becomes more and more popular among web designers and web developers. Many exciting functions and
MORE FREE ICONS THAN YOU WILL EVER KNOW WHAT TO DO WITH
25 Photoshop Tutorials for Designing Portfolio Sites
Read article at Vandelay Website Design Designing a quality portfolio website is a must for any aspiring designer. In