Susan Kare: How I Designed the Original Apple Mac Icons

The Art of Constraints [00:00:27]

• Susan Kare transitioned from welding life-size metal hogs to designing icons for the original Macintosh.
• She relied on her background in art history and typographical experience rather than formal computer training.

• Focus on making things meaningful and memorable.

Creating the Macintosh Visual Language [00:03:00]

• The design team aimed to make a computer so intuitive that it would not require a manual.
• Kare worked within a 16x16 pixel grid for icons and a 9-pixel cap height for the Chicago font.

• We wanted it to be as understandable as possible so you wouldn't necessarily need a manual.

The Birth of Iconic Fonts [00:05:00]

• Chicago was designed to prioritize readability using horizontals, verticals, and 45-degree angles.
• Fonts were named after cities on the Paoli local train line until Steve Jobs insisted on world-class city names.

• We were so lucky on the Macintosh to be able to do proportionally spaced fonts.

Tools of the Trade [00:07:34]

• Programmer Andy Hertzfeld created a custom icon editor that allowed Kare to toggle bits and see results at 72 dpi.
• The process involved manual pixel counting and iteration without the luxury of modern undo features.

• It's hard to overstate how great this was and it automatically generated the hex code for an icon.

The Happy Mac and Universal Design [00:09:40]

• The 'Happy Mac' icon was designed to provide visual comfort while the 128k machine booted up.
• Kare drew inspiration from Scott McCloud’s theories on comics, noting that simple faces allow users to project themselves onto the interface.

• When a face in particular has a lot of detail it looks like somebody else but if you make it really simple everyone can project themselves onto it.

The Unintended Consequences of Error Icons [00:11:00]

• Kare designed a bomb icon for total system failure, assuming users would never see it.
• The design backfired when a user called Apple in distress, fearing their computer was actually going to explode.

• I thought maybe it would be kind of funny to have a bomb like a Bugs Bunny type of bomb but unfortunately people did see this.

The Command Key Mystery [00:13:20]

• After Steve Jobs rejected the use of the Apple logo on the keyboard, Kare searched for a new command symbol.
• She settled on a feature key symbol from a book, later discovering it represented a 1200 AD Swedish castle.

• It had the bonus of being really easy to draw in 16 by 16 so we used that.

Lessons from Paul Rand [00:17:20]

• Kare hired Paul Rand for the NeXT logo, learning that he demanded full control and a single, definitive design.
• Rand emphasized that logos should be meaningful and understandable, even to a child.

• You will pay me a hundred thousand dollars I will do one logo and you will like it.

Designing for Facebook and Pinterest [00:19:40]

• Kare’s work on Facebook gifts taught her that 'cute' imagery, like penguins and hearts, consistently outperformed complex designs.
• She later applied her expertise to Pinterest, focusing on subtle motion to keep user engagement high without irritation.

• What I learned was that cute trumped everything it just teddy bears anything heart-shaped.

Strategies for Stakeholder Management [00:23:10]

• Andy Hertzfeld advised Kare to never show Steve Jobs just one design option, as it invited rejection.
• Presenting multiple variations allowed Jobs to be involved in the process while still leaving room for a final selection.

• Don't show him one thing because he'll say he doesn't like it because it maybe forces you to go try and do it again.

Final Reflections on Design [00:25:20]

• Kare emphasizes that design is not an exact science and that creators should be realistic about project timelines.
• She encourages designers to embrace failure as a sign to move on to the next idea.

• It isn't really just about a grid of pixels it's the metaphor and the idea and the meaning behind everything.