Citizensheep » PledgeBank badge design

25 April, 2008

This post is in: Design

mySociety wants a badge for PledgeBank for adding to blogs and websites, so I had a crack at it.

I wanted to keep it clean, simple and interactive.
Sizes are in ems, so the stylesheet is easily tweaked to make the box smaller if need be.
No widths are declared, so it should fit easily into fluid layouts.
The logotype is in a heading as this makes logical sense, but only if there is a way for the user to select which level of heading it should be (it’s currently h1).
There are rounded corners specified in the stylesheet, but I’ve commented them out because I think they’re ugly. The problem is that to keep it simple I did them using the Mozilla and Webkit proprietary tags rather than images. This would be fine except I wanted the h1 to have a background colour, so it too needed rounded corners in order to fit in the rounded div. I could have done it so that the div was purple and all elements except h1 had a white background, but the corners would look bad if added to a page with a background colour in a browser that doesn’t support rounded corners. Best to comment out the styles I think (easy to change though: I’ve put them in an easy-to-find cluster at the bottom of the stylesheet, just in case).
The Creative Commons licence is just there while this is being created, and can change.