Y Combinator Startup Podcast
00:00:06 · Susan Kare
[00:00:06] S0: Hello. I'm Susan Kare, and now for something completely different. I've been an iconographer and designer of... Worked on a lot of tech projects, and I wanna talk about a tech startup I worked for when... Even though the Macintosh Group was part of Apple, but I think a lot of the experiences resonate with some of the topics that I've heard here today. So I've been doing this for a while and love it. Here's a few things that I designed over the years. And it's funny because this was really a North Star for the Macintosh Group, but when I reread it in the last couple of days, it just kind of reminded me of AI and so many things that are being developed now. And Paul Rand is a celebrated graphic designer, no longer with us, who did the UPS logo and IBM logo and so many images that have persisted. And I was lucky to work with him and something he told me was always focus on making things meaningful and memorable, and I think the heart of that is have a good idea and then the form will follow. I was a total art major, didn't know anything about computers and was lucky enough to work at Apple on the Macintosh as the Macintosh artist and before I went to Apple I was welding a life size Razorback hog for a museum in Arkansas and I thought I was living my dream going out to my garage, welding all day, but in truth, it was a little bit lonely and I was glad I had the experience, but it kinda made me hungry for working with a team. And my high school friend, Hertzfeld, was a system software programmer at Apple and he knew I had worked on the yearbook and liked art and he said he needed some images to display on a new computer that was being worked on. And he showed me the display, which didn't have a case, and said, Could I come in for an interview to work on some small symbols and some typefaces? And I said, sure. I thought it sounded great and really interesting and something I hadn't done before. So I thought about it. I had a little bit of typographical experience from working at the Franklin Institute Science Museum in Philadelphia. I used a machine like this to make labels for exhibits, And I was pretty good at Letraset rub down type. I could do it really straight and get the kerning right. But I went to the... And I had a PhD in Art History. So those were my credentials.
00:03:48 · Susan Kare
And I went to the library in Palo Alto and took out some books about typography and some font sample books, and I actually brought them to my interview under my arm so I would seem as if I knew what I was talking about. And Andy also suggested to me that it would be good if I could make some examples of essentially bitmap graphics, but using graph paper. And he didn't really specify what to make. So some things I made like a pun with a boot and some pieces of paper. And you could see I on this slide, there's a little bit of an ABC, but I just tried to make some examples. And these are more of the examples. Sort of funny because some of these really random things slightly influenced what we ended up using in the software. So I spoiled the surprise, but I got the job and I don't think anybody even asked me any questions about font design despite my prep. And in a funny twist of fate, as much as I had wanted to be an artist, now that notebook with those early icons that I took to my interview is in the permanent collection of MoMA. So just... So hang on... Definitely hang on to your stuff. So when I got to Apple the first day, this screen was shown to me to say this is what it's your job to improve. And fonts and the round rects that are on the five and a quarter inch floppy drawing are... Could become icons, but they were able with a cursor to click and drag those around. So it already had a little... Seemed kinda magical to me and we definitely changed Do to okay because Do It was a little off color and people read it as DOLT. So I wanted to make a new system font and make some icons. So... And it was told to me, it was very sincere that we were trying to make a computer that anyone could use, so I felt good about that because I was in that group even though I am happy to work on and have worked on many projects that weren't for me, but I like that about this project. And we wanted it to be as understandable as possible so you wouldn't necessarily need a manual and that it should be friendly because there were so many people there who in the Mac software group where I was, who were just passionate about computers and kind of wanted to be evangelical about that. So, there were a few constraints and usually I think you can be creative in any constraints.
00:07:27 · Susan Kare
You can make some pretty fun art with beach trash while you're walking around and this, you can be creative, but it's good to understand what the constraints are and then be excited about that as opposed to being upset that you don't have a thousand colors. So this is 16 by 16 black and white, and I think the first images that I made using those constraints were things like this and we thought about, you know, thought maybe a lasso would be a good way to surround an irregular region and some other art tools. And it's funny to me because I went to Paris for the first time fairly recently, and there's a street artist known as Space Invader, and he does a lot of mosaic work. And he has borrowed liberally from early Macintosh stuff, which made me really happy. So the first font I designed was Chicago. It's nine pixels tall, cap height, and I looked at the stuff that was on the screen and it just seemed as if it was all jaggedy, and it didn't seem as if it would be that big a deal to make it look tidier by using horizontals and verticals and 45 degree angles, so I still wince when I look at especially at that lowercase x, but the others I could pretty much fit into the system, and we were so lucky on the Macintosh to be able to do proportionally spaced fonts because I could remember just seeing displays where the M was really squished and then the I was really wide. So, I didn't realize what a big deal this advancement was, but it seemed to make it look a lot better. And so we used Chicago, we put it in the title bar, experimented a lot till we came up with those lines. And what we didn't realize was that when we designed the calculator that we were designing the first iPod, which also used Chicago, which made me happy. And we shipped some other fonts with the Mac, including a monospace font, but I was able to kind of think, well, we should probably have a Times Roman kind of thing and a Helvetica kind of thing, so that's where New York and Geneva came from. And then I made a font that I called Ransom because it was what kidnappers used to do by cutting letters out of the newspaper so they wouldn't have to reveal their handwriting and get caught.
00:10:56 · Susan Kare
And like the other fonts, Andy and I gave them city names, and because we had gone to high school near Philadelphia, we gave them names of towns on the Paoli local through the suburbs into the city, and Steve Jobs came by one afternoon. He usually came by at the end of the day and walked around softer group to see what was new, and he said, Well, city names aren't bad, but at least call them world class cities. So that's how we ended up with New York and Geneva instead of Peiholey and Wynwood and Rosemont where our high school was. Bill Atkinson was the programmer who wrote MacPaint, and that was my favorite program, of course, and was happy to collaborate on the icons and the patterns. And he developed an early scanner and that's how we got this geisha image from a woodcut that Steve Jobs owned. And we made a control panel that had animation for when you change the settings, hoping to communicate what would happen and what your choices were. And we tried obviously not to use... We could use sound, we could use speed, but we tried not to have any text so that it could be international without having to make a different version. And, you know, we didn't have that many really great tools for art, but whatever. We forged ahead. Andy wrote... I did not have to design on graph paper once I got to Apple. Andy wrote an icon editor, and this is an ImageWriter... A picture of an ImageWriter print of what the screen looked like with the icon editor. And there were no tools. You could just toggle the bits and you could see a greatly enlarged image as well as what the icon looked like at 72 dpi. And I thought this was just magical, even though it didn't have 20 levels of undo and you couldn't draw any shapes. You could iterate without an eraser. It's hard to overstate how great this was, and it automatically generated the hex code for an icon, which I could then type in and see the image on the screen. So it was a marvel. This icon isn't crying, it was probably me counting pixels for some reason down the edge. And you can see in the title bar, you tried a bunch of different types of things during the time we were experimenting. And sometimes I liked to... People came and sat and I would do their portrait in 32 by 32, so people seemed to enjoy that, and there wasn't really a way to get a photo in there at the time or even a drawing so just had to do it from life.
00:14:46 · Susan Kare
And I still enjoy making those portraits and I think it's kind of amazing that in A Thousand Dots if you iterate a lot you can get an image with some semblance of resemblance. You can see Pharrell Williams is at the top on the right and Ashton Kutcher under him. They did not sit for their portrait. Some people that aren't super well known, and John Maeda, who's a design leader. One of the first icons I was assigned was it took a while for the computer to boot when it got turned on, so everybody wanted an image on the screen and it had to be 32 by 32 because it was only a 128 k Macintosh. So because the computer was sitting there kind of grinding while it started up, we wanted something that showed that everything was okay. So I thought a smile was good. I'm pretty sure it came from my memory of a button I got when I was about 14 and I like smiling and happy things. Understanding Happy Mac is a play on the title of this excellent book by Scott McCloud which is about comics but really has so many good insights about user interface too. It came out ten years after the Mac originally did and I pulled two illustrations from that book by Scott McCloud that kind of explains some of the thinking behind our icons, which is that 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, and I love that idea. And he expressed a similar thing with the less detail you have, the more universal something is, which is why I think like a simple drawing of a pencil can stand for writing in some ways better than a chrome pen with a reflection which is very fancy, but it's a very particular kind of pen that not everybody might write with. So my bias in icons is a salient detail or two, but don't lard it with a lot of extra stuff, kind of similar to street signs like the sign where there's silhouette of two kids holding hands at a school crossing, and there's not a technical reason that they couldn't have plaid lunchboxes and shoelaces or be singing a song, but it would probably be more distracting and just take away from that instant recognition that you're aiming for. We made some mistakes too. I was told that as an alternative to the Happy Mac, if in the extremely unlikely event something went wrong with the Mac, there should be an unhappy Macintosh.
00:18:32 · Susan Kare
So I thought maybe a sick Macintosh looks a little hungover. And again, I could be irreverent because no one was gonna see this, at least that's what I was told. Same thing with this icon. They needed an image for total system failure, which of course again no one would ever see. So 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. And one time I was working in the softer group was a glass room, the fishbowl, and the receptionist from the front said a call had come through to Apple from a person who really needed to talk to someone in the software group, not me, about her Macintosh because the caller was worried that she was looking at a bomb and was her computer going to explode. So I felt a little guilt. But the moral of the story is lots of iteration and we started with the handful of applications that we had. And so I did MacPaint first, I remember that, and I liked the idea that since it was a process, it looked kind of active, and then it could be paired with a document that resembled it. So our system was kind of a verb and a noun, and it seemed like this could hold up pretty well because we only had maybe half a dozen applications and didn't really have the mindset that there would be thousands of applications. Same with alerts, I tried to crop a person. It's not a person with a little square head. The idea is it's a crop so you don't know the gender or the age or the hairdo or really anything about this glimpse of a person. And I had only seen a SAN timer as an egg timer. It seemed like, Hey, we're in the 80s, let's update these things. We So made a watch cursor instead of an hourglass. This was the icon for print, and it's kind of a trap. ImageWriter did have paper with holes up the sides that would fit on the sprockets to attach when you turn the big knob on the side, but again too much detail. It would have had a much longer lifespan if I had just stopped and made it simpler. So in general, I think it's not good in icons to show pictures of a particular product design because like the three and a half inch floppy for save, even though there's still a few of those kicking around, but obviously it didn't age well. Better to use a metaphor. Just enough detail. So this is what our drop down menus looked like.