Articles

The Iconic Pixels of Susan Kare

by . April 23rd, 2014

YouTheDesigner talks about Susan Kare, design icon and trailblazer of digital typography. Semiotics, when applied to Graphic Design, is that bridge where pictures and language meet. It’s in essence, the art of visual association. It’s how we interpret signs, icons and visual queues. These are essential parts of UI design as this is how we hold our users hands and lead them through the various portions of our work. We make things easier with associations.

spj.rainbow

A lot of designers have a special place in their heart for Steve Jobs. Whether it’s because we favour the sleek aesthetics of a Mac (and it’s amazing font rendering), the way the iPhone revolutionised smartphones or because he practically started the idea of putting the user first with his original concept for the Macintosh. Jobs thought about what he could do to improve the mac for *everyone.* Reaching out not just to the market of people who were adept at mastering command-line UI but to the artists, writers and the crazy ones who could imagine doing more with personal computing.

But this article isn’t about Jobs, this is about a designer who made us associate the Mac with a smile. This is about Susan Kare.

Susan, after graduating with a Ph.D in Fine Arts from NYU, moved to the Bay Area where she took a curatorial job at the Fine Arts Mueseum of San Francisco. While working on a commision in her home in Palo Alto, she got a call from Andy Hertzfeld – an original member of the Apple Development team to come design some typefaces for them.

Original_Mac_fonts

Typefaces before then used to be exclusively Monospaced – each letter form having the same width and spacing as the next element. Susan changed things up by deciding to bring the  first proportionally spaced fonts to the Mac and with it – the birth of digital typography. She focused on readability for the screen the same way we treat typography for print. Kare produced type that visually appealing and scaled down when printing. Her first font was Chicago. A few of these fonts are very much so available on Apple Machines. For the updated looks of Kare’s fonts, check out the MyFont page of her works.

Kare also pioneered the concept of Dingbats. Cairo – was a fun font that played around with the idea of modern hieroglyphics. Making it easier for people to use both images with text.

But it is not just her fonts and contributions to Typography that make Susan Kare a design icon. Kare adapted iconography into the Mac’s interface. Having a limited space of 32×32 pixels she had to craft some of the symbols that have stuck with us through everyday. Susan had first started her sketches on gridded paper. Her goal was to create something that would strike up visual association while working with the set constrains.

Here are some of her sketches and drafts for the original icons.

ScreenShot2014-04-02at7.48.36PM

ScreenShot2014-04-02at7.48.57PM ScreenShot2014-04-02at7.48.10PM

bomb_icon

Susan originally worked on the user interface. Susan also created a few icons that we would now instinctively associate with Apple’s branding. Kare invented the command key, based on a stylised castle as seen from above (commonly used in Swedish Campgrounds for a place of interest). Kare’s aim was to create icons that were distinct, simple but could also call up visual queues of what she wanted them to do. This was semiotics in action.

Here are some of her more recognizable icons:

trashcan HappyMac volume commandkey

Susan Kare together with Bill Atkinson also pioneered MacPaint, a bitmap editor. You can play around with it online at CloudPaint. While limited compared to its spiritual successors like Adobe Photoshop – it’s a very interesting peek into the past.

MacpaintWP

She also designed this familiar gem for Windows:

ScreenShot2013-02-08at4_29_11PM

So where is Susan now? Still designing. She’s partnered up with various big names such as SF Water and Power, MoMA, Paypal, Facebook and a number of start ups.

modernkare

Her unique approach to art is timeless. When asked about her design philosophies, she stated:

[pullquote]My philosophy has not really changed — I really try to develop symbols that are meaningful and memorable. I started designing monochrome icons using a 32 x 32 pixel icon editor that Andy Hertzfeld created. Subsequently I’ve been able to take advantage of more robust tools and higher screen resolution, and also design vector images in Illustrator. But design problems are solved by thinking about context and metaphor — not by tools.[/pullquote]

SOURCES:

Susan’s work and the attention to the details are proof of the dedication in her craft. If you want to see more or of her stuff, you can look at her portfolio, follow her on Twitter and consider buying a print from her shop.

Are you inspired? Let us know your thoughts by leaving a comment below. You can also hit us up on our FacebookTwitter and Google+ profiles. Lastly, our RSS Feeds is open for subscription, so that you can stay creative.

ABOUT THE AUTHOR: