@gram_design twitts

←BLOGram

  • The sketchbook of Susan Kare, the artist who gave computing a human face

    Reblogged from PlosBlogs

    By Steve Silberman
    Posted:

     

    Portrait of Susan Kare by R.J. Muna

    Graphical interface pioneer Susan Kare, photo by R.J. Muna

    Point, click.

    The gestures and metaphors of icon-driven computingfeel 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:

    Command line

    How did we get from there to here?

    iPad photo by Ben Atkin

    iPad photo by Ben Atkin, under Creative Commons license

    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.

    Icon of Steve Jobs by Susan Kare, 1983

    Steve Jobs, 1983, by Susan Kare

    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.

    Kare on the Mac development team

    Susan Kare joins the Mac team

    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.

    One of Kare's bitmapped fonts

    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.

    Susan Kare's 1983 sketchbookFirst Kare sketched a pointing finger for the “paste” command, using a pink magic marker.

    Kare's sketch for the "paste" command

    Then she sketched a paintbrush with some paint on it.

     

    Kare sketch for paintbrush icon

    She drew a pair of scissors for the “cut” command.

    Kare's sketch 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.

     

     

    Kare's sketch for a hand

    She sketched an icon for “stop.”

     

     

    Kare's sketch 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.)

     

     

    Kare sketch for "danger"

    And she sketched a pair of complementary bitmaps for Apple itself.

     

     

    Kare sketch for the Apple icon

    Kare also drew some frankly goofy stuff, like an icon for “auto indent” that was a bit too literal.

    Kare sketch for "auto indent"

    And two equally whimsical icons for a programming instruction called “jump.”


     

    Kare sketches for "jump"

    She also came up with ideas for a term she heard the programmers using as they raced to meet Jobs’ punishing deadlines: “debug.”

     

     

    Kare sketch for debug #1Kare sketch for "debug"

    And for “boot,” she drew an icon worthy of Nancy Sinatra.

    Kare sketch for "boot"

    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 command keyKare’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.

    Kare icon for "volume"

    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!

    Kare "Happy Mac" icon

    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.

    Kare icon for "trash"

    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.

    Disco ball designed by Kare for Facebook

    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.”

    Cover of "Susan Kare Icons"

    “Susan Kare Icons,” available at kareprints.com

    Etiquetas: , , , , , , Category: Featured

    Comentaris / Comentarios / Comments

    * Obligatori / Obligatorio / Required

    • Comentaris / Comentarios / Comments

    • Col·laboracions / Colaboraciones / Contributions

      Et ve de gust publicar en aquest blog temes relacionats amb disseny gràfic, publicitat, comunicació...? Contacta'ns!

      ¿Te apetece publicar en este blog temas relacionados con diseño gráfico, publicidad, comunicación...? ¡Contáctanos!

      Would you like to post at this blog issues of graphic design, advetising, communication...? Contact us!