We start digging into Photoshop here and designing the comments area. We start at the top, meaning the individual comments themselves (as opposed to the comment form).
We snag an avatar to work with. We’ll be using the Gravatar service for sure, as that’s tailor made for this and integrated perfectly into WordPress. Beyond that, I’m a big fan of avatars and the feeling of personal ownership they give you on a site.
Some of this design just falls into place easily. We use a white box on gray like all modules on the site. We plop in the avatar. We make the name a link and use the link blue we’ve been using everywhere else. We put in the date of the comment using the same styling that all the dates on the site have. All the while we stay as organized as we can in Photoshop.
For comment replies, we indent the comment below a bit, trying to stay lined up with the sub-grid we’ve created. We’ll also need a link on top-level comments in which to create those replies, so we place a link in the upper right of those comments. Same link-blue as always. We use an arrow from our Entypo icon set – only there wasn’t the perfect arrow there, we had to choose one that was close and rotate it 180 degrees. That should be no problem in CSS.
To make clear that the date of the comment is also a permalink, we’ll use an icon for that as well.
We play around with where the “functionality” links should go, but don’t dwell on it too long. The only people that will ever see those are me. For the record, this is what I ended up going with.
