Susan Kare: Designing Icons & Graphics For the Original Mac
Y Combinator Startup PodcastFull Title
Susan Kare: Designing Icons & Graphics For the Original Mac
Summary
This episode features Susan Kare, a pioneering graphic designer, discussing her formative experiences creating icons and graphics for the original Macintosh.
Kare shares insights into her design process, the constraints she worked under, and the lasting impact of her work on user interface design, reflecting on her career and offering advice to aspiring designers.
Key Points
- Susan Kare's transition from an art major to the "Macintosh artist" at Apple was driven by her friend Andy Hertzfeld and her own desire for collaborative work, despite her unconventional background of welding and art history.
- The early Macintosh design was guided by the principle of making technology understandable and friendly for everyone, a stark contrast to the often technical and less accessible interfaces of the time.
- Design constraints, such as the 16x16 pixel limitation for icons, pushed creative solutions, emphasizing the importance of a good idea driving the final form, a lesson learned from her mentor Paul Rand.
- The iconic "Happy Mac" icon was conceived to reassure users during the computer's boot-up process, embodying the goal of creating a positive and non-intimidating user experience.
- The "bomb" icon for system failure, intended to be unseen, inadvertently caused user anxiety when it was displayed, highlighting the critical importance of clear and safe visual communication in UI design.
- Kare developed many iconic fonts and symbols, including Chicago, New York, Geneva, and the Command key symbol, often using city names and drawing inspiration from historical and everyday objects.
- The design of icons often involved iterative refinement and a focus on salient details rather than excessive ornamentation, a principle illustrated by the simplified street sign for a school crossing.
- The early Macintosh design aimed for international usability by minimizing text in its interface, relying on universally understandable icons and visual cues.
- Kare reflects on the evolution of design tools and techniques, from the early days of pixel manipulation on graph paper to more sophisticated editors, emphasizing that even with limited tools, creativity can flourish.
- The design of the "Save" icon, initially a 3.5-inch floppy disk, proved to be a design that did not age well, underscoring the preference for metaphorical representations over product-specific imagery in icon design.
- The evolution of user interface design is evident in Kare's work on Windows 3.0, where the introduction of color allowed for easier differentiation and at-a-glance comprehension.
- Kare's later work, including projects for General Magic, Facebook (where cute designs sold best), and Pinterest, demonstrates the enduring principles of intuitive and appealing design.
- She shares valuable advice from renowned designers like Paul Rand, emphasizing the importance of mastering a few tools, focusing on meaning, and respecting brand identity, contrasting this with Steve Jobs' initial approach to design contests.
- The concept of "twiddling bits" versus being a creative director, as discussed with Steve Jobs, highlights the different paths within the design and tech industry, with Kare ultimately returning to her passion for direct creation.
- Kare stresses the importance of realistic timelines and allowing for extra time in creative projects, a lesson learned from her father and futurist Paul Saffo.
- The early days of Apple involved intense work environments, with sleeping bags in cubicles, and a strong sense of camaraderie and "pirate" mentality.
- She offers a critique of showing only one option to clients or superiors, advocating for presenting multiple choices to allow for collaborative decision-making, a strategy recommended by Andy Hertzfeld for interacting with Steve Jobs.
- The enduring appeal of simple, relatable, and "cute" designs is a recurring theme, as evidenced by the success of penguin illustrations and the Kiss Mark icon on Facebook.
- Kare emphasizes that design is not an exact science and that it's important to iterate and move on to new ideas rather than getting stuck.
Conclusion
Design, especially in early computing, thrived on creativity within constraints, pushing for simplicity and universal understanding.
The best icons and graphics are those that are meaningful, memorable, and metaphorically resonant, allowing users to connect with technology on a human level.
Aspiring designers should embrace iterative processes, learn from mentors and mistakes, and focus on the core idea and its visual representation.
Discussion Topics
- What makes an icon truly timeless and universally understood across different cultures and technological eras?
- How has the evolution of design tools impacted the creative process and the final aesthetic of digital interfaces?
- Considering Susan Kare's early work, what are the most crucial lessons for modern designers aiming to create intuitive and user-friendly digital experiences?
Key Terms
- Bitmap graphics
- Digital images composed of a grid of pixels.
- Kerning
- The adjustment of space between pairs of letters.
- Typographical experience
- Knowledge and skill related to the design and use of typefaces.
- Font sample books
- Collections of different typefaces used for design reference.
- Proportionally spaced fonts
- Fonts where the width of each character varies, unlike monospaced fonts.
- Monospace font
- A font in which every character has the same width.
- MacPaint
- An early graphics editing program for the Macintosh.
- Icon editor
- Software used to create and edit icons.
- DPI (Dots Per Inch)
- A measure of print resolution, referring to the number of individual dots that can be placed within a line one inch long.
- Hex code
- A hexadecimal representation of a color value, often used in web design and programming.
- UI (User Interface)
- The visual elements and interactive components through which a user interacts with a device or software.
- Bitmap font
- A font that uses bitmaps to represent each character.
- Hieroglyphics
- A system of writing using pictorial symbols.
- Iteration
- The repetition of a process or utterance.
- Metaphor
- A figure of speech in which a word or phrase is applied to an object or action to which it is not literally applicable.
- Dithered
- A technique used in computer graphics to create the illusion of more colors than are actually available by strategically arranging pixels of available colors.
- Stealth
- Operating or acting in a disguised way.
- Pixelated
- Composed of pixels, often appearing blocky or low-resolution.
- Avatar
- A graphical representation of a user or the user's character.
- VC firm (Venture Capital firm)
- A company that invests in startups and small businesses with high growth potential.
- Stealth mode
- A phase for startups where they operate with a low public profile, often to gain a competitive advantage.
Timeline
Susan Kare introduces herself and her background in icon and graphics design for tech projects, particularly the original Macintosh.
Kare shares advice from her mentor Paul Rand: focus on making things meaningful and memorable, and that the form will follow a good idea.
Kare recounts her unlikely path to Apple as the "Macintosh artist," having previously worked as a welder and with no computer background.
Her high school friend, Andy Hertzfeld, a programmer at Apple, recruited her to create images for the new computer.
Kare prepared for her interview by studying typography and font samples, demonstrating her dedication despite her art major background.
She created sample bitmap graphics on graph paper to show her potential to Andy Hertzfeld.
Kare got the job without significant font design questions and notes that her interview notebook is now in MoMA.
She describes the initial screen of the Macintosh and the task of improving fonts and creating icons.
Kare explains the goal of making the computer accessible and friendly, avoiding technical jargon.
She discusses the importance of understanding and working within design constraints, using the 16x16 pixel limit as an example.
Kare designed the first font, Chicago, aiming for a tidier appearance with horizontals, verticals, and 45-degree angles.
She highlights the significance of proportionally spaced fonts on the Macintosh, which improved legibility.
Chicago was used in the title bar and later in the first iPod, showcasing its lasting impact.
Kare created other fonts like New York and Geneva, inspired by Times Roman and Helvetica, and a "ransom" font.
Steve Jobs suggested renaming the fonts to "world-class cities" like New York and Geneva.
Bill Atkinson, the programmer for MacPaint, collaborated with Kare on icons and patterns.
An early scanner allowed them to digitize an image of a geisha from a woodcut owned by Steve Jobs.
They aimed to use sound and speed, but avoid text, for international appeal.
Andy Hertzfeld created an icon editor, allowing Kare to toggle bits and see enlarged and actual-size icon previews.
This icon editor was considered magical despite lacking advanced features like "undo."
The editor automatically generated hex code for icons, which could then be typed in to display on screen.
Kare humorously points out an icon that appears to be "crying" but was likely due to pixel counting.
She would sometimes draw portraits of visitors on the screen as a fun exercise.
Kare discusses the development of the "Happy Mac" icon, intended to convey reassurance during the computer's boot-up.
She references Scott McCloud's book "Understanding Comics" for insights into user interface design and the idea that simpler images allow for greater user projection.
Kare explains her icon design philosophy: a few salient details, avoiding excessive clutter, similar to how street signs function for instant recognition.
She mentions designing an "unhappy Macintosh" icon, which was a sick-looking or hungover Mac.
Kare discusses the "bomb" icon for system failure, which was meant to be unseen but caused user distress.
She details the iterative process of designing icons for applications, starting with MacPaint, and the "verb and noun" pairing of application and document icons.
An icon for "alerts" depicted a cropped person to maintain universality, and a watch cursor replaced the traditional hourglass.
The print icon was too detailed, illustrating the principle of keeping icons simpler for longevity.
Kare advises against using pictures of specific product designs (like a floppy disk) for icons, recommending metaphors instead.
She explains the controversy around using multiple Apple logos in the menu, which Steve Jobs disallowed, leading to the creation of the Command key symbol.
The Command key symbol's origin is traced to a book image, resembling a four-leaf clover or a highway interchange, and was easy to draw.
The Command symbol's origin is further revealed to be from the ruins of Borgholm Castle in Sweden.
Kare compares early computer graphics and fonts to hieroglyphics, noting the long history of symbolic representation.
She discusses creating emojis by combining pictures with text on the Macintosh, predating modern texting.
Kare reflects on her childhood enjoyment of making crafts on a grid, suggesting a predisposition for grid-based design.
The core principle of her graphics work is the meaning and metaphor behind the image, not just the pixels.
She showcases icon options for Swatch, illustrating the iterative process of designing for an alarm function.
Kare believes that icons should not be too self-referential.
Her work on Windows 3.0 introduced color, significantly enhancing UI design.
She mentions playing solitaire heavily in the 90s.
Kare briefly shows images from her decades of work after Apple, before discussing advice.
She worked on General Magic, creating a logo with a literal desktop metaphor.
For Facebook, she designed virtual gifts that users could purchase for a dollar.
Kare learned that "cute" designs were the biggest sellers, like penguins and the Kiss Mark icon.
She designed icons for Pinterest, incorporating subtle animation.
Kare created a "trash panda" logo for stealthmill.com.
She created pixelated icons for Amtrak's magazine, interpreting route maps.
Kare enjoys logo design, mentioning projects like Magic Puzzle and studies for Pikmin Bloom and Paradox games.
Avatars are freeing and can represent anything, similar to gifts.
She designed badges for Ledger crypto wallets, aiming for a retro look.
Kare designed a logo for a VC firm with the concept of working outdoors.
She shares advice she has received from influential people.
Kare revisits Paul Rand, who advised that one doesn't need many fonts, but must know how to use them well.
She recounts working with Paul Rand for the NeXT logo, where Rand commanded a high fee for a single logo.
Rand's use of specific fonts and colors (like PMS 354 green) influenced Kare's own palette choices.
Rand advocated for integrating the product name into the logo, exemplified by NeXT in a cube.
Kare shows examples of Rand's work and his philosophy on logo design, critiquing the AT&T logo and praising the UPS logo's understandability.
She mentions futurist Paul Saffo's quote about the importance of allowing extra time for projects.
Her father, who studied taste and smell, offered realistic advice.
Architect Daniel Nord advised to "show, don't tell" by making things visual.
John Pagosi, known for collecting African art and having celebrity friends, shared advice with Kare.
Kare shares advice from Alan Kay about user interface design, focusing on nesting and ease of use.
Kay expressed surprise and delight that proportionally spaced fonts could look good.
A colleague at Apple advised to appreciate the present moment in the 80s.
Kare and Steve Capps sewed a pirate flag and flew it at Apple to represent their "pirate" mentality.
She discusses the joy of showing the Macintosh to people and making it feel easy to use.
Kare shares what she considers bad advice from Steve Jobs: not buying Apple stock if he wasn't, and that she couldn't make more than $20,000 "twiddling bits."
She admits to being a "bit twiddler at heart" and returned to that passion.
Kare mentions a movie shown to visiting executives that featured a welder.
Jay Chiat's ad agency for Apple, Chiat/Day, had a culture of intense work.
The ideal company size for consensus hiring and alignment is around 15 people.
Andy Hertzfeld advised showing Steve Jobs multiple options rather than just one to allow for his input and choice.
Kare shares advice from her mom.
Evan Sharp and Ben Silberman, founders of Pinterest, had good ideas, and Evan emphasized something that Kare doesn't fully recall.
Dennis Wang, an early Google employee, advised against altering the logo until it was well-known.
A friend's dad gave advice, and Kare finds a picture with an accordion amusing.
She clarifies that "quit trying" doesn't mean despair but rather moving on to the next idea.
Kare expresses gratitude to Y Combinator and reflects on how smoothly the event ran.
Episode Details
- Podcast
- Y Combinator Startup Podcast
- Episode
- Susan Kare: Designing Icons & Graphics For the Original Mac
- Official Link
- https://www.ycombinator.com/
- Published
- August 28, 2026