Timeless Design Insights from Susan Kare: Mastering UI, Iconography and Typography
Susan Kare is an iconic graphic designer, best known for her groundbreaking work on icons and user interfaces for Apple computers. As a key member of the Mac software design team in the 1980s, she created many graphical interface elements for the original Apple Macintosh.
Her minimalist yet expressive user interfaces and playful pixel icons have become the foundation of contemporary digital design, significantly advancing the "user-friendly" nature of computer interfaces.
“When symbols are meaningful and well crafted, they need not be frequently redesigned.”
Kare's career trajectory is as interesting as it is impressive. After her tenure at Apple, she continued her innovative work as Creative Director at NeXT, Steve Jobs’ company formed after his departure from Apple in 1985.
Her influence extended beyond Apple and NeXT, contributing to the design of Solitaire cards and icons for Windows 3.0. She also served as a lead product designer for Pinterest and worked as a freelancer for major companies like IBM, Sony, and Intel.
Renowned for her pioneering work in UI, iconography, and typography, Kare's insights have shaped the visual language of the digital age. Influenced by the legendary Paul Rand, her approach to design emphasizes problem-solving and simplicity—principles that remain crucial in 21st-century product design.
“I think of design as problem solving — so it’s really important to understand all the factors involved in a creative challenge (e.g. the audience, the business landscape) before working on visual solutions. I explore many avenues while brainstorming since there’s never only one ‘right’ answer.”
In interviews, Kare has shared how Paul Rand championed the effective use of a limited number of typefaces, a principle she still adheres to. Reflecting on Rand's influence, she often asks herself, "What would Paul Rand do?" when faced with design decisions.
Kare’s designs remain relevant today. For example, the command key feature and the FaceID icon used by Apple are still an integral part of Apple's design language.
Beyond her technical expertise, Kare's motto encapsulates her philosophy of balancing professionalism with passion:
"The best surfer in the water is the one having the most fun."
This metaphor expresses her belief that enjoying the creative process is as important as the result.
1) User Interface
Susan Kare's contributions to user interface design were instrumental in shaping the intuitive and visually appealing interfaces we use today. Her meticulous attention to detail and commitment to simplicity were crucial in making early Macintosh computers user-friendly. And her design was not only about aesthetics but also about usability and structure.
“I think it’s nice to have the interface offset from the data […] There’s something nice to offsetting the main panel, and having it differ from where you would be working“
In the interview with Alex Soojung-Kim Pang, she highlighted her approach to designing the User Interface by distinguishing the interface elements (like buttons and menus) from the primary content (such as documents or images) to enhance clarity and usability.
This separation helps users focus on their tasks without being distracted by the interface itself. The lesson here is to design interfaces that are visually distinct from the content they manage, ensuring that controls are easy to identify and use, which ultimately improves the overall user experience.
Offsetting the main panel from the data helps make the interface appear more organized and refined. Susan Kare mastered this art to perfection. Even when designing the Chicago font in 1982, she showcased a prototype application of the font that included a device resembling what would later be known as an iPod with a calculator.
This example clearly demonstrates the separation of panels from content, along with the pinstriping of the title bar and the detailing of UI elements like scroll bars and sliders. These design choices were driven by the need to create a clean and intuitive interface.
By ensuring elements like dots aligned perfectly and refining button designs, Kare aimed to make interfaces that were not only functional but also visually appealing.
“The first thing I really understood was the grid of black and white squares and there were 32 squares to the inch.“
The understanding of the overall layout and individual grid for panels and icons is prominently showcased in her work, particularly evident in Mac Graphics in 1982, where she was tasked with improving screen design. The refreshed appearance of the Macintosh Control Panel serves as a prime example of this mastery.
“This was the first control panel for the original macintosh and the idea was trying to make it not have any words. Use animation to give feedback, like the speeds of the key clicks or cursor blink. Have a little life to it. The idea that it doesn’t need translating.“
Susan Kare's work on the Macintosh user interface introduced several notable improvements, particularly in the realm of element offsetting and panel separation.
In the control panel design, this separation is evident, with distinct borders and spaces between various controls, such as the volume slider, date and time display, keyboard layout, and mouse settings. Each section is clearly delineated, making the UI more organized and user-friendly.
Kare's emphasis on offsetting elements also resonates with Andy Hertzfeld, an American computer scientist, who underscores the importance of making key elements noticeable in user interfaces. This philosophy aligns with the idea of emphasizing elements based on their significance and frequency of use, contributing to a more intuitive user experience.
“Andy always says that it's good in a UI to have things be noticeable, either by being bigger, or having some attention called to them by a refinement in the surface, in proportion to their importance and frequency that you use them.”
In the context of the control panel, this principle is manifested through the varied sizes and attention to detail in different sections. For example, the date and time display is centrally located and larger, reflecting its importance. The volume slider is distinct and easily accessible, emphasizing its frequent use. Such design choices ensure that users can navigate the interface efficiently, focusing on the most critical functions effortlessly.
Kare's design not only enhanced the aesthetic appeal of the Macintosh interface but also significantly improved its functionality and user experience. Her approach to UI design, combining visual clarity with practical usability, set a standard that influenced future software design profoundly.
One of the most fascinating stories from Kare's time at Apple involves the evolution of the Command key symbol. Originally, all shortcuts in the Macintosh operating system used the key. However, when Steve Jobs saw the dropdown menus filled with Apple logos, he exclaimed, “There are too many Apples! You’re using our logo in vain!” Jobs’ reaction underscored his concern that the overuse of the Apple logo would dilute its impact and significance.
Faced with the challenge of finding a suitable replacement, Kare consulted a symbol dictionary. She discovered a little-known symbol used almost exclusively in Swedish campgrounds — the ⌘ symbol, also known as the “place of interest” symbol. This symbol, characterized by its simplicity and clarity, perfectly aligned with Kare’s design philosophy. It was easily recognizable and intuitive, making it an ideal choice for the new Command key.
Her choice of the ⌘ symbol was driven by her philosophy of simplicity and clarity, ensuring that it was easily recognizable and intuitive for users. This symbol not only streamlined keyboard shortcuts but also reinforced Apple's commitment to intuitive and user-friendly design. The Command feature continues to be a central element of Apple's user interface, embodying Kare's enduring influence on digital design.
The ⌘ feature illustrates the importance of research in design, a skill mastered by Susan Kare, who earned a PhD in Fine Arts. Drawing inspiration from her deep knowledge of art history, Susan Kare once remarked:
“Sometimes I think people forget that if you study art history there is nothing new under the sun and people have been communicating with little images, using symbols before the 20th century and making letter forms out of bits and telling stories with pictures“
This quote resonates with a statement made by Tobias Van Schneider, former lead product designer and art director at Spotify. He advised:
“If you want to be a better designer, don’t study design books. Study sculpture. Study paintings. Study cars, watches, philosophers, movies, fiction, music, people. Study the world.“
As we can see, it's important to look beyond traditional design resources. Their quotes underscore the value of interdisciplinary learning and a broad exploration of the world to fuel innovation in design.
Another interesting aspect of Susan Kare's work in user interface design outside of Apple is her collaboration with Microsoft on Windows 3.0. She was instrumental in designing the iconic solitaire cards, which have become a beloved part of the Windows experience.
Later in her career, Kare became the lead product designer at Pinterest, where she contributed significantly to the platform's visual and interface design. Her work at Pinterest involved creating and refining the icons and overall visual language of the platform, enhancing user experience, and ensuring consistency across their web and mobile applications
When Susan Kare began designing, her goal for the Macintosh interface was to make computers designed for humans, and that goal guided her throughout her career. Her design approach seamlessly combined ergonomics, attention to detail, and aesthetics into a cohesive user interface.
2) Iconography
Susan Kare’s approach to iconography is encapsulated in her belief that "good icons should be more like road signs than illustrations," meaning they need to be instantly recognizable and easily understood at a glance. She’s known for maintaining a uniform style and design language across all icons to create a cohesive experience.
“Good icons should be more like road signs than illustrations, easily comprehensible, and not cluttered with extraneous detail”
Susan Kare, known as "the woman who gave the Macintosh a smile," designed hundreds of icons for the first Macintosh, including the iconic "Happy Mac," "Trash," and "Watch."
Her clear and intuitive icons revolutionized user interaction with computers, making them more accessible to the general public. Kare's designs set a standard for user-friendly iconography, serving as a model for future interface designs.
One of Susan Kare's key principles in icon design was maintaining universality. She emphasized "always make it universal," encouraging designers to create icons that everyone can relate to.
For instance, avoiding gender-specific features or distinctive traits like beards or glasses helps make icons universally recognizable. She believed that the fewer details there were, the more universal the design would be. As she put it:
“Make things that are simple so you don’t exclude anybody.”
This philosophy contrasts with the modern approach to emojis, where there can never be enough variations to represent all skin tones.
Kare also stressed the importance of simplicity, advising to keep icons straightforward and to avoid unnecessary details that could confuse users.
As we can see in the example above, Kare's design remains relevant even after 30 years. She designed the Happy Mac icon in 1984, but the simplicity and universality of the icon allowed it to be used many years later, such as in the FaceID icon.
The Happy Mac icon, as you can see, lacked specific features, which is another example of Kare's straightforward and comprehensible design. This approach enabled further iterations and allowed room for improvements or additional features.
And this principle of universality is the common theme in Susan Kare’s icons. One of her most recognizable icons was Mac Alerts, to whom she referred:
“I tried to make these that wouldn’t have a gender or an age, so it crops the face“
Susan Kare also shared a lot of great insights on designing icons, this is one of my favorites:
“I like to think that good icons are instantly recognizable-- even if someone's never seen it, you can ask them what it does, and they get it-- or it's so easy to remember that if someone tells you want it is once, it's easy to remember when you look at it. I think that's a lot to ask of a symbol, that if you tested it everyone would all have the same one-word response as its function. But I think I had then, and still have, more of a common sense than a scientific approach to that kind of thing.”
To realize how impactful the work of Susan Kare was, it’d be good to share the quote by Andy Hettzfeld, who was a member of Apple Computer's original Macintosh development team during the 1980
"It became a Mac team status symbol to be iconified by Susan."
Her icons not only served as essential navigational aids but also infused personality and warmth into an otherwise sterile digital environment. These small yet powerful pieces of art transformed the user experience, making technology more accessible and enjoyable.
3) Typography
Susan Kare is an artist and designer who not only created iconic icons and user interfaces but also revolutionized computer typography, giving it a new dimension. Her work on computer fonts, including the iconic Chicago font, has become the foundation of modern digital design.
Previously, we mentioned Susan Kare's Chicago font, designed in 1982. According to Susan, it was meant to counter the many digital fonts of the time that were "too funky and jaggedy." She aimed to make it bold and smooth, avoiding jagged edges.
The Chicago font is a proportionally spaced typeface that is easy on the eyes. With capital letters nine pixels high and seven pixels wide, it had no rounded edges, allowing for good readability. The Chicago typeface had a long lifespan as the system font, appearing in title bars and even in the first iPod.
The good readability of the Chicago font was a crucial feature because it remained legible even on low-resolution screens, improving both the usability and aesthetics of the interface.
Not only was the Chicago font easy to read, but it also provided a nostalgic feeling and a human touch, features that became hallmarks of Apple's design philosophy.
“Chicago was designed specifically for use in menus and title bars. It was my attempt to make a system/bold font with no jaggies. I was trying to optimize for screen legibility, minimize jaggies.“
Chicago became one of the most recognizable fonts in the history of technology.
It's worth mentioning that Susan Kare meticulously considered the use and context of her font designs. She also designed them with readability in mind for the low-resolution screens that were standard in the 1980s.
As previously mentioned, the Chicago font was used in the Macintosh operating system, including menus or dialogs, and as the default interface font. For smaller user interface elements, such as the names of files displayed with icons in the Finder, Apple used the neo-grotesque sans-serif typeface Geneva, a redesigned version of Helvetica.
Susan Kare also created highly decorative fonts, such as the experimental Cairo, which includes symbols and pictograms and is now exhibited at MoMA, or San Francisco, designed to mimic the ransom-note effect.
This effect involves using letters from various typefaces and styles, creating a mismatched and irregular look, reminiscent of the way ransom notes are depicted in popular media.
San Francisco is a font designed in 1984 and was used in early Mac software demos and Apple company fliers.
Susan Kare designed a series of fonts named after cities, including the previously mentioned San Francisco, Chicago, and Geneva. Another notable typeface in this series is New York.
New York is a transitional serif typeface designed in 1983 for the Macintosh computer by Susan Kare and reworked in 1988 by Charles Bigelow and Kris Holmes. Originally titled "Ardmore," it was renamed to New York before its initial release as part of the "World Class Cities" naming scheme by Apple cofounder Steve Jobs.
New York was created to offer users a serif typeface that complemented the other sans-serif fonts available on the Macintosh system. Its design aimed to provide a more traditional, book-like appearance.
New York played a role in establishing the aesthetic identity of the early Macintosh. The inclusion of a serif typeface provided a sense of sophistication and professionalism, setting the Macintosh apart from other personal computers of the era. This attention to design and usability helped solidify Apple's reputation for creating user-friendly and visually appealing technology.
It’s worth mentioning that at a time when computers were primarily limited to monospaced typefaces, Kare's work introduced a level of typographic diversity previously unseen in the digital realm. The significance of Kare's fonts cannot be overstated.
Kare played a monumental role in democratizing graphic design by creating various fonts for the Macintosh, the first computer to ship with multiple pre-installed fonts. This groundbreaking feature allowed everyday users, not just professional designers, to experiment with different fonts and styles, laying the foundation for desktop publishing.
Summary
Susan Kare's legacy in the world of design is invaluable. Her ability to transform complex concepts into simple, intuitive icons offers an essential lesson for every designer. By applying her principles of clarity, simplicity, and functionality, we can significantly enhance the quality of our projects. Drawing inspiration from Kare's work enables us to create icons and interfaces that are not only visually appealing but also intuitive and efficient for users.
Kare defined the core visual spirit and tone of Apple, infusing it with friendliness, humor, and warmth in human-computer interaction. Her influence ensures that Apple's design remains approachable and engaging.
For those interested in owning a piece of her work, Susan Kare sells prints on her website, and Areaware offers tea towels, placemats, and blankets featuring some of her iconic designs.
If you found this article intriguing or are interested in collaborating, feel free to connect with me on Twitter or visit my personal website.