Introducing Shifticons

Last week was the launch and arrival of an internal product we’ve been working on for the past couple of months. It’s called Shifticons. We describe it as “the easiest and fastest way to create custom icon web fonts.”

As a studio, we lament the lack of certain tools that augment and support the work we do. To account for this absence in our day-to-day toolboxes, we often hack together or build out temporal devices that make the work easier. Shifticons was born out of a growing desire to have the ability to create small custom icon web fonts for projects.

In the pursuit of our craft, one of the biggest factors is speed. You’d be silly to ignore this very basic fact. Speed also is analogous to the feeling of responsiveness in this context — snappy, quick, fast. Despite having access to broadband and faster speeds than we’ve ever had before, we backed up a few steps with smartphone usage on the rampant rise. We have small canvases to contend with again and limited bandwidth, but with a spin — higher pixel densities and resolutions on pocket-size computers.

As interactive design grows up, so do our tools. As technologies become native to the browser or application without the need for third-party plug-ins, we develop ways to take advantage of those factors that make our work easier, more seamless, and more responsive.

Where we can trim the fat, we should. Custom icon web fonts allow you to pick out just the right icons you need for your project and save you the bandwidth and overhead that come with a full-fledged regular icon web font or, heaven forbid, images.

With those higher pixel densities and an ever-growing array of resolutions and screens, images make less and less sense for both bandwidth and quality concerns. Web fonts and, by association, icon web fonts allow you to serve up quality and save bandwidth.

Smaller sets of icon web fonts is one thing, but having the ability to mix and match icons together is another. Shifticons does that too — if you’re not happy with a particular “Search” icon, you can pick a complementary one from another icon set. We do this all the time with image-based icons or by creating them — finding just the right icons that convey the meaning you need them to. Why should this be any different with icon web fonts? As much as contrast is great (and you can certainly build a complementary but contrasting icon set), icons that are similar in design but with just the right details are even better. It satisfies the nitpicky designer in us without having to go the extra mile in creating custom icons for a project (though you can certainly still do that of course, and then come talk to us).

In the spirit of dogfooding, this site uses WS Std, a set of icons we’ve had loosely floating about for projects, which we expanded for Shifticons.

Shifticons is a small part in helping designers and developers make their work easier.

—

It’s the first product from The Weightshift Workshop, our recently formed internal product design arm. The Weightshift Workshop is comprised of me and Scott Robbin, and our past products include Interhoods and SitBy.Us, both of which you may be familiar with. Our current focus, of course, is Shifticons, but we have more plans to come.

For now, we invite you to take a look at Shifticons if you haven’t already and consider it as an option for your next project.

And yes, we do pronounce it Shifty-cons.

⊕ wsft.us/311