As the webmaster, I get to decide the direction and aesthetic of the iDiversity website. I’ve chosen to go in a clean, colorful, and accessible direction, which, in my opinion, matches the mission and vision of the group. As such, I’ve had to reflect this aesthetic throughout the site. This brings me to the next item up for my graphic design discussion:
2. Social Networking Chicklets
Now, I have to admit, social networking chicklets are not very important to the functionality of a site. In essence, they are the buttons you click to go to an organization’s (or person’s, or whatever) presence on another social networking site (e.g., Facebook, Twitter, Google+, LinkedIn, etc.). It’s a cute way to let people find you on these sites.
Now, adding these buttons onto a website can be easy. Twitter and Facebook both have pages with downloadable icons and guidance. Flickr even has a badge creator that you can use to make your own chicklet. While I love all of these sites, some of their logos are kind of ugly (I’m looking at you, Facebook). Additionally, they most definitely do not match the aesthetic that I am trying to create on the iDiversity site. So, it was time to take matters into my own hands and create some chicklets.
The first set I made was for the front page. The front page of iDiversity has a cool little featured content element, which I wanted to use to highlight our different social networking sites. The “find us” bar is blue, so I wanted to make some graphics that were clean, simple, and matched the blue of the bar.
Technically, you aren’t supposed to mess with these graphics when you use them to advertise your presence on their social networking site (Facebook seems to be the most stringent, asking you not to mess with their logo at all. Twitter comes in at a close second, asking that you only use their little bird without changing the orientation of the bird or adding speech bubbles). I decided it was okay to fudge the rules a little, as other sites online have done. So, here are the blue versions with transparent backgrounds of the chicklets for the front page:
I had some problems using these images as clickable buttons, so I had to include them as background images for the time being. As such, I had to include text links to each social networking site underneath the image. While it looks good (to me at least!) it is not yet fully functional, although that is something I am looking to fix.
I next wanted to use these images as buttons on the side bar for all of the pages. While the blue icons look good, they are a little too “one note” to match the aesthetic of the site. So I decided to try and come up with some more interesting buttons for the sidebar.
First, I looked up a couple of button tutorials. I figured this would be a good way of creating buttons that look nice and are tried and true. I began with several tutorials and came up with these options:
While these conform better to the guidelines laid out by the different services guidelines for their logos, these buttons still looked a little too traditional and boring for the iDiversity website. They also weren’t quite as simple or colorful as I wanted the site to look. Ultimately I scrapped these chicklets and started again.
For the next version, I returned to the idea of the blue chicklets I had originally created. I decided to go from a rounded square to a circle and incorporate the colors I had previously used on the site (which would be red, yellow, green, and blue). I ended up with these chicklets:
These chicklets match the color scheme of the site, are simple and clean, and just look nice! This is the current version of chicklets used in the sidebar of the iDiversity site.
People use a lot of different designs for their chicklets. Here are a couple of links of tutorials and free downloads, in case you are interested!
- Guide to Social Web Chiclets – The NEW Twitter, Facebook and Google Buttons by Marc Frechette
- 51 Free Social Media Icon Sets by Felix
- How to Make Your Website More Social Media Friendly by The Nifty Social Media Blog
And here a couple of sites whose chicklets I really liked!