Grégory has designed an application icon for us, this time in SVG.
I’m attaching four variants here. In each image, you see the same icon
rendered directly from SVG at 16x16, 24x24, 32x32, 64x64, and 128x128.
16x16 is the size used in window title bars. 24x24 and 32x32 are used
on some systems for selecting an application from a menu. 64x64 is the
size of desktop icons on many systems. 128x128 is used by the Dock in
MacOS X and the Avant Window Navigator in X Windows (and might also be
used by something in Vista). The smallest size, 16x16, might need some
post-rendering cleanup, e.g., to restore sharp edges. That hasn’t been
done, this is just straight rendering from SVG.
The shape in 1 is the best I think. The gradiants are nice, but I
don’t think the drop shadow works. My own order of preference would be
1, 4, then 3. But not 2.
I like #4 best.
The letter V is clean and simple with matching straight lines to the background hex.
The letter V in the others seem more lofty / fancy curves that just dont fit with the hex
I think #1 in particular is too light and looks a bit washed out.
I really like the depth that the shadows give to #2
I prefer the sharp edges of #4. I wonder what it would look like with
shadows?
What I don’t like about #1 and #5 is that the “V” doesn’t extend beyond the
hex at all, which makes the design rather static.
I’m attaching two more mockups, which I created from #5. I think these
don’t so so well at the smallest size, but are better at the larger
sizes. There’s no rule saying that our 16x16 icon has to be precisely
the same as our larger ones—we could have one hex at that size, and
several at the larger sizes where you can make them out better.
I agree that the multiple-hexs don’t work at the lower scale levels.
So, going to a single hex would make sense.
But I would keep it simple and uniform – just use the single hex from
the start.
I guess I’m a bit in the minority in liking the shadow from the “V”.
I still think it adds depth to the icon, and even works well at the
smallest size.
I like this best of all. The V shape is nice, the drop shadow is
present but subtle, the size of the V helps it stand out from the hex,
and the colors seem warm.
I think the transparency works great for the parts of the V that
extend outside the hex.
I don’t particularly like the bleed-through in the gradient inside the
hex, since I think of the hex as being a solid part of the logo. The
text I would expect to extend outside, but I would also expect that
the hex interior would not be transparent.
What I’m not happy about w/r/t #10 is that the right wing of the “V” in
this font obscures nearly the whole northeast hexside. That, combined
with the serif of the left wing of the “V” nearly hitting the northwest
vertex, makes it difficult to see at medium to small sizes what the
object in the background is.
If you can’t tell what an object is, that’s not going to be effective
as an icon. We don’t want people to think “V over a blob” when they
see it.
Putting the hex into perspective gets the sides and vertices away from
the heavy features of the “V”, which makes the hex distinguishable at
smaller sizes also contributes a sense of depth. I’ve attached two
examples of this, one with a drop shadow below the hext, and one without.
I think I prefer the non-perspective hex. Would that work for you if
the “V” got moved so as not to obscure the key hex features?
Anyway, about the latest candidates:
At the smallest size, it looks like one would want the vertex of the
“V” to be a bit lower down, so enough of the orange hex background
shows up in the inside of the V.
I think the shadow only on the hex looks a bit weird. What happens if
you also add one to the “V”? But with a perspective for the hex and
an upright V, the shadow would need to be done a bit differently.
Perhaps not worth the effort.