Badges are so web 2.0. You simply can't be a modern site with out a badge you know! In all seriousness though, how did we ever live with out these little virtual stickers of fun.

Well, it actually turns out that these little dudes do their job really really well, when used right of course. These suckers are intended to be attention grabbers. Moo.fx uses the badge to point out that their wicked javascript file is only 3kb in size, a rather important detail for those concerned with lean code, which should be everyone.

I think Dark Eye has an interesting use for it. First of all they have tons of these little suckers. They use it to highlight one of the more important bits of data associated with each of the listings on the home page, the average rating, which helps you get a quick idea what others think of it.

Then there is the comical usage as seen on Murmurs Of A Nobody . The contents of this badge are relatively pointless, it is more for entertainment value. This light hearted approach serves to show some confidence in the poets skills, while generating a casual environment.

This leaves the pointless usage. Be.Ajaxilicious has a nice little Too Cool For IE badge. Why you ask? Well I can only presume it means the site doesn't work in IE, which as far as I know shouldn't be something you brag about, much less through a design element which serves to draw as much attention as possible. To me this defies logic. But hey, who isn't to cool for IE?

Even though I mocked this in the beginning I actually think it is a rather clever device that can be put to powerful use. It can certainly draw the eye if you have something new or exceedingly important to highlight.

Sample Usage

Links

Web 2.0 Badge Photoshop Tutorial (Photoshop)

Golden Seal Tutorial (Fireworks)

Badge Tutorial (Photoshop)

Downloads

Badges eps file

Comments

neverything

4/27/2006 8:20:59 AM

Thank you for the free badges. I like them.

webzter

4/27/2006 9:43:10 AM

Can't open the file on the PC. Is it Mac only?

webzter

4/27/2006 9:59:17 AM

Can't open the file on the PC. Is it Mac only?

helgo

4/27/2006 12:13:31 PM

It's a photoshop file.

Leigh

4/27/2006 2:49:52 PM

Thanks for the badgey goodness :-)

Paul Boag

4/27/2006 5:05:52 PM

Damn, now look what you made me do! You feature my badge and I compare it to the others listed and think "thats terrible, I must redesign". SO now there is a new one on my site :) [boagworld.com]

Patrick

4/27/2006 5:55:48 PM

Opps. Looks like I linked the stinking image above to the eps file, and the text link to the ai one. I will have to fix that. I ment to just offer up the ai file. But I suppose the eps is more versital

pmarino

4/28/2006 8:45:41 AM

thanks for the badges - great looking site.

felipe tofani

4/28/2006 9:18:59 AM

once again a cool article.

and the badges are good also. thanks for them. =]

Chris

4/28/2006 9:33:45 AM

Good wholesome sweetness!

Thanks!

Kelli

4/29/2006 6:54:07 AM

Ah, thatnk's for the file, that's a nice little time-saver there. I like badges, when used appropriately, though they're a design element that can easily be overdone as well.

ish

4/30/2006 2:35:04 AM

I could be wrong, but I believe the 'too cool for ie' badge is linked to code (not sure if it's js or css or something else) that only shows the badge when the user agent string is other than ie.

So the site still workes in ie, but the badge doesn't show.

Jessy

4/30/2006 2:52:48 PM

Can't open the file on a MAC?
"Error on converting to PDF"?
Can't open in Photoshop either.

Patrick

4/30/2006 6:29:38 PM

The download is an illustrator file created in CS2

wboucek

5/1/2006 2:31:40 PM

Thank you! Nifty badges - and they opened just fine.

nick

6/7/2006 1:12:35 PM

thank you for the vector file. i did not try to open in photoshop, because i'm smart enough to know that when you download a .ai file on the internet it comes downloaded as a .ps file (postscript file) and can be dragged onto the illustrator icon in the dock. (or force opened in illustrator on the pc however the heck you do it on those dumb things.)

learn2play

6/15/2006 12:52:36 PM

thanks for the download and tutorial. i did what now looks like a cheesy one but with the little tips, my badge is certainly in the cool zone.

thanks

Luogo molto buon:) Buona fortuna!

6/23/2006 6:09:40 AM

Luogo molto buon:) Buona fortuna! http://www.ftib.org

Jim Renaud

6/28/2006 1:28:45 PM

I think once tutorials on how to make a burst or seal means the design fad is officially old and tired.

Let's get going on 3.0

flow14

6/28/2006 7:16:04 PM

I made my contribution to the badge game a while back... download your very own shiny, bezeled, gradient-sportin' scalloped badge.

paco

8/8/2006 10:23:23 PM

Badges....We don't need no stinkin' badges!

Peter

2/9/2007 7:46:48 AM

Thank you!

Make a Comment:

All fields are required & all posts are hand moderated.

NAME:

E-MAIL: (not displayed publicly)

COMMENT:

HUMAN DETECTOR:

Table of Contents

Helpful Books

Badges

Editions:

The Design Element

Sample Usage

Links

Downloads

Comments