Badges Part 2
2nd edition — by Patrick McNeil — Aug. 20, 2006
The Design Element
After previously writing about badges in a somewhat light hearted way I have actually been taking them much more seriously. I have really started to notice how they can be the most eye catching element of a page and it is really ironic when you see them used in frivolous ways that add nothing and serve no purpose. On the other hand, some sites put them to marvelous use and emphasis the most important elements. From the “Buy now!” to the “hire me” or the “Love design”. These badges serve a purpose and take a prominent place in the page. Remember there is a hierarchy to a page, and you must work the scale of importance, to emphasize everything is to emphasize nothing.
This element carries so much more power and potential then some designers realize, a badge can easily be the first element to be noticed on the page. Take a look at the samples, they are bold eye catching colors. Putting something meaningless in it seems like a really bad idea. Many of the samples contain calls to action, a brilliant way to use the element to draw users to the action you want them to take. I know if I had a product to sell I would either make it a "Buy Now" badge, or I would put the most compelling reason to buy my product in the badge. If Design Meltdown needed a badge I belive it would be "Inspiration". Reduce the sites purpose to the single most important point, do you want to be hired? Do you want to sell a product? Do users need to know the site is pure spam? These little badges not only look nice, but they serve a role and can be a powerful design tool.
Sample Usage
Links
Web
2.0 Badge Photoshop Tutorial (Photoshop)
Golden
Seal Tutorial (Fireworks)
Badge Tutorial (Photoshop)
Downloads
Badges eps file
