October 16 2006

if you’re going to establish a standard, make sure it works

this is wrong. this is right. or better, anyway. alternatively, for ATOM perverts...Atom

Earlier in the year, Matt Brett released Feed Icons, a set of graphics based on Firefox’s RSS feed icon which were made available for people to include in websites and applications, with the intention of standardising around Firefox’s own icon. But something bugged me about it; the designer in me sees the slight discrepency in alignment of the rings and dot, and ever-so-slightly shudders in distaste. I thought it was just me, but after talking with others at d.Construct and Pub Standards recently, it appears it’s not. Apparently design is making things line up, so the anally-retentive in me (a significant portion) decided to line things up…

So here we have the standard Firefox RSS icon. Note, this is the original, not Matt Brett’s version.

It may not be wholly obvious until you look at it zoomed up, but that dot in the bottom left corner is aligned so that the rings are radiating out from the centre of the dot. Not from the bottom-left corner of the dot. Take a closer look:

See? Clearly the edges of the rings aren’t flush with the bottom and left edges of the dot. If they were, they wouldn’t be radiating from the centre of the dot, would they? Which is precisely what Matt’s version does:

If we actually want the rings to radiate, then effectively what we need to start off with is a bullseye-like arrangement of concentric circles, something like this:

Obviously the icon doesn’t have entire rings, only partial, so we need to get rid of three quarters of the outer rings.

It’s a bit of a hamfisted way of cutting things out, but eventually you’ll end up with the basic shape we’re looking for:

Now we can see that the dot is the true centre from which the rings are radiating. Overlaying this on top of the original icon you can see how they (pretty much) marry up:

After this all that’s left is to finish the Web 2.ugh effect with a rounded-corner badge. You’ve gotta have rounded corners.

How you style this shape is down to you, really, but here I’ve gone for a glossy orangey-gradienty finish with a pointless drop-shadow. More of that web 2.3 gubbins for your enjoyment:

Here’s the Photoshop file (25Kb), including paths, for the above. Use it as you see fit.

Update: Matt actually originally released his icons at the end of last year. I also found these usage guidelines written by Frank Hecker of the Mozilla Project. Interestingly, despite going to the trouble of saying the edges of the containing box can’t be squared off and must be rounded, nowhere does he mention anything about geometric alignment. I’m going to assume this wouldn’t violate those guidelines in any case.

Update #2: As my site was destroyed by my own clumsy hand recently, I’ve had to restore the text from the original stored in WordPress. This is now a mashup of both that article and a separate slightly-flameworthy comparison at the start. Not everybody will agree. YMMV.