Y Combinator Startup Podcast
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.
00:22:16 · Susan Kare
And we had the Apple, we called it the Apple menu, and there was an Apple, going to be an Apple key for these keyboard shortcuts. But Steve came in one day at the end of the day and said, You cannot do this. I think he called it an Apple farm and said, our logo is precious and we have to respect it. So, you know, we just can't have a bunch of apples. So then the idea was, I was told that that key was a command key or a feature key. And so I began thinking about commanding and it seemed kind of mean. The 10 Commandments seemed like a pun. So back to the library and I came across this image in a book that was called a feature. So I thought okay it kinda looks like a four leaf clover, that's sorta lucky. And it kinda looks like a clover leaf highway which might be a way to get somewhere fast. So we ended up, and it had the bonus of being really easy to draw in 16 by 16. So we used that and it's still on the keyboard, but I felt like a little bit bad that it didn't, it was abstract, and sometimes abstract things can be harder to remember, than something that has a metaphor that reinforces the concept. But I went to Sweden and I was so excited to get off the plane in Gothenburg and there's the feature key because it's used there to indicate that you're near, like for sightseeing, like a monument or something else. And someone from Sweden must have heard me comment on this and said, Actually, that symbol that's on the signs, Durai, is taken from a 1,200 AD castle called the Borgholm Castle and it's a ruin but when you see it from above you see that it's like a castle with four turrets and so that's actually what that symbol represents. So I thought it was fun to find out even after the fact it did look like something after all. And you know, you study art history, you know, there's not much new under the sun. People have been making little symbols for a long time, and no, I did not design this. Hieroglyphics had their day. This is a cartoon kind of showing that hieroglyphics are sort of back. And there's some really pretty nice bitmap fonts developed pretty long ago. This has only... It's like a seven pixel capital height. So I thought that was... I wish we had that person. And there's a lot of carvings with symbols and text and illustration that resembles some of the things that we were doing on the computer.
00:26:01 · Susan Kare
And again, like another extremely nice bitmap font two hundred plus years before we sat down to make our proportionally spaced fonts. Here's a very nice example. This has about a character height of like 10 pixels. And I realized that maybe I was destined or trained from a young age to wanna make things on a grid because it used to be acceptable to get little kits so your kids could make the parents an ashtray and I loved making this type of thing. And we... I like to think that there were emojis in the 1984 Macintosh that you could combine pictures with text before there was texting. And there's a few things hidden in here. It obviously had a hieroglyphic antecedent and I hid some hieroglyphic type symbols in there. But I think the whole point of that project and the graphics was it isn't really just about a grid of pixels, it's the metaphor and the idea and the meaning behind everything. So this is just a super quick run through of some icon options that I did for Swatch and they wanted an alarm. So of course I started with a clock and made it noisier and then made it look a little bit more literal and then a little louder and simpler maybe. Or maybe it should look like, oh, it's a travel alarm clock, would be in your head if you saw this. And then I thought, way too self referential, why would you want a clock on a clock? So I was making other things that looked a little bit noisy as options and like the alpha alarm clock. The point just being this is so not an exact science, and I always like to show either what a client asks for or what a programmer might have used as a placeholder because I've gotten so many good ideas that way and then maybe refine them a little bit. But after I worked at Apple, I did a job for Microsoft on Windows 3.0 and color, even if 16 colors, and some of them weren't very good colors, but it was still so nice to to be have, able to use red for alerts and to differentiate at a glance a little easier when you had color as another option. And I wanted to make something that didn't look like a garish chessboard, you know, there were a lot of illustrations like that. So this is all those 16 colors but dithered so that they appear a little more subtle. And I also did something that I guess there's always a way to get addicted to something on your screen and in the 90s a lot of people played solitaire.