About the service
An icon set earns its keep when you can see that one hand drew it. So I start not with pictures but with the interface itself: the grid it sits on, the weight of the type, how sharp or soft the corners are, which icon sizes actually occur on your screens. Out of that comes a short sheet of rules — line weight, corner radius, optical sizes, the rhythm of the strokes — and from then on it holds across the whole set. The twentieth icon, drawn three months later, stands next to the first one and does not look like a visitor.
The motion I add is short and it means something. A rotation says the screen is working, a check mark says the tap went through, a refused field says this is not accepted. Every movement answers a question the user has just asked instead of entertaining him while he waits. I work through the three states that carry the most weight in real use: loading, success and failure. On top of them come toggles, checkboxes and buttons with their pressed, active and disabled transitions. The set is drawn in both themes from the start, because a stroke that reads beautifully on white often disappears on a dark panel.
Handing the work to a developer is part of the job, not an appendix to it. You get the sources and the export in the formats that suit the platform: light vector animation for the web, sprites or code-driven motion for mobile where that costs less in weight and battery. The numbers travel with the files: duration of every movement, easing curve, delay, the order in which parts of the icon come alive. Before handover I run the set on a weak device, because what is smooth on a work machine stutters on a three-year-old phone, and a stuttering icon reads as a bug.
What the work includes:
— a look at the current interface and a rules sheet: line weight, radii, grid, optical sizes;
— a set of icons in one style, light theme and dark theme;
— loading, success and error as three different, recognisable movements;
— toggles, checkboxes and buttons with pressed, active and disabled transitions;
— sources and export in light formats for the web and for mobile;
— a specification for the developer: duration, curve, delay and order of movement for every animation;
— a run on a weak device, with the dropped frames named and fixed;
— animation does not replace a text hint: the state is labelled with a word as well, otherwise the meaning of the movement is guessed;
— long effects get in the way inside a working interface, so duration stays within tenths of a second;
— no blinking and no harshly contrasting flashes.
The motion I add is short and it means something. A rotation says the screen is working, a check mark says the tap went through, a refused field says this is not accepted. Every movement answers a question the user has just asked instead of entertaining him while he waits. I work through the three states that carry the most weight in real use: loading, success and failure. On top of them come toggles, checkboxes and buttons with their pressed, active and disabled transitions. The set is drawn in both themes from the start, because a stroke that reads beautifully on white often disappears on a dark panel.
Handing the work to a developer is part of the job, not an appendix to it. You get the sources and the export in the formats that suit the platform: light vector animation for the web, sprites or code-driven motion for mobile where that costs less in weight and battery. The numbers travel with the files: duration of every movement, easing curve, delay, the order in which parts of the icon come alive. Before handover I run the set on a weak device, because what is smooth on a work machine stutters on a three-year-old phone, and a stuttering icon reads as a bug.
What the work includes:
— a look at the current interface and a rules sheet: line weight, radii, grid, optical sizes;
— a set of icons in one style, light theme and dark theme;
— loading, success and error as three different, recognisable movements;
— toggles, checkboxes and buttons with pressed, active and disabled transitions;
— sources and export in light formats for the web and for mobile;
— a specification for the developer: duration, curve, delay and order of movement for every animation;
— a run on a weak device, with the dropped frames named and fixed;
— animation does not replace a text hint: the state is labelled with a word as well, otherwise the meaning of the movement is guessed;
— long effects get in the way inside a working interface, so duration stays within tenths of a second;
— no blinking and no harshly contrasting flashes.
