Clear Design: Icons (part one)

The birth of the graphical user interface (GUI) also spawned the graphic icon. The ground-breaking move away from text-based systems was one of the prime differentiators between the Macintosh operating system and those that had come before it. The next year, Microsoft Windows 1.0 released, followed quickly by Word for Windows 1.0, and there was no looking back to text-based computing.

Icons at that time were 32 pixels square, rendered in no more than the sixteen system colors (when available), and these little darlings made the difference between a drab, workaday interface, and a more inviting, more intuitive work environment. My first icon project was in 1992, while working for Microsoft. The first version of the Microsoft Windows Sound System was being released with a bundled package of sounds, each of which needed a distinctive icon. I had fun putting together the sixteen tiny images in flat or isometric perspective showing bells, chimes, saws, jackhammers, and other noisy things.  I do feel compelled to confess that with eighteen years and hundreds of design projects in between me and those icons, my memory has faded, and I’m not clear on what all of them were intended to represent—the jackhammer is clear enough, but the smartly rendered foot coming down on a banana peel is mysterious to me. I’m hoping it was a slide whistle.

Over the years, operating systems, hardware, and information graphics became more sophisticated. Better designers than I am devoted hours to telling stories or giving direction in those 32×32 pixel squares. With each version of the Mac or Windows operating system (with contributions here and there from outliers like NEXT or OS2, the art of the icon got more sophisticated. Then in November 1993, a funny thing happened.

For designers like myself who were internet-savvy (and up until then, that meant that we were working with text-based USENET applications like Telnet, or FTP protocols for transferring files) and who’d worked on multimedia projects for proprietary systems up until then, the ability of a designer to present graphics on the Web opened a world of possibility for online design. Although the neutral gray background was a drawback at first, and the necessity for having text left justified (the ‘center’ tag was a year or two out at that time) was a limitation, we designers could put artwork up, have control over headline fonts, and offer interactivity with a relatively simple bit of coding.

Of course there were other limitations: in 1994, everybody looked at the web through phone line modems of varying slowness. Worse for designers, there were still a lot of really lousy monitors around. Around that time, I remember going in to talk to someone about some freelance work and seeing my online portfolio up on a sixteen-color monitor. All of the lovely continuous-tone scans that I’d included had dithered into the sixteen system colors. Horrifying.

Fortunately, that state of affairs didn’t last long. Paragraph justification options, background colors and photos, frames, tables, streaming media, and cascading style sheets were soon to come, and the graphic web environment has just gotten richer and richer. There’s still one thing that connects contemporary Web design projects to the earliest days of computer interface graphics: the icon.

(Part Two to follow sometime soon…)

Leave a comment

No comments yet.

Comments RSS TrackBack Identifier URI

Leave a comment