Graphic Design and iDiversity, pt. 2: Social Networking Chicklets

This is a continuation of my post about iDiversity graphics from a week ago. In that post, I talked about creating new logos for iDiversity, a club that gave me the responsibility of webmaster.

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.

Google Plus, Facebook, Flickr, and Twitter chicklets

Here are some of the official Google Plus, Facebook, Flickr, and Twitter 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:

Blue Google Plus, Facebook, Flickr, and Twitter chicklets

The blue version of the Google Plus, Facebook, Flickr, and Twitter chicklets for the iDiversity front page

Screenshot of the front page element with the blue chicklets

Here are the blue chicklets in the featured content element

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:

Old Goolge Plus, Facebook, Flickr, and Twitter chicklets

Here are the chicklets on a gray background with a more traditional look

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:

iDiversity GooglePlus, Facebook, Flickr, and Twitter chicklets

The sidebar version of the 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!

And here a couple of sites whose chicklets I really liked!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s