Pixel art
November 22, 2011 4:03 PM Subscribe
Graphic designer Susan Kare was responsible for much of the look of the original Mac operating system. Now, you can take a peek inside the notebook where she sketched out on graph paper the icons for cut and paste. (previously)
Love this! Thanks.
It's always cool to see how these kinds of things evolve.
posted by hot_monster at 4:16 PM on November 22, 2011
It's always cool to see how these kinds of things evolve.
posted by hot_monster at 4:16 PM on November 22, 2011
That's really cool - thanks!
posted by guster4lovers at 4:24 PM on November 22, 2011
posted by guster4lovers at 4:24 PM on November 22, 2011
In case anybody doesn't already know, this nice essay is the work of one of MeFi's own: digaman.
posted by cgc373 at 4:29 PM on November 22, 2011 [4 favorites]
posted by cgc373 at 4:29 PM on November 22, 2011 [4 favorites]
This is fascinating. Thanks!
posted by pemberkins at 4:31 PM on November 22, 2011
posted by pemberkins at 4:31 PM on November 22, 2011
The original Mac system font (Chicago) is also amazing in that it had to be legible when grayed out, like when a menu option was disabled. Since the original Mac had only black and white, "gray" meant removing half the pixels via a filter. She cleverly aligned the thin strokes of each letter with the filter to remain visible, and the thick strokes looked like a fuzzy pixel-y gray.
(Also, that symbol is still used in Scandinavia. I saw it in Iceland in August.)
posted by wanderingstan at 4:35 PM on November 22, 2011 [7 favorites]
(Also, that symbol is still used in Scandinavia. I saw it in Iceland in August.)
posted by wanderingstan at 4:35 PM on November 22, 2011 [7 favorites]
The symbol on every Apple command key to this day — a stylized castle seen from above — was commonly used in Swedish campgrounds to denote an interesting sightseeing destination.
?!
When I walked around the forest as a kid and saw Command signs marking out ancient tombs, I always figured there was some deeper meaning connecting the two. I also thought it was no coincidence that Swedish saffron buns are often made in the same shape. Maybe those represent castles as well, I never would have thought. By the way, here it's absolutely common to refer to that key as "kringla" which means "pretzel". As in "you can also close the window by pressing pretzel-W". I gather you don't do that in English, probably due to a lack of saffron buns.
posted by springload at 4:43 PM on November 22, 2011 [10 favorites]
?!
When I walked around the forest as a kid and saw Command signs marking out ancient tombs, I always figured there was some deeper meaning connecting the two. I also thought it was no coincidence that Swedish saffron buns are often made in the same shape. Maybe those represent castles as well, I never would have thought. By the way, here it's absolutely common to refer to that key as "kringla" which means "pretzel". As in "you can also close the window by pressing pretzel-W". I gather you don't do that in English, probably due to a lack of saffron buns.
posted by springload at 4:43 PM on November 22, 2011 [10 favorites]
In case anybody doesn't already know, this nice essay is the work of one of MeFi's own: digaman.
I didn't know it myself. Thanks cgc373, and thanks digaman for such an interesting piece.
posted by Horace Rumpole at 4:45 PM on November 22, 2011
I didn't know it myself. Thanks cgc373, and thanks digaman for such an interesting piece.
posted by Horace Rumpole at 4:45 PM on November 22, 2011
If you've ever been tasked with designing legible icons like these, you come to understand just how good Kare's work is.
posted by Thorzdad at 4:52 PM on November 22, 2011 [4 favorites]
posted by Thorzdad at 4:52 PM on November 22, 2011 [4 favorites]
To me, the symbol has always been a cloverleaf.
posted by LogicalDash at 4:55 PM on November 22, 2011
posted by LogicalDash at 4:55 PM on November 22, 2011
I love the elegant simplicity of her early Mac icons but I'm just not a fan of those Facebook gifts. Getting a look into the sketchbook is amazing, though.
posted by sawdustbear at 5:09 PM on November 22, 2011
posted by sawdustbear at 5:09 PM on November 22, 2011
The very image of slow days at the office, mid/late 90s.
posted by epersonae at 5:15 PM on November 22, 2011 [2 favorites]
posted by epersonae at 5:15 PM on November 22, 2011 [2 favorites]
Kare's work sure is iconic! (thanks, I'll be here all week...)
Seriously though, between her Mac and Windows icons, she defined the entire field of practice for decades to come. The Macpaint interface (1984: developed by Bill Atkinson, designed by Susan Kare) is a stunning example of this. Here's a UI design from nearly 28 years ago that (minus the lack of color graphics support) full of the same icons and design of today's graphics software. It sure as hell doesn't look 28 years old, especially in an industry that as fast as tech.
More than any of that, what Susan Kare did for the first time was to try to give computers a little bit of a soul, or at least a personality. The Happy Mac icon (which would even be revived on the iPod brought life to the machine. I've always been a big fan of her Chumby designs too.
Kare then took that same ethos (along with horrifying overuse of the desktop metaphor, but that's what all the cool kids were doing back then) to the mobile space with her designs for General Magic's Magic Cap, a mobile assistant platform that was so enormously ahead of its time that virtually none of the surrounding ecosystem was there to support it. Steven Levy tells the tale beautifully. These guys, spinning off an endless research project from Apple, pretty much invented the iPhone (or at least a small iPad) in 1994, except we were missing mobile data services, WiFi, desktop sync for mail/calendar/contacts, MP3s, and all the other technologies that make such a thing really useful. They had virtual agents that would run "in the cloud" as it were, scanning your email for important messages or monitoring your flight status and alerting you only when you needed to know something. It was all too futuristic even compared to the Newton, which launched around the same time, and the years of lawsuits with Apple sure didn't help their prospects (sound like anything we'd care about today perhaps?). But dang it was fun to swish around Kare's icons with your finger and watch documents go "poof" when you deleted them. And peeking at you throughout the experience was Susan's adorable Rabbit hat logo.
Last I saw years ago, the real General Magic rabbit mascot was hanging out at the WebTV office in Mountain View. Wikipedia, absurdly helpfully, tells me that it was Phil Goldman's gray dwarf house rabbit, Bowser, which he brought with him to WebTV Networks. That rabbit, sadly like his owner, is probably no longer with us, or has at least become a senile old hopper and no longer remembers those old days, but I like to think that Bowser, immortalized in Kare's logo, is still munching his way through the tech world, bringing a bit of fun and joy to otherwise sterile environments, bringing his own Happy Mac smile to new startups. Maybe Bowser even stalked Web TV's Andy Rubin to Danger (to which Kare also contributed designs) and is still working a little magic of his own at Rubin's latest little venture. Fanciful perhaps, but much like Kare's designs, it's a fun, elegant, and simple story, and I'm going to choose to believe it.
posted by zachlipton at 5:23 PM on November 22, 2011 [7 favorites]
Seriously though, between her Mac and Windows icons, she defined the entire field of practice for decades to come. The Macpaint interface (1984: developed by Bill Atkinson, designed by Susan Kare) is a stunning example of this. Here's a UI design from nearly 28 years ago that (minus the lack of color graphics support) full of the same icons and design of today's graphics software. It sure as hell doesn't look 28 years old, especially in an industry that as fast as tech.
More than any of that, what Susan Kare did for the first time was to try to give computers a little bit of a soul, or at least a personality. The Happy Mac icon (which would even be revived on the iPod brought life to the machine. I've always been a big fan of her Chumby designs too.
Kare then took that same ethos (along with horrifying overuse of the desktop metaphor, but that's what all the cool kids were doing back then) to the mobile space with her designs for General Magic's Magic Cap, a mobile assistant platform that was so enormously ahead of its time that virtually none of the surrounding ecosystem was there to support it. Steven Levy tells the tale beautifully. These guys, spinning off an endless research project from Apple, pretty much invented the iPhone (or at least a small iPad) in 1994, except we were missing mobile data services, WiFi, desktop sync for mail/calendar/contacts, MP3s, and all the other technologies that make such a thing really useful. They had virtual agents that would run "in the cloud" as it were, scanning your email for important messages or monitoring your flight status and alerting you only when you needed to know something. It was all too futuristic even compared to the Newton, which launched around the same time, and the years of lawsuits with Apple sure didn't help their prospects (sound like anything we'd care about today perhaps?). But dang it was fun to swish around Kare's icons with your finger and watch documents go "poof" when you deleted them. And peeking at you throughout the experience was Susan's adorable Rabbit hat logo.
Last I saw years ago, the real General Magic rabbit mascot was hanging out at the WebTV office in Mountain View. Wikipedia, absurdly helpfully, tells me that it was Phil Goldman's gray dwarf house rabbit, Bowser, which he brought with him to WebTV Networks. That rabbit, sadly like his owner, is probably no longer with us, or has at least become a senile old hopper and no longer remembers those old days, but I like to think that Bowser, immortalized in Kare's logo, is still munching his way through the tech world, bringing a bit of fun and joy to otherwise sterile environments, bringing his own Happy Mac smile to new startups. Maybe Bowser even stalked Web TV's Andy Rubin to Danger (to which Kare also contributed designs) and is still working a little magic of his own at Rubin's latest little venture. Fanciful perhaps, but much like Kare's designs, it's a fun, elegant, and simple story, and I'm going to choose to believe it.
posted by zachlipton at 5:23 PM on November 22, 2011 [7 favorites]
Well, I have to say it: despite being a mac guy of 25 years standing, I just don't grok icons.
It's like they're in swahili or something. Every time I see another app with a palette chock-full of those damn little things I sigh inside. If only they'd just put all this stuff on a menu where I can read what it does in English. *Sometimes* they do, and tooltips certainly help.
But don't for a minute believe that icons "make things easier to understand" for everyone. Maybe Susan Kare's painstakingly designed and user-tested icons are intuitive for more people. But to me they're just hieroglyphics I have to learn.
I'd be happier if everything was on keystrokes or pull-right menus. The hell with those damn little things!
posted by nickp at 6:01 PM on November 22, 2011 [1 favorite]
It's like they're in swahili or something. Every time I see another app with a palette chock-full of those damn little things I sigh inside. If only they'd just put all this stuff on a menu where I can read what it does in English. *Sometimes* they do, and tooltips certainly help.
But don't for a minute believe that icons "make things easier to understand" for everyone. Maybe Susan Kare's painstakingly designed and user-tested icons are intuitive for more people. But to me they're just hieroglyphics I have to learn.
I'd be happier if everything was on keystrokes or pull-right menus. The hell with those damn little things!
posted by nickp at 6:01 PM on November 22, 2011 [1 favorite]
It wouldn't be a Mac without the icons. The idea of visuals instead of text is the *point* of the machine.
posted by grubi at 6:07 PM on November 22, 2011
posted by grubi at 6:07 PM on November 22, 2011
I love learning the backstory about how an individual has affected my life so directly, yet in such a discrete and subtle way.
posted by slogger at 6:09 PM on November 22, 2011 [1 favorite]
posted by slogger at 6:09 PM on November 22, 2011 [1 favorite]
But you were in for a world of hurt if you got to see this baby.
posted by digsrus at 6:34 PM on November 22, 2011 [2 favorites]
posted by digsrus at 6:34 PM on November 22, 2011 [2 favorites]
The story of her going to Apple kinda reminds me of the plotline for Plowing the Dark by Richard Powers... does anyone know if there's an actual connection? (cursory googling says no)
posted by Cold Lurkey at 7:20 PM on November 22, 2011
posted by Cold Lurkey at 7:20 PM on November 22, 2011
One might venture that Kare's entire body of work is iconic.
posted by Flashman at 7:35 PM on November 22, 2011 [2 favorites]
posted by Flashman at 7:35 PM on November 22, 2011 [2 favorites]
Nuh uh. The Mac OS sprang perfectly formed from Steve Job's forehead, from what I hear on TV.
Seriously, great post about somebody who actually impacted millions but is relatively unknown.
posted by benzenedream at 7:57 PM on November 22, 2011 [1 favorite]
Seriously, great post about somebody who actually impacted millions but is relatively unknown.
posted by benzenedream at 7:57 PM on November 22, 2011 [1 favorite]
I always wondered where that "command" key symbol came from! And you can count me as prefering the original Mac icons to the more recent, high-color ones, but that might just be because I love pixel art.
posted by JHarris at 8:17 PM on November 22, 2011
posted by JHarris at 8:17 PM on November 22, 2011
This is a totally great article, thanks!
posted by redsparkler at 8:17 PM on November 22, 2011
posted by redsparkler at 8:17 PM on November 22, 2011
I'd never wondered where the 'command' key symbol came from. Now I feel stupid.
posted by obiwanwasabi at 9:52 PM on November 22, 2011 [1 favorite]
posted by obiwanwasabi at 9:52 PM on November 22, 2011 [1 favorite]
And you can count me as prefering the original Mac icons to the more recent, high-color ones, but that might just be because I love pixel art.
Nearly all buttons in Lion are now "monochrome," much to the dismay of many.
posted by Threeway Handshake at 10:24 PM on November 22, 2011
Nearly all buttons in Lion are now "monochrome," much to the dismay of many.
posted by Threeway Handshake at 10:24 PM on November 22, 2011
It wouldn't be a Mac without the icons. The idea of visuals instead of text is the *point* of the machine.
Not necessarily. As a young nerdling I ended up whiling away my summers reading borrowed copies of Inside Macintosh, dwelling particularly on the interface guidelines. The idea was to use text when it was appropriate and visuals when they were appropriate. Particularly in areas where symbols can be ambiguous or have muddled meanings culturally, icons can be a net loss. But when you're thinking about direct manipulation interfaces, actually moving around or clicking on a representative image of the thing you're manipulating can often be a win.
Seconding zachlipton's upthread love for the Chicago font. The intense beauty of it was entirely due to the hand-crafted nature of it, and Kare's attention to the font's legibility under extreme circumstances is inspiring to me.
posted by verb at 11:20 PM on November 22, 2011 [1 favorite]
Not necessarily. As a young nerdling I ended up whiling away my summers reading borrowed copies of Inside Macintosh, dwelling particularly on the interface guidelines. The idea was to use text when it was appropriate and visuals when they were appropriate. Particularly in areas where symbols can be ambiguous or have muddled meanings culturally, icons can be a net loss. But when you're thinking about direct manipulation interfaces, actually moving around or clicking on a representative image of the thing you're manipulating can often be a win.
Seconding zachlipton's upthread love for the Chicago font. The intense beauty of it was entirely due to the hand-crafted nature of it, and Kare's attention to the font's legibility under extreme circumstances is inspiring to me.
posted by verb at 11:20 PM on November 22, 2011 [1 favorite]
Count me as someone who got icons from the first time I saw a Mac back in 1984. Which is why I bought one in 1985 (still have it, still runs).
posted by tommasz at 4:33 AM on November 23, 2011
posted by tommasz at 4:33 AM on November 23, 2011
C:> RUN autoexec.bat
Really? How many things are wrong with this command line?
posted by stubby phillips at 5:21 AM on November 23, 2011 [4 favorites]
Really? How many things are wrong with this command line?
posted by stubby phillips at 5:21 AM on November 23, 2011 [4 favorites]
The symbol on every Apple command key to this day — a stylized castle seen from above — was commonly used in Swedish campgrounds to denote an interesting sightseeing destination.
When Mrs. Kabanos and I saw these signs along the roads in Iceland, we just figured the whole country had converted to OSX after the previous system completely crashed in 2008.
posted by Kabanos at 6:35 AM on November 23, 2011 [3 favorites]
When Mrs. Kabanos and I saw these signs along the roads in Iceland, we just figured the whole country had converted to OSX after the previous system completely crashed in 2008.
posted by Kabanos at 6:35 AM on November 23, 2011 [3 favorites]
Really? How many things are wrong with this command line?
even when it's right, though, it's still wrong.
posted by Vetinari at 8:02 AM on November 23, 2011 [1 favorite]
even when it's right, though, it's still wrong.
posted by Vetinari at 8:02 AM on November 23, 2011 [1 favorite]
C:> RUN autoexec.bat
Really? How many things are wrong with this command line?
I can see four things.
Really? How many things are wrong with this command line?
I can see four things.
- The prompt is missing the backslash (should be C:\>).
- Assuming that it's the default DOS prompt, there shouldn't be a space after it.
- RUN isn't a DOS command. To run a batch file, you would just type the name in.
- There's no reason to ever manually run autoexec.bat. It automatically runs on boot.
Oh my god, that auto-indent icon is the best thing ever.
posted by nicepersonality at 10:30 AM on November 23, 2011
posted by nicepersonality at 10:30 AM on November 23, 2011
Thanks, Zixyer. I'm not sure if I'm being sarcastic or not.
Also, wanderingstan, that's incredible that it's legible when grayed out. I'd never even thought about that, and now I want to see how it worked firsthand.
posted by DoctorFedora at 2:56 PM on November 23, 2011
Also, wanderingstan, that's incredible that it's legible when grayed out. I'd never even thought about that, and now I want to see how it worked firsthand.
posted by DoctorFedora at 2:56 PM on November 23, 2011
But you were in for a world of hurt if you got to see this baby.
The first time I booted my first Mac (a skinny Mac I bought from the college bookstore), I saw the sad Mac. I'd had a programming class in high school and I knew a smidge about computers, but I didn't know from Macs. It was a pain to box the computer back up again and take it back to the bookstore and get a replacement, but the icon communicated to me and my parents, who were total novices, that something was seriously wrong and that it was beyond us to fix. That was an effective icon.
posted by immlass at 3:58 PM on November 23, 2011
The first time I booted my first Mac (a skinny Mac I bought from the college bookstore), I saw the sad Mac. I'd had a programming class in high school and I knew a smidge about computers, but I didn't know from Macs. It was a pain to box the computer back up again and take it back to the bookstore and get a replacement, but the icon communicated to me and my parents, who were total novices, that something was seriously wrong and that it was beyond us to fix. That was an effective icon.
posted by immlass at 3:58 PM on November 23, 2011
Oh my god, that auto-indent icon is the best thing ever.
It's been 2 days now and I still can't figure out what this "too literal" icon is supposed to be. Anybody?
posted by Flashman at 7:15 PM on November 23, 2011
It's been 2 days now and I still can't figure out what this "too literal" icon is supposed to be. Anybody?
posted by Flashman at 7:15 PM on November 23, 2011
Really? How many things are wrong with this command line?
I'll say. They'll never have enough memory free to run Tie Fighter now.
posted by obiwanwasabi at 7:31 PM on November 23, 2011 [1 favorite]
I'll say. They'll never have enough memory free to run Tie Fighter now.
posted by obiwanwasabi at 7:31 PM on November 23, 2011 [1 favorite]
It's been 2 days now and I still can't figure out what this "too literal" icon is supposed to be.
I think it's a car (auto) crashed into (in dent) a tree.
posted by unliteral at 8:03 PM on November 23, 2011
I think it's a car (auto) crashed into (in dent) a tree.
posted by unliteral at 8:03 PM on November 23, 2011
I love the bit in the story about her buying the sketchbook at University Art in Palo Alto for $2.50. It's a great store. On the rare occasions I'm down that way from up here in Davis, I like to stop by there. It would be a wonderful thing to be able to trace all the marvelous works that are created from purchases at any particular art store.
posted by Numenius at 6:09 PM on November 24, 2011
posted by Numenius at 6:09 PM on November 24, 2011
« Older Name Games | MIC CHECK! Newer »
This thread has been archived and is closed to new comments
posted by unliteral at 4:14 PM on November 22, 2011 [8 favorites]