Thoughts on Icons

Inform is a multi-platform program now, but its original home was Mac OS X. When we needed an icon for it, Andrew Hunter drew up the familiar slanting I against a compass rose. The compass was a reference to the old-school interactive fiction of adventure games, where the story was always driven by moves NORTH, EAST and so on around a map. But the metallic look of the bearings, a little like the NATO logo, gave Inform quite a modern vibe.

fig1afig1b

A compass wouldn’t have worked anyway, because Apple’s web browser Safari had already co-opted that. This was an interesting design choice on Apple’s part, and so was calling their brower “Safari” – as if the Web were a distant, half-explored continent, or even a jungle, and not a place to work or go shopping.

fig2

Inform began life as a sister application to Andrew Hunter’s other IF program, the interpreter Zoom, and so they had originally had matching icons. Here’s Zoom:

fig3

That “family look” is something you see increasingly often. Whereas CDs and books and physical packaging give their makers plenty of room for the house livery – the logo of the Acme Widget Inc., say – icons for applications are too small for that kind of branding. Instead, program suites from large software houses outside of Apple – Omni’s apps, or Microsoft Office, or the Adobe Creative Suite – tend to use matching designs. These are freshened up after every major release, so that you can see you’ve bought something new when you’ve paid a hefty upgrade fee. Adobe’s CS3 icons, riffing off the Periodic Table of the Elements, are typical of Adobe’s robustly independent stance:

fig4

These icons don’t slant, and don’t feature hand-tools, as Apple thinks they should. And they show a dawning awareness that users these days have reams of tiny icons but often can’t remember which is which, so they label themselves with clearly visible letters. Microsoft does the same, always giving the current Word icon a prominent W.

Apple is often, and sometimes fairly, accused of pushing eye-candy. When OS X’s icons first appeared in 2000, eyebrows were raised at their resolutions – icons now had to be designed at 128 by 128 pixels, and the dock magnifier meant that bluffers trying to get away with 32 by 32 would be exposed. The full photographic-range palette of colours also looked lushly indulgent. But in retrospect it was simply that OS X was the first major operating system to start fresh with modern hardware. Pixel densities and colour gamuts had vastly improved since the 1990s, and Apple didn’t want to run on legacy hardware anyway.

Apple’s cartoons retained a cartoonish look, but they were photorealistic rather than stylised – more like the ligne claire of Tintin than the sketched zaniness of Krazy Kat:

fig5afig5b

This could become pretty obsessive. I, for one, didn’t actually know what hard drives looked like when I first saw Apple’s weird icon:

fig6

But then, this was also the age of Jonathan Ives’s daringly translucent computers – of the see-through iMac. Another bold move was the use of a true three dimensional viewpoint, rather than the isometric view so effectively used on 1990s Windows icons, but which now looked rather old-fashioned:

fig7afig7b

To Apple, icons are all about the users’s point of view when sitting down to work at a table:

fig8

At any rate, Apple upped the ante in 2007, with the release of Mac OS 10.5, “Leopard”. The new maximum icon resolution was to be 512 by 512, a sixteen-fold rise in the number of pixels – though in part this compensated for the steady rise in screen dot-pitches. (The same year saw the iPhone screen reach 160 dots per inch; 40 dots per inch had been typical on mid-1990s screens. This year we’re up to about 300.)

Inform didn’t react, and nor did most existing applications, but gradually there came new apps which made a virtue of the new icons – making them share design elements with splash screens, installers, animations, and websites. “Papers”, for instance:

fig9

An isometric view again – now so old-fashioned that it was retro. But then, this one doesn’t even pretend to follow Apple’s guidelines.

* * *

By 2009 we had decided it was time to think about a larger, richer icon for Inform, one which would be coherent with other design images. We no longer needed a visual match with Zoom, because Inform had gone out into a wider world. (Zoom is for OS X and Linux only, so Windows users never see it.) Time to go back to basics and start over.

Apple’s guidelines divide up applications into different genres, each with their own conventions for icons, so that seemed a place to start. (The guidelines are a little confused here, probably to blur the issue that Apple often fudges them itself.) Apple claims to divide programs into User Applications, Viewers (aka Players), Accessories, and Utilities. Well, Inform is clearly a User Application. So:

“Mac OS X user application icons should be vibrant and inviting, and should immediately convey the application’s purpose… If the primary function of your application is creating or handling media, its icon should display the media the application creates or views. If appropriate, the icon should also contain a tool that communicates the type of task the application allows the user to accomplish… it should closely relate to the base object that it rests upon.”

On that basis Apple’s own Safari ought to have been something like a map of Kenya with a hunting rifle, but Apple went with a compass instead, perhaps on grounds of taste, perhaps because browsers traditionally have circular icons:

fig10

All the same, Safari’s disc still contrives to follow the lines of traditional Apple icons: it’s not an accident that the compass is tilted north-by-northwest, and the needle, pointing northeast, is in effect the “tool”.

…its icon should display the media the application creates…: but because IF story files have no analogues with physical existence, unlike photos, film, DVDs, handwritten letters, books, and so on, this isn’t easy.

…tool that communicates the type of task…: well, working with Inform is a sort of writing, so perhaps a pen? The trouble is, there are already plenty of icons with pens, ink and/or paper:

fig11a fig11b fig11c

The pen is so ubiquitous here that we can vaguely tell that Mariner Write is a word-processor even though it features a bronzed sprinter with a pen the size of a javelin. Mariner Write is so keen to have the pen in the correct position that the sprinter is obliged to run the wrong way, as if we’re writing right to left. But his body tilts into the wind at the correct north-by-northwest angle. In the centre is Apple’s own Pages, which has become all tool and no media – it isn’t, after all, an application for designing inkwells.

So Inform’s icon can’t compare IF creation to writing on paper, or not in any distinctive way. We need a different analogy. The next idea was IF as world-building. Perhaps a globe? But that takes us back to the web browsers. Or even a map? But that’s a rather old-school idea of IF, not much better than a compass, and anyway plenty of navigation and networking apps use maps.

The other sub-genre Inform belongs to is software creation. IDEs, or “integrated development environments” – programs for making programs – are usually thought of as “workshops”, or “workbenches”. The user is portrayed as a craftsman, surrounded by open trays of tools, rather than a creative artist, with easel and paint. (The studio in Microsoft’s “Visual Studio” sounds more like an artisan’s than an artist’s.) Here are Apple’s excellent icons for Xcode and Dashcode, its own IDEs:

fig12afig12b

So perhaps Inform should look a little like these, but for making works of art, not engineering. Where the draughtsman’s plans appear, we want an emerging work of art, but at the same time we still want a construction tool, and if possible a hammer. In Iconworld, screwdrivers are for assembly or installation, spanners for adjustments, but hammers are for primary building. I’m not sure what the metal claw-tool on Dashcode’s icon is, but I’m pretty clear that it does something permanent.

What kind of art is made with a blunt instrument? Sculpture is chiselled, but its connection to IF is remote, and besides we need a two-dimensional art form, or the desk projection won’t work.

* * *

An afternoon’s cycle ride from my house is a farmer’s field near North Leigh, Oxfordshire, where a little shed protects the mosaic floor of a villa uninhabited since the 6th century. Imagine that: a great house which was sacked, probably burned, demolished for its stone, and abandoned for 1500 mostly lawless years, and yet its single most valuable treasure survived. My own home, brick-built in 1925, could disappear without trace in well under a century, as the nearby ploughed-over village of Hampton Gay demonstrates.

Mosaic-making is a subtle art. It simulates a world with only granular details, playing games with scale, position, time. It’s somehow architectural without being obsessively geographical. It’s durable, indeed stubbornly enduring, and what is ancient may at the same time be bright and solid today. It is a two-dimensional medium, and it satisfies our idea of art that you make with a form of hammer:

fig13

Inform’s tool that communicates the type of task is in fact, if you look closely and if you are a masonry buff, not a hammer but a martellina. It’s traditionally used with a hardie, a chiselled edge against which the tesserae, the individual stones, are cut. (They look like the sort of random stones you might get in your shoe, but in fact they’re individually cut with exquisite accuracy to fit.) Propping up a little hardie in the bottom right of the image would nicely complement the hammer, but it would just clutter the icon. The hammer is colour-saturated to make it a little more cartoonish, and to increase contrast; there are also drop-shadows, though it’s never wise to look too closely into the question of where the light is coming from. Apple’s Xcode icon plays further games with its own hammer, which must be bent into a gentle curve, since you can see its claw at an angle but can’t see the base of the handle. But this hammer we left in a true three-dimensional perspective, though of course it’s wildly out of scale with the mosaic.

The mosaic needed to be a panel, not a vast floor, in order to be propped up on a workbench, as Apple’s guidelines intend. It also needed to be fairly small, a detail rather than a huge scene, or it would be impossible to recognise when reduced to icon size. And since an abstract wouldn’t be very IF, it needed to be a pictorial panel, something vibrant and inviting.

And so we chose a panel of a parrot and a guinea-fowl, balanced by a flower, with a fruit at each bird’s head. (In the icon, the head of the martellina covers up the parrot’s fruit.) This panel is now in the Pushkin Museum of Fine Arts, Moscow, and our source material was a photograph by “shakko”, though it has been extensively treated. Many mosaic floors were largely abstract, but representational panels, like this one, overflow with life. Often they seem to want to show all of creation, composed like bestiaries. Part of the art of the mosaic is to fix, in stone, something transient – birds who might take off at any moment, leaving the floor bare, or fish who will swim out of view if you blink.

* * *

So the new Inform icon was put together from two different sources, both ultimately photographic in origin. Wasn’t there something a bit shoddy about that? But then I looked more closely at Apple’s “Icon Composer” utility:

fig14

It seems that the tool that communicates the type of task for icon-making is a tube of glue. I felt better.