Rockstar Icon Designer - Kate McInnes [17]
* * *
Stampaxx: A free social media stamp collection to brand your work by Thomas and Mike
Stampaxx is a personal project. I (Thomas) made the holding page for Mike, and for that design I made the first stamp, which was the Twitter one. After posting a snapshot to Dribbble, there were quite a few people who wanted me to make a set of these stamps. So after making a few more, the success seemed to only grow and I soon decided to create a massive collection of social media stamps to offer for free. I talked about the idea with Mike, and we both decided to create a small website around these stamps, just to make it into a real and complete project.
* * *
Design Tips
A common format for web icons is transparent PNGs, but if you chose to use this file format, remember to check your target audience and the compatibility with older browsers. If a transparent PNG isn't compatible with a browser it will show the transparent area as a solid background. Internet Explorer 6 can show transparent PNGs with some extra coding but it isn't an ideal solution and can cause some compatibility issues across browsers. Some developers don't find PNG to be a problem as they have a very small percentage of users running incompatible browsers, and others will find it extremely important to design for all audiences. If you want maximum compatibility across browsers then the .GIF format is a good option as it has universal support for its transparency, however it also has the drawback of only rendering bit-transparency, which won't allow you to use gradual percentages of opacity.
With navigation icons, sometimes simple is best. Using a glyph style is a good way to assist users without distracting them from the main focus of the page. Be sure to make glyphs as clear and precise as possible. Pixel blurring is even more obvious on a symbol than it is on a regular icon. For more on precise rendering techniques go to the "Rendering Styles" section of this book.
With icons used as illustrative content for a webpage, carefully chose the style that you want to use. Icons can often infer a meaning that you may not be aware of. A common mistake is websites using highly polished icons that use Mac or PC style imagery. What can often happen when using icons in this way is that you may lead viewers to believe that you're selling software or have software to accompany a product or service. This has largely come about because of two factors. One is the popularity of web design for the application and software markets, in the uptake of this style some designers have also used the same style icons without realizing why they were used in the original designs. The other factor is free stock icons with most of the popular sets based on the Mac and PC style. I'm not saying that you cannot use polished icons for your design, but you should be aware that if you use images too similar to the ones that are already in use you will be conveying the wrong message.
Emoticons
Emotion icons, commonly known as “emoticons” are used on web forums, chat programs and even email correspondence. Considered to be an informal form of communication, there's no denying that emoticons help to convey the meaning of text that is otherwise left to the interpretation of the reader. Text-based emoticons are over 100 years old, with the earliest use dating back to 1881. Nowadays both text based and icon based emoticons are used with programs such as Google Chat and Microsoft MSN that have short-code features to insert corresponding icons into text.
Emoticons take inspiration from cartooning and use dramatic and over-emphasized facial expressions to immediately convey meaning. While the majority of an emoticon set is typically made from expressions, additional item-based emoticons can be included in a set to use as conversation markers, such as a coffee cup for “break”, a shop sign for “be right back” and thumbs up and thumbs down for “good” and “bad.”
Yolks Emoticons by “Bad-Blood”.
Design Tips
If you plan on creating a set of emoticons, start