12/09/2012: Designing with Social Network IconsWednesday, September 12, 2012 by Matt Woodward | Taxonomy: Development, Productivity, Social Networks | No Comments
I’ve been a fan of the Blueprint CSS framework for a long while. Whilst you do have to make some concessions in the way you structure your design (e.g. achieving pixel perfect layout, applying borders etc.) the framework does an awesome job of cutting down on the amount on plumbing code you have to put together to create a layout.
The creation of this framework has also inspired the development of plugins to expedite further design work, one of which has inspired some work I’ve done today. Silksprite is a plugin to allow designers to implement standard & consistently-styled icons throughout your website. I’ve used the plugin on several occasions (through different projects) to great effect and they always work well within most designs.
As I approached a new design project today, I was once again greeted with a common issue I face on most projects, implementing Social Network icons. I usually end up fighting with different icon graphics I’ve used previously (which weren’t transparent! eek!) that never quite fit the design. This quickly eats through time as I get down to meddling with pixel level colour samples to try and match the current project’s colour palette. To simplify & expedite this process for future projects, I decided to create a Silksprite-esk plugin for social networks icons, that I’ve (perhaps unimaginatively) called Socialsprite. This has been setup to mimic the way in which Silksprite works as I have found their implementation practical and uninvasive to use. Most importantly the graphics are transparent PNGs and, although not quite optimised to the same extent seen on Silksprite just yet, they certainly make implementing the icons a load easier in my designs!
Now I can simply incorporate the CSS and start implementing the classes on my elements without needing to mess with the graphics…life is good again! Check out the Socialsprite page for further information on the plugin.