Vector Icons and the Icon Design Contest

Forum thread started by Katisu on Mon, 2006-07-31 03:50

For those who don't subscribe to the main mailing list, there has been movement on better support for icons. Stephan Assmus has come up with a way that should allow vector icon support in R1. He also has written a new version of Icon-O-Matic to support the format. Read about it here:
http://www.freelists.org/archives/openbeos/07-2006/msg00032.html

A new set of icons will be needed for Haiku. Stephan has provided format specifications for these icons. To help develop guidelines for these icons, a basic design contest is being set up. The current expected end date for this is September 1, 2006. Read about it here:
http://www.freelists.org/archives/openbeos/07-2006/msg00043.html

As stated, he is currently expecting links to be posted to the mailing list. PM me (Katisu) if you need me to do it for you. If there is enough submissions, a web site will hopefully be set up.

Please don't be afraid to experiment and submit multiple designs, this contest is mainly to come up with ideas and guidelines for the final designs.

Comments

Re: Vector Icons and the Icon Design Contest

Katisu wrote:
As stated, he is currently expecting links to be posted to the mailing list. PM me (Katisu) if you need me to do it for you. If there is enough submissions, a web site will hopefully be set up.

As I suggested in the other thread, how about a page on the wiki for submissions? Considering it's already there looking all pretty, it'd be a shame not to use it.

Re: Vector Icons and the Icon Design Contest

Dirty Harry wrote:
Katisu wrote:
As stated, he is currently expecting links to be posted to the mailing list. PM me (Katisu) if you need me to do it for you. If there is enough submissions, a web site will hopefully be set up.

As I suggested in the other thread, how about a page on the wiki for submissions? Considering it's already there looking all pretty, it'd be a shame not to use it.

Yeah, you beat me to the post. What I get for doing multiple things at once. I'm not sure using the wiki is a good idea. Wikis are more for informational purposes than as a contest page. Also, it would be nice to have a page that allows ratings and comments without allowing to edit the whole page. In general I have to agree with Stephan for the moment. Let's wait and see how many submissions roll in at first before doing web site work.

Re: Vector Icons and the Icon Design Contest

Here's my suggestion, Tango Yellow. I'm not suggesting this is a particularly good idea, just throwing it out there for people to think about.

Disk

Folder (I made a bit of a mess of the colour change I'm afraid, but nevermind)

CD

Text

Images

Generic executable

MediaPlayer

StyledEdit

Background preferences

Advantages
1. Easy. As you can see with the exception of the folder, it's plain old Tango. All that would needed would be a few changes to the colour palette to make it more Be-like, namely for folders, the recycling bin and icons depicting the desktop, which could use Haiku's lighter blue rather than the darker shade chosen by the Tango's authors.
2. Gives us a consistent set of guidelines from which to create further, Haiku-specific icons from.
3. Collaborative. Probably means not just less work for Haiku, but for Tango in the long run.
4. Works well with grey. I'm using Tango on Windows with the classic theme and it looks pretty nifty.
5. We get both SVGs and pixmaps with Tango.

Disadvantages
1. Indistinct. Haiku should be unique and distinctive. This is at odds with the fact Tango's probably going to become pretty ubiqutous on free desktops.
2. Not Be. The icons are drawn from different palettes, and different perspectives from Be's ones.

Isometric Icons

We should stay with isometric icons. This define the UI elements for BeOS.

Borrowed Icons

http://mc.clintock.com/first_floor/study_1/desk/computer_projects/icons/ << this guy supplied the icons for Zeta. Why can't we use these? They are under a copyleft license as well.

Re: Borrowed Icons

Purposeless wrote:
http://mc.clintock.com/first_floor/study_1/desk/computer_projects/icons/ << this guy supplied the icons for Zeta. Why can't we use these? They are under a copyleft license as well.

zumi also makes very good BeOS-like icons

link for zumi

Could you post a link for the Zumi set? I haven't seen it.

Re: link for zumi

Purposeless wrote:
Could you post a link for the Zumi set? I haven't seen it.

I could only find a screenshot from mlotz' website:

http://svg.mlotz.ch/screenshots/other/zumi.png

but zuMikkebe browses these forums too :)

Vector Icons and the Icon Design Contest

I know that a lot of people are attached to the BeOS-style icons, but I also like the idea of Tango Yellow. It would be fast, and it would be easy for new users to adjust to. From there, we could use the Tango icons as starting points to create an new set . . . Tanrenga maybe?

Zumikkebe's Icons

Zumi has a couple different ones:

These are too close to the original designs:
http://xoomer.virgilio.it/mushaspot/beos-svg

Some of these might be questionably close to the original designs:
http://xoomer.virgilio.it/mushaspot/kabuto

and then there is
http://xoomer.virgilio.it/zumi/bebop

Vector Icons and the Icon Design Contest

umccullough wrote:
[...]but zuMikkebe browses these forums too :)

I sent zuMi an email, just to make sure he knows about this. 8)

Vector Icons and the Icon Design Contest

Yo Meanwhile, yo umccullough, I got your messages.

I didn't understand very well the terms of this contest, but I can show my works if you are interested.

**Kabuto Icons**
a recent screenshot, rendered using mlotz's libbsvg

http://xoomer.alice.it/mushaspot/images/kabuto-20060731.png

It uses::
-3/4 view
-standard web-palette
-gradients, not applied on flat surfaces
-shine on spherical surfaces
-outlines
-optimized for 32*32
-a lot far to be complete

**Alba Icons**

uhm, now I can't find any screenshot different than this one,rendered using mlotz's libbsvg too.

http://xoomer.alice.it/mushaspot/images/trs-20060801.png

These are some icons made for a dead project.

It uses:
-flat front/top view
-standard web-palette
-gradients
-glassy reflections
-outlines
-optimized for 64*64
-a lot, lot, lot far to be complete

Vector Icons and the Icon Design Contest

Hey zuMi,

Well, the "guidelines" are a bit open and also somewhat too technical for me to explain, so I'll leave that to others.

But: to make sure you "officially" join the contest, I think you should follow the suggestion in Katisu's first post:

Send Katisu a message using PM with the all the links in it (also the ones he posted himself in this thread).

Good Luck!

BTW, This explanation of the terms is more simple and clear, but it gives no address to send your icons/links to...

Meanwhile

Contest Submissions

Just for clarification.

At the moment, links to submissions are supposed to be mailed to the main mailing list at openbeos@freelists.org. If for some odd reason you can't do this, feel free to PM me (Katisu) and I'll see that the information gets past on.

I ask that you do the submissions as specified so that comparisons can be done easier.

32-bit PNG images of each icon in the resolutions 16x16, 32x32 and 64x64 on transparent background. (11 icons x 3 resolutions = 33 images total).

Of the following icons:
Hard disk
Folder
Trash can
CD-ROM
Text file
Image file
Person
Generic executable
Archive
Styled Edit
Screen Prefs

Please don't limit yourself to one style/one entry. As much as the old BeOS icons are liked, the general consensus is that there should be a unique style for the Haiku icons. The contest is not so much about picking a whole set of icons, but to develop a set of guidelines for how the Haiku icons should look. From there the whole set of icons will be made whether it be by an individual or a whole team.

Vector Icons and the Icon Design Contest

zuMikkebe wrote:
**Kabuto Icons**
a recent screenshot, rendered using mlotz's libbsvg
http://xoomer.alice.it/mushaspot/images/kabuto-20060731.png

I absolutely love most of the icons in the set for their boldness and cleanliness, home, email, rubix etc, but think Person is a little too MSNy? I do hope you submit more designs if you have the time.

Vector Icons and the Icon Design Contest

Thanks, as you said I gave focus especially on cleanliness , because those icons were made to look good at low res like 32x32.

About person icon...hum, i don't think it's similar to that chubby msn man, they have in common only the spherical head, nothing else; and about differnt design, there are some others, but I don't think they'll be proposed in the future:

-maranza: this was my first attempt to svg icons, round 3d icons inscribed in an hexagon, I'm thinking now I used too many gradients;

http://xoomer.alice.it/mushaspot/images/maranza-20060805.png

-garum : a recent attempt to 3D looking icons with a weird point of view; i made only 5 icons at this moment.

http://xoomer.alice.it/mushaspot/images/garum-20060805.png

Regards,
zuMi

Vector Icons and the Icon Design Contest

zuMikkebe wrote:

-maranza: this was my first attempt to svg icons, round 3d icons inscribed in an hexagon, I'm thinking now I used too many gradients;

http://xoomer.alice.it/mushaspot/images/maranza-20060805.png

-garum : a recent attempt to 3D looking icons with a weird point of view; i made only 5 icons at this moment.

http://xoomer.alice.it/mushaspot/images/garum-20060805.png

Regards,
zuMi

I would still recommend that you submit them if it isn't too much trouble. The contest is about coming up with different ideas (brainstorming). Then hopefully the best ideas can be merged together to form a unique design.

Vector Icons and the Icon Design Contest

Katisu wrote:
I would still recommend that you submit them if it isn't too much trouble. The contest is about coming up with different ideas (brainstorming). Then hopefully the best ideas can be merged together to form a unique design.

I know that, but as I wrote before there are too few icons at this moment, and I don't know when I can make the missing ones, as needed for the contest ( and "garum" is pretty hard to draw, probably I have to abandon it but I love its mirror effect).

Bye,
zuMi

Vector Icons and the Icon Design Contest

Excuse me sirs, but probably I'm going to bore someone.

I have got much time to spent in these days ( a long story made short: my cat had bladder calculi and after a surgical removal I'm at home to check its health ), so I've retouched many icons of kabuto set.

http://xoomer.alice.it/mushaspot/kabuto

But I've some doubt about folder icon, I made three versions, but I can't decide, somebody can help me?



thanks,
zuMi

Vector Icons and the Icon Design Contest

my gut instinct says bottom one. I don't relate to the open folder being turned away from me on the middle one, and I think the shadow if off-putting with the top one. The shadow on the bottom one is slightly...distracting, but out of the three, it's what I'd plump for.

That's my gut instinct, with precious little time allowed for a proper semiotic analysis of them.

Vector Icons and the Icon Design Contest

i like the first one personally, mainly for how it works within the rest of the icon set. beos icons for system discs, home directories, system directories, etc have the little added icon dropped over the lower left hand side of the icon. i really like the way that the icon seems to be coming out of the open folder in the rest of your icon set (see system-folder-home, system-folder-haiku, and the others), while still keeping it in the lower-left corner i'm used to. if you could do a mockup of how these would look with the third folder option, i'd be curious to see it.
i do agree that the second choice (with the folder opening away) doesn't seem as good maybe less welcoming and user-friendly. great job, though. i really like the way this whole set looks.

grey border around paper

I don't care for the grey border around the paper in the folder.

Vector Icons and the Icon Design Contest

zuMikkebe wrote:

This version without the shadow!

zuMikkebe, I've got to love the whole Kabuto set. I really do think using stippis vector format will do it justice - they are clean designs with detail that could be removed at smaller sizes without detracting from the look. I thought the Garum set was inspired, but I would prefer it equally without the mirror effect (I know you like it :wink: ).

What do you think about a different Preference overlay?

The tick has never meant much to me, maybe a screwdriver, spanner or a switch (similar to Stippis)

re: johndrinkwater

I made the tick because I thought every beos user knew "it equals to preferences", so I cloned it just as a legacy with the original Browne's icons.

You proposed valid suggestions, but a tool needs too many details and the switch is too much related to Mac OSX...have I to design a totally brand new concept ? It's hard, but probably I should ! ;)

the tick wins

I prefer the 'tick' mark. It also indicates ticking off preferences. I like it.

Honey, a collaborative project.

I've created a draft of "my" proposal for Haiku Icon Contest, a preview and some informations are here...
http://mockuplab.blogspot.com/2006/08/honey-experience-is-started.html

Vector Icons and the Icon Design Contest

auxman: Those are pretty sweet. I particularly like the image file icon.

very nice!

Photo-realistic Be icons! I love it! Only one I don't like is the image--the dog image isn't a very good thing to have as some people/cultures have different ideas about dogs. It also doesn't differentiate between the types of images available.

Other than that, 2 thumbs up!

Re: Honey, a collaborative project.

auxman wrote:
I've created a draft of "my" proposal for Haiku Icon Contest, a preview and some informations are here...
http://mockuplab.blogspot.com/2006/08/honey-experience-is-started.html

Oh wow. Amazing work, you've got my vote.

Re: Honey, a collaborative project.

Dirty Harry wrote:
auxman wrote:
I've created a draft of "my" proposal for Haiku Icon Contest, a preview and some informations are here...
http://mockuplab.blogspot.com/2006/08/honey-experience-is-started.html

Oh wow. Amazing work, you've got my vote.

Mine too.
Just awesome :D.

Vector Icons and the Icon Design Contest

Really gorgeous Auxman ! :o
I like the blend of realistic and cartoon look, the use of sweet colors, the BeOS legacy.. great indeed 8)

very nice!

WOW! beautiful.... best one so far.

Vector Icons and the Icon Design Contest

clieven wrote:
...if you could do a mockup of how these would look with the third folder option, i'd be curious to see it.

Ok, I made it, the link it's the same

http://xoomer.alice.it/mushaspot/kabuto

Some retouches here and there, some new icon, some time wasted...hehe

auxman wrote:
I've created a draft of "my" proposal for Haiku Icon Contest, a preview and some informations are here...
http://mockuplab.blogspot.com/2006/08/honey-experience-is-started.html

J00 |200|_3!!!

The first time I saw BeFree, aka Mockup, icons and I thought you have a big talent, and this is the evidence.

The only doubt: can stippi's vectorial format render them properly? ( if I understood correctly an fx like the shine on screen is not currently supported )

Another icon set has been submited today ,it's been announced on the haiku mailing list and seems the author drew it using wonderbrush, so it's could be easily imported with icon-o-matic.

http://www.freelists.org/archives/openbeos/08-2006/msg00132.html

Yo,
zuMi

Re: Honey, a collaborative project.

skoe wrote:
Dirty Harry wrote:
auxman wrote:
I've created a draft of "my" proposal for Haiku Icon Contest, a preview and some informations are here...
http://mockuplab.blogspot.com/2006/08/honey-experience-is-started.html

Oh wow. Amazing work, you've got my vote.

Mine too.
Just awesome :D.

They might look great now, but how do they translate to 32x32 and 16x16? This is why the contest entries must be submitted in the three different resolutions (64x64, 32x32, 16x16). A lot of design details and gradients don't translate well to the lower resolutions.

Re: re: johndrinkwater

zuMikkebe wrote:
I made the tick because I thought every beos user knew "it equals to preferences", so I cloned it just as a legacy with the original Browne's icons.

You proposed valid suggestions, but a tool needs too many details and the switch is too much related to Mac OSX...have I to design a totally brand new concept ? It's hard, but probably I should ! ;)

ok, i take some days to think about it, and the first thing I thought was : <<I have to open a preference app to change the behaviour of some part of the system, in few words to take control of it>> , so I don't think the "spanner" is right choice because it can't mean "control" anyway.

Then I remembered about some 70's japanese anime series, where a guy could pilot an huge anthropomorphic mecha using only "two" levers...this IS control!!

And the idea came : what about a panel with two levers as an overlay icon?

Some mockups:

red checkmark icon
spanner icon
levers icon

Vector Icons and the Icon Design Contest

Great idea, it's even more functional than the tick!

Another very good thing about it, is the playfullness it has...

Rock on !

Re: re: johndrinkwater

zuMikkebe wrote:
red checkmark icon
spanner icon
levers icon

Very neat as always! If it aint obvious, I’d rather like your Kabuto set to be picked for Haiku… 8)

From discussion on the mailinglist, it appears others find the Preference logo the hardest to point on one thing that means configuration. See Stippis post about symbols and scalablity. http://www.freelists.org/archives/openbeos/08-2006/msg00158.html

I can only say the spanner is great, but might need some rotation/scaling so that at 16x16 it’d be more obvious.
General comment: I haven't tried Icon-o-matic yet, but how does stippis format support altering content at zoom levels, could it include a face-on spanner for 16x16 instead, or can it only hide stuff?

Re: re: johndrinkwater

johndrinkwater wrote:
General comment: I haven't tried Icon-o-matic yet, but how does stippis format support altering content at zoom levels, could it include a face-on spanner for 16x16 instead, or can it only hide stuff?

I gave it just a quick look, not bad, but I wish Stippi can add an svg importing feature soon.

Vector Icons and the Icon Design Contest

Very nice — You don't have a slightly lighter variation do you?

Re: re: johndrinkwater

zuMikkebe wrote:
johndrinkwater wrote:
General comment: I haven't tried Icon-o-matic yet, but how does stippis format support altering content at zoom levels, could it include a face-on spanner for 16x16 instead, or can it only hide stuff?

I gave it just a quick look, not bad, but I wish Stippi can add an svg importing feature soon.

If you haven't found out already, it seems there now is a new version that has basic SVG import; you can read about it here

(isComputerOn newsitem)

Re: re: johndrinkwater

Yo people,
I'm proud to present my latest work,
the innovativest, weirdest, and probably ugliest icon set ever: http://xoomer.alice.it/mushaspot/haikucontest/garum

It's ready for the haiku icon contest, surely I'll win with this entry :p

Re: re: johndrinkwater

zuMikkebe wrote:
I'm proud to present my latest work,
the innovativest, weirdest, and probably ugliest icon set ever

But it's probably the one who won't let people indifferent, good luck :)

pretty cool

I don't think it's the ugliest at all; I rather like it.

Not sure if it will make a good chance, but if you add it, you'll have enriched the contest (not just in quantity).

Re: re: johndrinkwater

zuMikkebe wrote:
Yo people,
I'm proud to present my latest work,
the innovativest, weirdest, and probably ugliest icon set ever: http://xoomer.alice.it/mushaspot/haikucontest/garum

It's ready for the haiku icon contest, surely I'll win with this entry :p

You should submit it pretty soon - i recommend submitting directly to the mailing list :)

Edit: Nevermind, looks like it was already submitted :D

Re: Honey, a collaborative project.

auxman wrote:
I've created a draft of "my" proposal for Haiku Icon Contest, a preview and some informations are here...
http://mockuplab.blogspot.com/2006/08/honey-experience-is-started.html

auxman!!!

Many people are interested in getting your icon set into the contest! Unfortunately, the url above doesn't have them in a format that is suitable for contest entry.

you can refer to the rules here:

http://www.haiku-os.org/wiki/index.php?title=Icon_Contest

and see the beta contest page here (for reference - it will be reset when the contest submission time is over):

http://iconcontest.bug-nordic.org/

You only have until September 1 in order to submit an entry, and many on the mailing list are inquiring about your icons.

Vector Icons and the Icon Design Contest

Seems like time's up on the icon contest.

Personally I really like Honey. The realistic twist on the classic BeOS icons really does it for me. I don't like the trash can (the black bin-liner and the recycle logo on it looks sort of awkward, and I wouldn't mind finally seeing the back of that BeOS turqoise) or the disk icon (the leaves look a little odd, otherwise it's fine), but aside from those minor quibbles I think it's great.

My two favourites in terms of BeOS icons vectorised are stippi's and 575. They're both gorgeous, my only complaints being that they're a little too colourful (I sort of feel a default look needs to be a little more restrained in terms of colours) and that the lines on them are too thick, which in combination with the bright colours results in them coming across as a little too cartoony. The thick lines probably make sense in terms of ensuring they scale well though. There's also that they don't deviate that far from the BeOS originals, and in that sense I suppose I find them a little boring. I'd be perfectly happy with either one were they to chosen though.

In terms of Tango, Dropline, they're both excellent icon sets, but they aren't Haiku's sets and for that reason I don't really think they'll work well as a default. On a side-note, does anyone know how many icons are required in total? I'm just curious as to how big a undertaking this new icon set is.

Overall the quality of entries is amazing. Haiku really surprises me with the talent it's able to attract despite having not made a public release yet. In terms of visual identity, Haiku has got it sorted at a level that's not just impressive for an open-source project, but for any product. I love the logo, the leaf on the deskbar (please please keep that, it's wonderfully understated), the boot splash (ditto) and I'm looking forward to both an icon set and a website that are equally impressive. The fact that the Haiku team recognise the value of aesthetics is what really seperates them from other software projects as far as I'm concerned.

Anyway, congratulations to all of the entrants on a job well done. A special shout-out to the Miqlas set, wonderful idea, I don't know about as a default, but it would make a fantastic easter egg!