Preschooler of the future: A:\ B:\ C:\ D:\ E:\ F:\ G:\ H:’
Notae Has an IconSo many of you may remember that a while back I asked for some icons for Notae and settled on one from Pascal in the end. After using the program for a while with his icon and my handmade toolbar icons I realized that the reason I wasn’t really liking what I’d made was the icons. It wasn’t a matter of skill (well, okay, for my toolbar icons it was) but it was a matter of that near-undefinable Aquaness that was lacking all around. So, I splurged. You can’t make money without spending it and you can’t sell a Mac OS X app that doesn’t look like one from the get-go (you picky Mac users), so I tossed a little green at the venture and got pixelimplosion to take a crack at the app, documents, toolbars, etc. So far, so good. Now, the downside of working with the icon all day is gaining insensitivity to it, so I take a look at some end-of-day drafts to clear things up. Generally, this has worked out well. Yet, now that we’re covered several ideas I just wanted to show them and see how they look to others who haven’t seen them and to see if my reasoning is, well, reasonable. So in the last post where I talked about this I had an idea of several sheets of parchment with a calligraphy pen as the tool. After a bit of back-and-forth the end result came to a simple icon.
After some light discussion with Bobby, however, it was agreed that my origianl idea of loose sheets was probably a little generic and unmemorable and we leaned toward a moleskine notebook, as this would be memorable these days. So, we had a first draft.
Mostly realistic, but lacking some detail, like the tassel. Looked a lot better with that added in.
After some staring, however, it became clear to me that we were lacking the one thing that makes an Mac OS X app icon an app icon: a tool. So we went back to my original idea of an ink pen and added that in, which looked pretty decent.
Now that really made it look like an app icon, in my opinion, but Bobby wasn’t entirely convinced that was final and toyed with the lighting a bit. This would be why I’m not an artist, I can’t see how lighting would change the “feel” of something when I’m creating it, but once the change is made I’ll fall into the “Oooh! Ahhh!” crowd.
Now, at this point, we kind of felt done and started talking document icons. I realized that for a document what I really wanted was one of those notebooks, but by doing so we’d have a “Where’s Waldo” game for the pen in the icon to see if it was the app or a document, so the idea of a short stack of documents came up and we tried that. Here, I think, we stand with the final icon, or at least one close to it.
That’s the one I liked the most, but that doesn’t mean it’s the best. So, what I’d like is some opinions of some of the final icons. Note that the document icon is a lot like the third icon above but in several colors (blue, green, orange — one for each file type) so that’s what’s trying to be reflected in the application icon. A. So, pick the one that you feel is best for the program. The idea I’m looking at is something easy on the eyes, easy to see, and that exemplifies “an editor for collections of notes.” So .. leave a note. 
|
|
Quotes
“It is a good sign in a nation when things are done badly. It shows that all the people are doing them. And it is bad sign in a nation when such things are done very well, for it shows that only a few experts and eccentrics are doing them, and that the nation is merely looking on.” — “Patriotism and Sport,” All Things Considered – G. K. Chesterton
i vote for B. the colors are most complimentary, and the alignment of the notebooks is more “real.”
I vote for C, as I like the earth tones better and the layout looks more real. The only way to make the a better icon would be to deepen / darken the green a bit more.
Methinks I’d vote for C (with a darkern green like mentioned above).
I suppose the icon-maker (myself) gets a vote, right?
I vote for “C” because of the alignment, as with “B”, but prefer the green/blue combination over the orange/blue combination which some colorblind folks might have problems with (blue and orange are negatives of one another).
Tempel – good point. I hadn’t thought about that.
P.S. These icons are still not “final” drafts, hence the poor antialiasing on the sides and the pen lacking some detail. Once we’ve decided which to go with, I’ll fix these things.
I vote B. I think the yellow (or not? I’m a little color-blind) in C is too much of a contrast; you can’t look away from it. Also, the use of complementary colors helps B somewhat, I think. What about one where you add more red to the lower book to make it less of a “cliché” complement?
Note to self, to check for color-blindness in images: Visicheck
I vote for B, although I think the color of the pen should be more distinctive from the color of the Moleskine.
They all have a fundamental problem. There’s no contrast between the tool and the notebook (both are black.)
Also, display the icon at 16×16 (list view) and 32×32 before deciding which looks best. Evaluating an icon design at 128×128 is “best case” not “typical case”.
The smaller sizes also helps you identify the strong elements in the design — things like the text on the icon disappear and you see that color is the branding element. You’ll also see my point about the tool & notebook at the smaller size.
C is the one I like the most — the colors are strongest and the angles work better.
-ch (the Iconfactory)
Two problems immediately present themselves:
1) The pen totally gets lost against the black cover, even at the rather large size you’re rendering on this page. At smaller sizes (e.g. for ppl who’ve shrunk their Docks, or in various menus), this will only get worse. Sticking with the Moleskine theme, consider a medium-dark brown color for the book cover, and the black pen will “pop” right out.
2) The app name is tiny, again even in your oversized renderings. I know it’s not meant to be the only way to read the name, but it is junky and hard to read at this size, and will turn into a light smear at smaller sizes. Consider just using a prominent “N” — upper or lower case, typeface of your choice.
Just my $0.02 of design consulting for today
Val,
Good points. Don’t worry about the name size, though—an icon is simply an easy way to readily identify the app.
I agree with the pen—maybe red?
Definitely B or C trending towards C. I’m starting to prefer the blue green to the blue orange.
well I obviously like the old icon... : )
but if i had to pick from A-E, i'd pick A. this is based on the assumption that most people will use Notae like a notebook, not like a stack of notebooks.
some suggestions: i think the icon should have a little more perspective, with the top being narrower and the bottom being wider, so it looks a little more like it's laying on a surface and being viewed at an angle from above. the current icon seems to float in space somewhat. making the undershadow larger toward the bottom (nearer to the viewer's eye) would help ground it as well, i think.
i'm curious what this guy will look like at smaller sizes.. you might wanna remove the 'notae' title at smaller sizes, cuz it will get lost anyway. if it were me i would take it off entirely. i can't think of any big-name app that has the app name on its icon.
also, ditto others' comments on the pen getting lost. try putting a subtle hilite all the way around the edge -- make that sucker pop!
You still get a freebie for the effort
I think I agree on the name. While I like how it looks at a large size, it does blur out when smaller, and few others have their name there.
I’m unsure about the perspective part, though. As-is, it matches the perspective of TextEdit, Xcode, Final Cut Pro, and other Apple apps, so I would think the idea to be more of “it should fit in” rather than “it should be how all others should look.” I’ll ponder it more, though.
As for the pen, I was thinking of either increasing the specular reflection and moving some lights around to make it shine some more, or making the pen a silverish color. The latter sounds like the better idea, but I like the black pen.
Nice start, but I would make a few suggestions for waht they are worth.
1) it is very dark, why not go for one colour on the cover like blue, with the name to the top, and the fountain pen in black accross it as shown?
2) I don’t like the idea of stacked note books (if you have stacked note books why not just use the loose pages). I always used one note book for all lectures and then split them up at night into separate folder. Why not go for a notebook with coloured subject dividers coming out on the left hand side. e.g. the red tab is for maths, blue tab for geography, green tab for english, orange tab for irish etc. You could even use this scheme in the program in teh future perhaps?
Anyhow I hope you find that useful.
tom.
Hmmm. Like the idea of using the moleskine notebook as an icon but I still think it needs some work. Like others have said — pen does not stand out, too dark.
I think a brown notebook like some of the actual Moleskine notebooks would be real cool. – If you are going with stacks, you can certainly have different colors like one brown, one black. I like the way (B) is stacked. – The color for the slip is too noisy. Turn down the saturation, please. Notae written on the slip is also somewhat useless when it is really small. You should have something there. So I guess keep it. – An ink pen kinda does not work. I like it. I am not familiar with the application but I would prefer another sort of pen. A good sketch pen. Even a pilot (well, actually don’t do the pilot, the writing point is too slim). Have more than one colored pen. Like colored markers. Two or three. It needs more color, either with the notebooks or the pens. – Create a little more perspective. – If you plan to use black pen with black notebook. Then add some light effects. With black, it is always going to be harder to do light effects. But you can make it better. – If you use the ink pen. Make it so you would want to touch it. Give it more texture. It won’t matter with an icon on a dock. But it will be cool when you see it in finder.
But Moleskine is a winner. Just needs tweaking here and there.
I like B. I think it looks the most natural, and the neon green is too garish. You can’t see the word on the cover.
How much cash would one have to throw in to get one icon made?
Post new comment