Graphic Sprites

In a previous job, I used to be the Lead User Interface Designer for an enterprise level CMS (Content Management System). One of my last tasks, was to update the “New” icon. The new icon creates new records. Sounds pretty easy right? Two months after undertaking that task, the icon was still not updated. Why? The software development industry is relatively young, rapidly evolving, and surprisingly little is automated. It is full of communication issues, organizational issues, customs, values, fashions, and myths. It brings out the best and the worst in people. Personalities determine much of what happens. It is more like making movies than engineering cars.

If I paid myself a salary, I should’ve gotten at least $120 to write this article. - Jeff Knooren

I was told it was impossible to update any icon in the system. The Engineers who coded the interface had created 20 New icons over the years. They all had different file names, height/width attributes, located in different folders, yet they were essentially the same icon. Frustrating, because in software development, design is undervalued. Often no user interface design is done, or it’s considered a formality, before the “real work” of coding. organizational issues then becomes recoding, and recoding, and recoding. This is short-sighted, because you write more code in the long run. The useful debate is about doing something right from the beginning, which saves you 10x the work later on; Capture problems early.

If an engineers objective is to finish a function on time, and a designer’s objective is to make it look pretty, that isn’t teamwork. Each member needs to put trust in the expertise of the others. They should welcome a system that makes their job easier. Specific to this post, I’m talk about graphic sprites. An explanation of it can be found on AListApart. So, how the AListApart article applies to your website, is demonstrated below:

Structure

You need at least two rows, and two columns. I’ve got a 400×400px graphic divided into a 20×20 grid. The top-most row is for actions such as “Add” or “Delete”. The left column is for “Base” icons, like “Document” or “Appointment”.

Actions

An action gives you the ability to mix-n-match icons symbols, like pluses or checkmarks, with a base icon placed below it. For example a “Document” icon, combined with a “+” symbol makes a “New Document” icon.

Base Icons

Are “things” that are acted upon. One problem you will run across with this grid method, is that not every possible combination of icon will make sense. Just ignore the few unusable combinations.

Setup

My icons generally have a strong black border around them. Notice the icons are smaller than the grid. This allows me to get the best possible placement for bases and actions, because sometimes the strong black borders are too thick.

Why do this?

You’ll be able to easily compare the icons to make sure they’re a consistent set of icons, and not a hodge-podge of icons from say, windows and mac operating systems. Using this grid format and naming convention, will allow you to keep all the icons organized in one file, rather than possibly hundreds of icons scattered about your application.