Point, click.
The gestures and metaphors of icon-driven computing feel so natural and effortless to us now, it seems strange to recall navigating in the digital world any other way. Until Apple’s debut of the Macintosh in 1984, however, most of our interactions with computers looked more like this:
How did we get from there to here?
The Mac wasn’t the first computer to present the user with a virtual desktop of files and folders instead of a command line and a blinking cursor. As every amateur geek historian knows, the core concepts behind the graphical user interface or GUI (including the icons, mouse, and bitmapped graphics) made their debut in 1968 in a presentation by Stanford Research Institute’s Doug Engelbart celebrated as the “mother of all demos.”
The revolutionary ideas in Engelbart’s demo were further developed at Xerox PARC, where a 24-year-old Steve Jobs took a legendary tour in 1979 that convinced him that the GUI represented the democratic future of computing. (“I thought it was the best thing I’d ever seen in my life,” he said later. “Within ten minutes, it was obvious to me that all computers would work like this someday.”) He promptly licensed the GUI technology he saw at work in a non-commercial product called the Xerox Alto for a modest amount of Apple stock, and the rest is Silicon Valley history.
Shortly thereafter, Xerox doomed its chances to own the icon-driven future by pouring its resources into the Xerox Star, a product aimed strictly at the corporate market. Each Star purchase required an initial $75,000 installation and a network of external file servers, plus another $16,000 for each additional workstation (twice the price of a new car at the time). A digital revolution for the masses, it wasn’t.
The genius of Steve Jobs, Jef Raskin, and the rest of the Mac team was recognizing a huge untapped market for home computing among artists, musicians, writers, and other creative weirdos who might never have cared enough to master the arcane complexities of a command-line UI or blow a fortune on hulking digital workstations.
The challenge of designing a personal computer that “the rest of us” would not only buy, but fall crazy in love with, however, required input from the kind of people who might some day be convinced to try using a Mac. Fittingly, one of the team’s most auspicious early hires was a young artist herself: Susan Kare.
After taking painting lessons as a young girl and graduating from New York University with a Ph.D. in fine arts, Kare moved to the Bay Area, where she took a curatorial job at the Fine Arts Museums of San Francisco. But she quickly felt like she was on the wrong side of the creative equation. “I’d go talk to artists in their studios for exhibitions,” she recalls, “but I really wanted to be working in my studio.”
Eventually Kare earned a commission from an Arkansas museum to sculpt a razorback hog out of steel. That was the project she was tackling in her garage in Palo Alto when she got a call from a high-school friend named Andy Hertzfeld, who was the lead software architect for the Macintosh operating system, offering her a job.
Kare’s first assignment was developing fonts for the Mac OS. At the time, digital typefaces were monospaced, meaning that both a narrow I and a broad M were wedged into the same bitmapped real estate — a vestigial legacy of the way that a typewriter platen advances, one space at a time. Jobs was determined to come up with something better for his sleek new machine, having been impressed by the grace of finely wrought letterforms in calligraphy classes he audited at Reed College, taught by the Trappist monk Robert Palladino, a disciple of master calligrapher Lloyd Reynolds. (The lasting impact of Reynolds’ instruction can also be seen in the playful cursive of the seminal West Coast Beat poets Gary Snyder and Philip Whalen, making Reynolds and Palladino the human hyperlinks between desktop publishing and Jack Kerouac’s Dharma Bums.)
For the Mac, Kare designed the first proportionally spaced digital font family that allowed text to breathe as naturally on the Mac’s white screen as it does in the pages of a book. The distinctive Jobs touch was upgrading the original monikers of these elegant typefaces from the names of train stations near Philadelphia — like Rosemont and Ardmore — to those of world-class cities like Geneva, Chicago, and New York.
Inspired by the collaborative intelligence of her fellow software designers, Kare stayed on at Apple to craft the navigational elements for Mac’s GUI. Because an application for designing icons on screen hadn’t been coded yet, she went to the University Art supply store in Palo Alto and picked up a $2.50 sketchbook so she could begin playing around with forms and ideas. In the pages of this sketchbook, which hardly anyone but Kare has seen before now*, she created the casual prototypes of a new, radically user-friendly face of computing — each square of graph paper representing a pixel on the screen.
First Kare sketched a pointing finger for the “paste” command, using a pink magic marker.
Then she sketched a paintbrush with some paint on it.
She drew a pair of scissors for the “cut” command.
And she drew a bitmapped hand — the primitive progenitor of all the “pan hands” sliding invisible sheets of paper in programs like Adobe Photoshop and Illustrator.
She sketched an icon for “stop.”
And a symbol for “danger.” (The skull-and-crossbones design would come in handy when Jobs issued one of his infamous motivational koans to the Mac team: “It’s better to be a pirate than join the Navy.” Painted on a flag, Kare’s Jolly Roger was hoisted outside of the Mac skunkworks in Bandley 3.)
And she sketched a pair of complementary bitmaps for Apple itself.
Kare also drew some frankly goofy stuff, like an icon for “auto indent” that was a bit too literal.
And two equally whimsical icons for a programming instruction called “jump.”
She also came up with ideas for a term she heard the programmers using as they raced to meet Jobs’ punishing deadlines: “debug.”
And for “boot,” she drew an icon worthy of Nancy Sinatra.
Once software was developed that enabled Kare to start brainstorming digitally, she mined ideas from everywhere: Asian art history, the geeky gadgets and toys that festooned her teammates’ cubicles, and the glyphs that Depression-era hobos chalked on walls to point the way to a sympathetic household. The symbol on every Apple command key to this day — a stylized castle seen from above — was commonly used in Swedish campgrounds to denote an interesting sightseeing destination. [Note: See comment by Lennart Regebro below for an even older citation of the design.]
Kare’s work gave the Mac a visual lexicon that was universally inviting and intuitive. Instead of thinking of each image as a tiny illustration of a real object, she aimed to design icons that were as instantly comprehensible as traffic signs.
There was an ineffably disarming and safe quality about her designs. Like their self-effacing creator — who still makes a point of surfing in the ocean several mornings a week — they radiated good vibes. To creative innovators in the ’80s who didn’t see themselves as computer geeks, Kare’s icons said: Stop stressing out about technology. Go ahead, dive in!
And dive in we did, en masse. In the Wall Street Journal recently, Steven Johnson, author of Where Good Ideas Come From and other smart books, recalled the thrill of seeing the first computer he ever considered buying: “One look at the Mac and you could tell something was different. The white screen alone seemed revolutionary, after years of reading green text on a black background. And there were typefaces! I had been obsessed with typography since my grade-school years; here was a computer that treated fonts as an art, not just a clump of pixels. The graphic interface made the screen feel like a space you wanted to inhabit, to make your own… The Mac was a machine you wanted to live in.”
Many of us are living there still; and you can find the myriad visual descendants of Kare’s sketches in desktops, laptops, tablets, and phones today.
At the same time, as hardware has become faster, cheaper, and more powerful, interface designers have moved away from spare, economical road-sign style icons, and now favor the lush, elaborately rendered, 3D virtual objects that fill up the screens of our mobile phones and tablets, complete with faux shadows and glistening highlights.
For Kare herself, the Apple years were just an initial milestone in a distinguished career that has included designing icons for the Windows and IBM OS/2 operating systems, bitmapping the virtual deck in the Windows version of Solitaire, crafting logos for startups, creating products for New York’s Museum of Modern Art, and making fine-art prints of memorable icons like the Bomb, the Watch, the Paint Can, and the taxonomically ambiguous Dogcow.
For years, thousands of Facebook users a day swapped Kare-designed birthday cakes, engagement rings, roses, and disco balls, never knowing they were made by the same artist whose smiling image of the Happy Mac greeted a generation at the threshold of a new world.
In time for the holiday season, Kare has self-published her first book, Susan Kare Icons, with copies signed by the artist available on her website. A modified version of this essay serves as the introduction, though the hand-drawn icons seen here are not included in the book.
I asked Kare if she had any feeling at the time that the work she was doing at Apple 30 years ago would be so pervasively influential. “You can set out to make a painting, but you can’t set out to make a great painting,” she told me. “If you look at that blank canvas and say, ‘Now I’m going to create a masterpiece’ — that’s just foolhardy. You just have to make the best painting you can, and if you’re lucky, people will get the message.”
[*Some of these icons were included in my presentation for Pop-Up Magazine #5 at Davies Symphony Hall in San Francisco on November 9, 2011. Thanks to the Pop-Up editors and contributors for a marvelous evening. All icons used with the permission of Susan Kare.]
I really miss the original Susan Kare city fonts, like Chicago, Geneva, New York, Monaco, London, and San Francisco. There are outline versions but they’re just not the same. I was a big fan of the Macintosh fonts and icons in the 1980s. Without knowing it I was a fan of Susan Kare!
beautiful woman with amazing artwork
An entrepreneur that hires a designer to create icons for the product he builds is a great man. It is a person that has his customers in mind. He wants them to have a great experience with his products. Such a man has real “class”. It comes from the inside, where soul lives.
He will be a great example for young people that are looking to become happy with what they will produce in their life.
I was lucky to grow up in a such environment that shaped my life that I love. The reason for my comment is to support every young person to follow his soul like Steve Jobs did.
See his 2005 Stanford Commencement Address http://www.youtube.com/watch?v=UF8uR6Z6KLc
That’s a great picture of Susan back in the day when she joined Apple, brings memories of the 80’s flooding back!
This is such an inspiring piece. I live and breathe icons, and yet take them for granted. I have linked to this article and put a visual homage at my fine art site, a new “digital etching” completed today at http://iskrafineart.typepad.com/iskrafineart/2011/12/icons-under-the-influence-new-digital-etching.html. Thank you Kare, and neurotribal world for connecting the dots, pixels, etc!
Dr. Kare’s story is one of a couple of dozen remarkable tales from the original Mac team. Andy Hertzfeld’s excellent Revolution in the Valley, ISBN 0-596-00719-1, tells hers and others, including the origin of the command key symbol. Recommended for those who want more information on Kare and the others, told from a very personal angle.
She also designed most of the Windows 3.0 icons, too.
What fun she must have had “playing” on the computer! And what a legacy!
I often think about the early days in the 1980’s when I was captivated by Mac not knowing exactly why.
After using the various versions I’ve stumbled upon and hearing Steve Jobs speak his visionary philosophy I am humbled by the artistry involved in this history. Thank you for the essay on the artist Susan Kare, perhaps marginalized and truly worthy of our respect.
mst
The symbol for Apple CMD key is still used on Swedish road signs for denote attraction of national interest.
http://www.transportstyrelsen.se/sv/Vag/Vagmarken/Lokaliseringsmarken-for-upplysning-om-serviceanlaggningar-med-mera/Sevardhet/
The symbol is the classic housemark.
Susan designed the New York font (and others) for the original Macintosh. It was her take on Times Roman, and went along with her take on Helvetica which was called Geneva.
I worked across the street, on the Lisa project, and I was a bit of a letter-design geek, and New York drove me crazy. It seemed to me that there were all sorts of differences between New York and Times Roman that made no sense typographically. So I sat down with the Resource Editor to correct what I thought were mistakes and create my own version of New York.
I quickly discovered the realities of designing a font at 72 dots per inch, which was the screen resolution of the Mac at that time. And I found that every oddity of Susan’s design was a solution to the puzzle of rendering a version of Times Roman at 72 dpi, and by golly her solutions were better than anything I could come up with.
It was very educational. Thanks, Susan.
So awesome. And profound how much has changed in such a short time!
Thanks for the article.
Since the death of Jobs and the surrounding hoopla, I have begun to understand that maybe there really are two kinds of people — those of you who look at a little icon and understand “Oh, I should click on this and I will get to where I am going,” and those of us who would rather see a verbal menu.
An informative article, thank you.
The traffic sign analogy is very interesting. I’ve always thought the UK traffic signs are the best in the world. They’re designed by Jock Kinneir and Margaret Calvert; I wonder what kind of UI designs they would have created?
Whilst Susan took inspiration from worldwide sources, her and subsequent GUI designs have a very Western and American bent. Does anyone have examples of Eastern GUI design?
I’m a developer and Unix nerd, but as many have pointed out, the CLI examples are simply to illustrate contrast.
Extremely technical people in IT often have a tendency to nitpick and take things too literally. I expect the reason many of the early UI graphics were overly complex was as a result of trying to be too literal.
You need a special combination of artist and designer to create an image that instantly conveys an abstract idea.
I for one miss the clarity of the original icons; the technicolor super-panavision of the Mac OS X icons lack the same impact for me. That may be my IT autism manifesting however!
Truly an iconic piece of history.
“Instead of thinking of each image as a tiny illustration of a real object, she aimed to design icons that were as instantly comprehensible as traffic signs”
Nice 😀
The icon now become standard in every application.
Sadly, maybe in the next decade, the save icon will be forgotten 😛
Good thing there are icons. If not, using an iPhone while driving would be completely impossible.
Using an iPhone, or any other phone, while driving is a stupid thing to do. It’s a major cause of accidents and kills people. If it’s not illegal where you are, then it should be.
Driving will be illegal in ten years. By humans, I mean.
Where would computing be without Susan Kare and other creative minded people who made computing inviting and not a mystery. I fondly recall buying my first Mac in 1984 and remember the various icons that introduced me to computing and made me a fan of Apple products and technoartists like Susan Kare.
Never mind the pedants. While I can see where the gripes are technically correct, it will be interesting to see what value the replacements (if you get them) add. It interesting to see how far back one has to reach to find a true monospaced, non anti-aliased screen image.
Sure, the command line is hairy and unforgiving but so is a table saw or a garbage disposal. This article is a nice illustration of Jobs’ obsession with design as the core of the things he wanted to make, not just a shiny veneer, as so many detractors claim — literally, in this case, as the icons were burned into the system’s ROM chip, to be referenced and displayed from there, with any needed text added in the user’s language.
While one can make the argument that there was constant evolution in user interface design, that was not the case in marketed products. The mouse dates back to the early 1960s but it took another 20 years to see it in a consumer product.
If you want to get a sense of his design vision, you could watch the video here, from a keynote Q&A, before he returned to Apple from NeXT. Listen as the MacBook Air is described, the various iOS devices sketched out, and iCloud is explained — in 1997. The best way to predict the future is to invent it, as Apple Fellow Alan Kay said. These icons and the user experience built around them were part of the idea.
Anyone who thinks the Windows command line is obsolete would have marveled at my having to use it in a fresh install of Windows 7 just last night.
I very much doubt that Kare “designed the first proportionally spaced digital font family”. TeX was released in 1978, troff even earlier (1972?), and I’m fairly sure both used proportional fonts from the beginning.
She may have been the first to design proportional fonts specifically for the use on screen (instead of for printing), however.
Actually, before the Mac there was the Lisa. Before the Lisa, there was the Star. I’d mention the Alto, but the idea of a desktop with icons wasn’t there. The Star had them, but was even more expensive than the Lisa (and had a very clunky mouse/keyboard manipulation flow).
It’s also not a steady progression from the command-line – command-lines have been present throughout computing history and even made a comeback when NeXT’s OS became the base of OSX. Command lines, as cryptic as they may appear to the uninitiated (and, quite frankly, MS-DOS didn’t make them look good – or expressive, only cryptic), are immensely powerful. They have been since the 70’s and continue progressing to this day (albeit, far from the eyes of the more casual computer users).
Also, the original Mac was largely a market failure – and had little impact on user interactions for a long time. It took years for it to dethrone Apple’s original hit, the Apple II line, as Apple’s cash-cow.
You might mention the Alto and the Star, Ricardo, and why not? I certainly did. And yes, I know about the Lisa. Did you own one? How many people you know did? Anyone? No, it wasn’t a “steady progression.” Few major evolutionary steps are.
Small pedantic note: It’s not a stylized castle. It’s a Saint Hannes cross or Saint Johns arms. It was proposed to be a symbol for “Place of interest” in Finland in the 50’s and became a traffic sign for this in Scandinavia in the 60’s, so that part is correct.
It was my favorite sign when I was a kid. I wanted to stop at every sign. 🙂
That’s interesting! And seems to be supported by this (http://en.wikipedia.org/wiki/Saint_John's_Arms ). See also Bowen knot (http://en.wikipedia.org/wiki/Bowen_knot ). I’ll check with Susan to find out where she heard it was a stylized castle. Thanks.
Lennart, I appended a note above. Thanks!
That Wikipedia link to “St. John’s Arms” got mangled in the comment — here’s what should be a working URL to the correct article:
http://en.wikipedia.org/wiki/Saint_John%27s_Arms
This is a fantastic article, thank you! I have quoted you in my pingback.
No, before Kare, the command line prompt looked nothing like your example. You’ve presented a modern antialiased font example from a high rez screen. In the olden days, fonts were usually 6×8 pixels, or if you had a really good display, 8×8. Here’s an example.
http://www.fpga4fun.com/GraphicLCDpanel4.html
Also your example of the original Chicago font looks terrible, it’s antialiased, presumably due to being rescaled. This is really opposite of everything the Chicago bitmap font was intended to be. I will offer a proper example of the font:
http://fontpark.net/en/font/pix-chicago/
Charles, thanks for your critique. The files you mention were scanned from decorative elements in Susan’s book — they were not meant to be definitive, but playful. I’m a writer, not a graphic designer. I added those visual elements because without them, the hand-sketched icons looked lonely.
Why should writers distort the truth, graphic or otherwise? No big deal, just something to consider.
Sounds good. David and Charles, if one of you guys could whip up correct graphics that fit into the space allotted for the current images (and don’t look chaotic and messy, like the ones on the fpga4fun site linked above), I’ll be happy to swap them in: steve-at-stevesilberman-dot-com. Thanks!
I could probably cook up a better Chicago font sample. Believe it or not, I have an old System 6 era Performa here that I bought for $14, just for purposes like this. I think you have to go back before System 7 to get the original non-Truetype Chicago. And this used to be my specialty at one time, producing reduced size screen shots of 1-bit Mac screens that wouldn’t get anti-aliased and blurred by the page layout software. Oh was that a lot of trouble.
I’m not sure I have the ability to produce a screen shot of a DOS era screen. Actually, sitting next to me is an even more primitive computer, a SOL-20 from ~1975, IIRC it only has a 5×7 bitmap font.
Well I’ll work on it, but tonight I have to bake pies for tomorrow’s Thanksgiving festivities. But I’ll make sure to do this for you, for Susan Kare and posterity. Those graph paper icons are wonderful. AFAIK Kare was the first artist to ever work on an OS (at least, in a capacity as an artist).
Thanks, Charles! If what you cook up fits the existing layout and looks good to me, happy to swap them in. Thanks.
Would it be possible to post higher res images of those graph paper icon designs?
Sure they wouldn’t fit the layout, but I mean, something linked so that we could see them on a separate window.
Charles, if you are whipping up a better example, then maybe get one that is a valid DOS command.
RUN is not.
You could do:
C:> dir autoexec.bat
which be a little more accurate. Although someone could type RUN autoexec.bat, it would result in an error message.
There’s no need to be so pedantic. The command line is to simply illustrate text based commands progressing to touch based icons. It’s insulting to respond to a nicely presented article with a resounding ‘No’, and accuse the writer of distorting the truth over such minor oversights.
Go to your room!
“who still makes a point of surfing in the ocean several mornings a week”
Wouldn’t that be every morning? 🙂
So she did this icons! I love her, I truly admire her work and it was time to put a face on all those little jewels.
While I appreciate the point of comparison with old DOS-based systems, the example shown above is incorrect. In this context it is like showing Windows icons and claiming they are from the Mac.
1) There is no
RUNor need to use it with batch (.bat) files. Also there is no need to specify the extension either.2) autoexec.bat is run automatically executed when the system starts. There is very few reasons anyone had to run autoexec.bat by hand.
3) The prompt is missing the current directory. It should be
C:\>There are several hairy commands in DOS, such as
dir *.*|moreto show a directory listing. May I suggest you use one of these instead?See my reply to Charles, thanks.
I commend you on your restraint in some of your replies here, Steve. To think, what havoc may ensue if someone was to take one of your slightly-syntactically-incorrect examples at face value: the horror!
Steve –
If I recall correctly, it was possible to edit and save autoexec.bat with a different configuration and run it from the command line. This made it possible to reconfigure a computer without having to reboot it.
As another poster said, no “run” command was necessary — batch files were self-executing:
C:\>autoexec.bat
You’re likely correct. Now please tell your grandmother, “It’s possible to edit and save autoexec.bat with a different configuration and run it from the command line. This makes it possible to reconfigure a computer without having to reboot it. No run command is necessary — batch files are self-executing.”
Or, you could draw a little picture that she could just click on. History has proven the latter approach to be more effective.
Now Steve, don’t get snippy. Some of us would like to see an accurate command line representation. Is that so wrong?
Come to think of it, the other poster may be right, no need for the file extension. So it would just be:
C:\>autoexec
There are plenty of other DOS commands that take arguments and are much more complex that might make a better example of DOS vs. Mac GUI if Susan wanted to make that point.
Perhaps you could forward this thread to her. I’m sure that she’d like to be accurate so ppl on blogs don’t, well, you know.
Just for the record, Mac configuration ended up getting extremely complex, everything from the order in which apps were loaded to font installation. Many hours were burned trying to get things working right on Macs when using more than the basic software, but folks have kind of forgotten that. Macs crashed plenty of times. I’m pretty sure that Grandma would have had quite a time getting all those artsy apps and fonts installed and working correctly. Just sayin’.
Other than this one small item this was an excellent article and I really enjoyed it. Keep ’em coming.
Grandma probably didn’t install alternative cursors and extra fonts or apps that diddled around with parts of the system they weren’t supposed, though a lot of users did. I remember cleaning up after them.
A fellow named Steve Wozniak was quoted some years ago on the long uptimes of some pre-OS X Macs and he attributed it to not installing any 3rd party/non-Apple software on them.
This article could easily accommodate a sidebar on the fact that OS X has a command line interface that is much more powerful than DOS but that most users never need to see or know about. I expect a lot of Windows users don’t know or care about the autoexec.bat files they have relied on. The visual correctness of the image is secondary to the fact that the DOS interface was non-intuitive and lacked built-in documentation. I doubt many people use a DOS window as a regular part of their workflow but UNIX users, including those of with OS X, do.
Great review. I wish the book had the hand-drawn icons — they’re utterly charming.
A wonderful glimpse into the development of those amazing Mac icons. Thanks for this! 🙂