new forum icons

bloomaniac - December 11, 2006 - 21:10
Project:Drupal
Version:7.x-dev
Component:forum.module
Category:task
Priority:normal
Assigned:Unassigned
Status:patch (code needs review)
Description

hi there,

I think in 5.0 there should be some new icons at the forum.

The present ones doesn't look like 2006/2007.

#1

bloomaniac - July 9, 2007 - 18:37
Title:new post icons» again
Version:5.x-dev» 6.x-dev

its me again.

I am still thinking that it would be great to have some new forum icons with a more modern look.

#2

bloomaniac - July 9, 2007 - 18:39
Title:again» new forum icons

wrong title

#3

bloomaniac - August 2, 2007 - 23:25

well, nobody seems to be interested in this.

I'm attaching the icons I'd suggest for use. I've taken them from the Silk Icon Library.

What do you think?

AttachmentSize
Desktop.tar_.gz3.35 KB

#4

Michelle - August 3, 2007 - 01:19

I doubt icons that require a link back will ever be part of core.

Michelle

#5

Frando - August 3, 2007 - 18:11

Right. famfamfam icons are licensed under a CC license. That means they're incombatible with the GPL and therefore can't be used in core.

#6

BrightLoudNoise - October 19, 2007 - 14:02
Assigned to:Anonymous» BrightLoudNoise

I'm happy to take a crack at this, I have created a number of icon sets in the past, including forum icons.

  • Create as vector art first, output 16x16, 24x24 versions in PNG format.
  • Release icons as a GPL licensed set for the Drupal forum module, including vector art

#7

BrightLoudNoise - October 19, 2007 - 14:21

Oops, looks like I dropped a trailing slash on the forum icons link, sorry about that.

#8

cosmicdreams - October 19, 2007 - 15:00

Good work. I've been looking for a clean, small icon set for the major nodes (blog, poll, event, forum). Do you have anything like that?

Maybe its just me, but additional icon sets for the forum module sounds like an issue best handled with themes. Rather than trying to change the core forum's iconset perhaps you should just roll a theme and have a showcase for your art?

#9

BrightLoudNoise - October 19, 2007 - 15:14

I'm happy to clean up the core forum icons so everyone has a good starting point, and then may look into releasing some fashion of forum sub-themes.

#10

JirkaRybka - October 19, 2007 - 18:07

+1

The icons linked in #7 are nice, and generally in line with my thinking about Drupal's forum.

#11

bloomaniac - October 21, 2007 - 11:39

I created some icons for the forum module too.

You can see them here and download them here!

Please give me some feedback.

#12

JirkaRybka - October 21, 2007 - 12:09

I like these more than #7, because they are more simple (i.e. understandable in the tiny size). Generally I prefer any kind of these comics-like bubbles over Drupal's default envelopes, as comments / forums are more of a "speaking" nature (or even "chatting" somewhere), while envelopes suggest rather some kind of e-mailing list, or something private, hidden, which is not the case.

(BTW I already used a bubble as Forum/Comment icon on my site, although it's a bit different place: http://naturista.cz/drupal/?q=diskuse/nuda_na_olomoucku - I've a different icon and color-schema for each node type, to give various content types own look&feel a bit, so users know what they are looking at, even if they came by a random link from somewhere. It's all just theming, but while I speak of it - it might be also nice to have some basic set of these content-type-indicators with Drupal. Or is there one already, somewhere?)

#13

Michelle - October 21, 2007 - 13:35

JirkaRybka - Have a look at http://groups.drupal.org/node/6422

Michelle

#14

BrightLoudNoise... - October 23, 2007 - 05:11

I've put a link to some of my forum icon tests here http://groups.drupal.org/node/6422#comment-19350

#15

BrightLoudNoise... - November 7, 2007 - 11:51

Another forum icon theme I'm working on, which has more traditional style, it also uses 8bit PNG's with alpha transparency, so it degrades pretty gracefully for older browsers (ie5.5, ie6).

#16

yoroy - November 10, 2007 - 00:06

EDIT: Sorry for duplicating this issue. Folding my posts into this one, continued below.

#17

yoroy - November 9, 2007 - 23:57
Category:feature request» task
Priority:minor» normal

Gabor told me to add my stuff here, so here goes:

The current forum icons are a bit outdated. The envelope metaphor doesn't really work anymore and (to me at least) the "new" icon is quite unreadable.

Here is the first bit of discussion on this:
http://groups.drupal.org/node/6422#comment-18962

So, here's my first proposal for new forum icons based on speech bubbles in stead of envelopes. What am I trying to achieve here is:
- first, a nice generic speech bubble of course
- then adding variations to indicate the different states (new, hot, sticky, closed) in a way that allows for combining them (hot & new)
- I've refrained from using colors in these first attempts to force myself to come up with visually distinct icons based on shape alone.

Some things to consider when giving feedback:
- General look and feel, I'm trying to keep it simple and effective, hopefully not boring?
- Is there enough difference between them?
- Metaphors, do they make sense to you?
- File format: 24bit or 8 bit pngs, transparency issues in IE…

I'm designing these at 256x256 pixels in photoshop with vector layer masks, allows for scaling to any size.
Working on a mockup that'll show this icons in context, based on a screengrab from the drupal.org forums.

Looking forward to your comments, thanks.

AttachmentSize
drupalforumicons-overview.png34.95 KB

#18

yoroy - November 10, 2007 - 00:45

Attached a mockup of the icons "in action". You'll see the big dot for "new" makes them quite scannable.
Color would definately enhance this, but I think they already work as is.

I chose the dot because that's how unread messages are marked in my mail app (OS X Mail). Is that a common thing in your inboxes too?

Regarding the fileformat and transparency: there's a trick in Fireworks that allows you to use multile colors for the alpha channel, which kinda degrades ok-ish in IE. it's described here: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
Brightloudnoise links to some tests with that technique here: http://groups.drupal.org/node/6422#comment-19350

Also attaching a layered .tif file (remove the .txt extension to expand the zip) with the forum screengrab as well

(Webchick: I don't now what you mean with "new placeholder").

AttachmentSize
forum-icons-usecase.tif_.zip_.txt109.63 KB
forum-icons-usecase.png65.45 KB

#19

alpritt - November 10, 2007 - 01:10

These are my comments from the duplicate thread (http://drupal.org/node/190773#comment-624998), but I've rewritten slightly since things have moved on slightly.

--

So as I said in IRC, I'm really enthusiastic about these. No envelopes or flames is a winner in my book. The icons seem clear and recognisable. The hot topic icon is a very clever idea. The designs are friendly looking without being distracting or too stylised towards one kind of site. They look very professional.

The large dot for unread posts is visually clear, and appears easily scannable. I agree with yoroy in that colour will enhance the ease in which we can scan, but it already is scanable in monotone.

What I don't know is how understandable the dots are without explanation. If it is used on the Mac then that is a good sign. Still it will be interesting to show the mock-up of these in context to naive users to see if it makes sense to them.

I won't rehash my thoughts on the file format since Yoroy seems to have an answer. I don't understand this Fireworks miracle, but it sounds like the perfect solution.

How do these look on different background (especially darker themes)?

#20

Michelle - November 10, 2007 - 02:09

I hate to be the downer on this thread, but I just don't get them. Looking at the use case, the only thing that's obvious is the one with the padlock. Not having used a Mac, the dot is meaningless to me. To me, it's not super important because I never pay attention to the icons anyway. I look for the "new" and "updated" label and the post count. The icons are just decoration to me. But, since you're spending so much time on this, I thought you might like to know that they aren't understandable to someone who uses a PC. FWIW, I don't get the envelope ones, either. I ended up looking up the meanings and putting a legend on my forums.

Michelle

#21

Gábor Hojtsy - November 10, 2007 - 13:01

So far yoroy's gradient less icons fit the best with Garland (and are also portable enough for other themes, and could also be recolorable I guess :). I agree that the dot for the new marker is not easy to grok.

#22

JirkaRybka - November 10, 2007 - 13:47

Another +1 to these nice icons, and another BIG -1 to the dot. If not told here in the thread, I would not understand what it meant.

I would definitely vote for some sort of a star for "new" marker, either small and solid, or bigger and just outline. I know that somebody says it might be confused with 'rating stars', but I don't think so. If there's only just ONE star, on top of another picture (preferably top-right position), then it definitely means "new", based also on widely understood "new folder" icon of Windows, or simply just being "new and shiny".

#23

elv - November 10, 2007 - 14:53

+1 for removing the envelope, forum is not mail.
-1 for the dot, too.

I like the speech bubble idea. The sticky one remind me of a logo, but I can't remember which one. I prefer the solid color version for legibility.
My only concern about the icons, is that at small sizes they are very similar, so it defeats the idea of identifying topics at a glance. Only the sticky icon really looks different from the others.
Couldn't we introduce a few color spots? That would be a good way to escape the "blue mood" a bit, but more importantly it's far easier for the human eye to differentiate colors than shapes. Orange would be appropriate for "new", because that's how it's already used in the forums and groups on Drupal.org.

#24

yoroy - November 11, 2007 - 09:27

I'm making the wrong assumption about "new" I think. I interpreted "new" as meaning "has unread messages". But it seems it's a label for the age of the forum-thread itself, right?

#25

JirkaRybka - November 11, 2007 - 10:42

I was unsure about this, but examining my site's behavior, I see the yellow 'new' envelope on threads with new posts that I've definitely visited previously (even authored myself), so you were correct: It means "has unread posts".

The issue with the dot is, that it's a generic shape, which is really NOT self-explaining, unless the user already got used to understand it some way. And many users, perhaps even majority (given the feedback above) are NOT used to it.

#26

BrightLoudNoise... - November 12, 2007 - 05:47

I've attached another iteration on the speech bubble icons, which try to reinforce their meaning through the use of colour. I prefer to think that green is a better signifier of new/unread as opposed to orange. But we can definitely discuss.

Are there significant reasons as to why we are still limiting ourselves to 16x16 sized icons? with the trends in font size these days, they look positively tiny. Moving up to 24x24 would make a significant improvement in legibility and probably fit within most line heights.

AttachmentSize
simple icons.png9.23 KB

#27

Psicomante - November 12, 2007 - 09:11

i agree with brightloudnoise. 24x24 would make a significant improvement. Thread types would be immediately recognizable.

#28

Gábor Hojtsy - November 12, 2007 - 10:04

brightloudnoise: instead of arguing on principles, do what yoroy does and put your icons into perspective. How does those look in a default Garland forum topic table? How would 24x24 icons fit? We can only decide based on what we see.

#29

Psicomante - November 12, 2007 - 11:18

IMHO, the behaviour should be:

grey tonality - read/viewed (as a lot of BB/Forums/Mail clients do)
yellow/colored - to read/to view (as a lot of BB/Forums/Mail clients do).

A lot of people said that a forum with the different icon but same colors was much worse than same icon but different colors. All imho.

Then, i don't like very much the colors choiced by yoroy. I would prefer more contrast between new and read icons (the circle is wonderful, but it's not enough).

EDIT:

The test with brightloudnoise icons on our www.drupalitalia.org/forum. The "read" icon was modified by me (it's pretty ugly i know!) to suit my opinions about colors.

EDIT2:

The used template is garland.

AttachmentSize
brightloudnoise_icons_forum_drupalitalia2.jpg55.76 KB
brightloudnoise_icons_forum_drupalitalia.jpg38.43 KB

#30

alpritt - November 12, 2007 - 12:16

The idea is to see if the icons work without colour first. Really what we are look at here is whether the shapes work and are understandable. Then we can add to that with the colour.

Examples in #29 are in 32x32. This is definitely too big. It's not just what we have room for, but also the visual weight against the text.

#31

BrightLoudNoise - November 12, 2007 - 16:10

I've attached a sample of what the discussion bubble icons I'd already posted in #26 would look like at 16x16 in Garland, I'll post a 24x24 sample tonight, which will have shapes which are easier to scan and will be monochrome.

The envelope style icons from #29 were from an earlier test and are no longer relevant to this discussion, I may release them as an icon pack at a later date if there is interest.

This started off as a pretty informal exercise (for me at least), however there are now a lot of rules being applied to the process after the fact which have caused some confusion. Let us please be patient with one another, as we all share the same end goal of improving the default forum icons.

AttachmentSize
simple_icons_garland.png7.98 KB

#32

BrightLoudNoise... - November 12, 2007 - 23:58

Attached is a 24x24px monochrome test of the discussions icons, they still fit well within the space available in the Garland theme.

I think the consistent placement of the status badge makes them easy to scan, however I think the indicator for popular topics needs some tweaking.

AttachmentSize
simple24mono.png35.33 KB

#33

yoroy - November 13, 2007 - 02:05

Ok, here's my next volley :-) The dot is no more. Please meet the update-asterisk. Yes, of course that has to be a star, indeed the dot was rather meaningless.

New option for "sticky":

Rationale for adding a solid background to the first version of "sticky":
Sticky = stuck = can't be moved = static = a solid square. This is a very usefull "visual device" here. You could make any content-icon "sticky" by filling its background to a solid square.

Rationale for instead adding a fill within the bubble:
Equally "heavy" presence. May suggest a push pin ("punaise").
Also, the fill-background trick takes away theming options (custom background color) because it'd remove transpareny.

I've added usecases for 16px and 24px versions and a variation on a dark background. The 24px is already quite heavy I think. (yeahyeahyeah, maybe 20px? :-)

Michelle: very good idea to add a legend, we should do that here, too. That would require a real patchy patch, something you shouldn't trust me on just yet ;-)

Your thoughts?

AttachmentSize
forumicons-usecase2-24px-da.png77.17 KB
forumicons-usecase2-24px.png71.7 KB
forumicons-usecase2-16px.png66.06 KB
forumicons-overview2.png23.41 KB

#34

Michelle - November 13, 2007 - 01:59

The star is nice. I don't know why a star says "new" to me more than a dot does but somehow it does. :)

To be fair, I wasn't the one that suggested the legend. I just happened into the conversation and pointed out my site as an example of doing that.

I still would really like to see these in colour. I understand what you're saying about getting the concepts right, first, but my non artist eye is having trouble really seeing it without the colour.

Michelle

#35

FiReaNG3L - November 13, 2007 - 03:42

Yoroy, the only one I'm not sure about is the 'sticky' one. All the others are great (but would be better in color obviously).

#36

BrightLoudNoise... - November 13, 2007 - 12:14

I've revised my set some, played with line weights and placement of badges after some discussion with Yoroy. I've also changed the indicator for popular discussions and replaced the exclamation mark with the venerable push pin.

AttachmentSize
simple16mono_rev2_blue.png36.26 KB
simple24mono_rev2_blue_dark.png36.31 KB
simple24mono_rev2_blue.png37.21 KB
simple24mono_rev2.png36.87 KB

#37

Psicomante - November 13, 2007 - 12:15

great bright, this icons are beatiful. The only issue is the forum 'read' icon. I would make it grey tonality.

#38

Gábor Hojtsy - November 13, 2007 - 12:38

Great, the icons converge to each other :) I was thinking about the applicability of the icons earlier today. Although I do think blue icons are "in color" (they match the Garland theme and are possibly fine for the other core themes which are also blue-ish or are fine with blue colors), they will probably not be fitting for other themes. However, adding color support might be a bit too much to do now (ie. recoloring forum icons would require quite some changes to both color module and the supported theme). Ideas on how can we proceed here?

#39

JirkaRybka - November 13, 2007 - 17:40

#36:
I think that there's not that much of blue mass, it's rather just only lines, not too intrusive, and generally resembling the color effect of plain text. So I would be fine with the blue ones, which are also fitting to any white/grey backgrounds nicely, which is perhaps most frequent. Also we can suggest that people can replace these files in misc directory with any custom icons they like, it should be a pretty easy operation. Black ones are more neutral, but to my eye also a tiny bit ugly on default Garland.

Otherwise, the icons are notably square, but consistent with each other and understandable well. Would be really an improvement.

#40

BrightLoudNoise... - November 14, 2007 - 01:47

I've rigged up a proof of concept for customizing the color of Yoroy's and my own icon sets using color.module at http://drupal.brightloudnoise.com/node/85, the caveat at the moment is that they would end up with a solid background as we need to mask off the areas we don't want colored.

Color.module overlays semi-transparent .pngs on background areas of color and then slices the output up to achieve its result, 100% transparent areas will pass the color applid without any further manipulation.

I'm not sure if there is a way to pass an additional transparency mask via the GD library using another .png to define the outer boundaries of the icons, or if we can throw away 100% transparent areas during the process.

#41

Michelle - November 14, 2007 - 03:51

Ooooh... I like that. :)

Michelle

#42

JirkaRybka - November 14, 2007 - 08:34

Fantastic, thanks for setting up the test page!

This looks really good. And when it comes to this visual comparison of icon sets on the same screen, I would vote for the round ones (Yoroy), with the star very nice ones.

#43

alpritt - November 17, 2007 - 21:22

Re. color.module integration..... caveat aside... The icons with the consistent white-inside seem clearer to me. However, it doesn't quite work at the moment because the colour of the outlines always look too dark. Can we make the lines 100% transparent so that they match the exact selection in the colour wheel? This would be particularly helpful for use on darker themes.

#44

yoroy - November 21, 2007 - 23:43

Here's another usecase mockup. Here the icons are size 20 x 20 px. I think this is a nice size, more readable than 16px, but not as prominent as the 24px verions.

Re #38: I've made these a darkish gray. I agree the pure black/white versions are too high in contrast in relation to the page they are on. Any use of color for the outlines will make these not look nice with certain colors. Without using color.module, gray is the best option.

re #43: Interesting suggestion, this would basically result in square images with the lines transparent, to be colored by the background color. Would make for really "boxy" icons though.

Another caveat: all these usecases as well as Brightloudnoise's color module demo relies on correct rendering of 24bit pngs with 8bit alpha channel. Which a certain browser (IE6) just doesn't. IE6 will display a grey background instead. There are fixes for this but Drupal core does not ship with one.

If we want these icons to look the same in IE6 as well without hacks, then Brightloudnoise's versions would be a better option, since his icons' outlines are mostly straight lines which don't need fancy transparency. Hmm…

Thoughts?

AttachmentSize
forumicons-usecase-20px.png44.75 KB

#45

BrightLoudNoise - November 22, 2007 - 19:29

My current color.module demo only flattens them to a solid background or masks them off with a solid color at the moment, I've been looking into a way to achieve the necessary transparent background after coloring using libgd functions. This appears to be easier in PHP5 as the image handling is greatly improved.

I'm happy to assist in exporting Yoroy's icon set as 8bit png + alpha (this is possible in fireworks) if the group decides to use his set. A users ability to color and re-export either icon set as 8bit + alpha will also be dependent on their having fireworks, otherwise they'll be left with 24bit png + alpha which doesn't degrade well in ie6 and earlier.

#46

Michelle - November 22, 2007 - 20:19

Are you planning on doing any other forum icons? It would be nice to have re-colorable ones for things that are currently links, such as reply, quote, edit, delete, new post, new comment, etc.

Michelle

#47

BrightLoudNoise - November 22, 2007 - 20:54

I'm sure we can put something together for those, once a decision has been made on the iconset.

We'll need a moved icon too.

#48

JirkaRybka - November 22, 2007 - 22:54

Let's agree on some replacement for the ugly existing core-icons first, and try to get them in.

As for me, #44 is simply *perfect* and should go straight to core. :)

#49

Gábor Hojtsy - November 22, 2007 - 23:15

JirkaRybka: I agree #44 looks ready for core as it is, and I asked Dries a few hours ago to consider this issue. I hope he will visit this issue as soon as he has time.

#50

Michelle - November 23, 2007 - 15:31

BrightLoudNoise - Great, thanks. And, yeah, I realize this iconset needs to be decided on first. I'm just looking to the future as I'd like to use these in Advanced Forum.

Thanks,

Michelle

#51

JirkaRybka - November 23, 2007 - 15:58

yoroy (#44) & BrightLoudNoise (#45) - given the positive feedback (and Dries coming ;)), I think it might be a good idea to provide final single files for these icons, so that we have an option to set something as RTBC here... Personally, I would love to.

#52

yoroy - November 23, 2007 - 22:59

Hmmm, I made a test to look how the tricked out 8bit pngs degrade in IE6. It's not pretty…
I'll try some more settings for this, I think the 8bit versions look even worse that the 24bit ones without the transparency.

Brightloudnoise: these were made with that ASwing.org AIR tool.

AttachmentSize
IE6-IE7test.png17.96 KB

#53

JirkaRybka - November 23, 2007 - 22:05

Hm, indeed IE6/8bit is not perfect, but at least there's no box around. GIF won't be any better - and that's the only transparency I ever succeeded with on IE6. If you can't find any better option, then I might say these are acceptable - but I would like to see them on white background first (very common use case). I guess adding another thin line around, just for the sake of dark lines protection in IE6, is not a good option (?)

#54

yoroy - November 25, 2007 - 21:09

JirkaRybka, thanks for following along and your feedback. I've been fiddling the settings some more and I've managed to keep the outline intact in IE6 and still have the smoothness in other browsers. This is probably the best compromise I can reach within 8bit pngs. I found that only IE6 and Konqueror did not render the alpha transparency, other browsers show these icons as in the FF2.0 screenshot here.

AttachmentSize
icons-browsertest.png57.24 KB

#55

yoroy - November 25, 2007 - 21:12

And these are the single icon files as used in the screenshot of #54

AttachmentSize
forum-closed.png568 bytes
forum-sticky.png552 bytes
forum-hot-new.png634 bytes
forum-hot.png562 bytes
forum-new.png604 bytes
forum-default.png496 bytes

#56

JirkaRybka - November 26, 2007 - 11:17
Status:active» patch (reviewed & tested by the community)

Wow, now THIS is much better. I would love to see these in core :)

#57

catch - November 26, 2007 - 12:29

I've arrived on this a bit late, but #55 looks very, very nice. +1 from me.

#58

momendo - November 26, 2007 - 14:47

Is it me or does yoroy's "sticky" icon - dark dot inside text bubble, doesn't mean sticky? The sticky icon should have a pin in it or maybe an icon that looks like a stamp with its corner being peeled away. "New" should have a sparkle-style icon. The closed icon has a lock on it, which implies it's "locked" not closed. If they mean the same thing, then ignore my comment on it.

I like the icons being dark gray and with clean vector art.

#60

catch - November 26, 2007 - 15:06

To me, the dark circle inside the bubble looks like the head of a drawing pin (albeit a bit abstracted). In context with the others it looks fine to me. Closed and locked are the same thing, and locked is more common for forums.

#61

BrightLoudNoise - November 26, 2007 - 17:13

Here's what my design looks like at 8bit png with alpha transparency in IE6 and Firefox on various backgrounds for comparison purposes.

The squared design works quite well with the limited transparency options, I have some ideas for tweaking the white outline for the status badges for IE6 which I'll tackle tonight.

EDIT: I've also attached the single icons

AttachmentSize
forum-hot-new.png553 bytes
forum-hot.png445 bytes
forum-closed.png500 bytes
forum-sticky.png517 bytes
forum-new.png480 bytes
forum-default.png351 bytes
bln_8bitpngComparison.png12.33 KB

#62

momendo - November 26, 2007 - 17:59

Yoroy, another idea, instead of a star for new, put a big dot to the left side of the text bubble. This is like how iTunes represents new podcasts. Stars in Firefox 3, represent bookmarking. And for me, stars mean "important" or "popular" as in ratings.

#63

profix898 - November 26, 2007 - 18:18

I definitely like the smooth round icons in #55 better, although I agree that the new ones are slightly easier to grab. But its good to see new stylish icons here at all in the first place :)

#64

yoroy - November 26, 2007 - 18:53

momendo, if you read the whole thread you'll see I started out with a big dot top right, with the same reasoning you mention. Lots of people did not interpret the dot as meaning "new".

Re: the sticky icon: the advantage with sticky threads is that they have another thing that seperates them from other threads: they are always on top of the list. So, I think it's enough to just make this icons visually distinct from all other icons. The dark fill gives it visual "weight/importance" and sets it apart from the others.

If you really want to nit-pick, it wouldn't even make sense to illustrate "stickyness" (glue? tape?) with a push pin either. Though I understand it's a commonly used metaphor.

#65

sepeck - November 26, 2007 - 18:54

Visually I prefer BrightLoudNoise icon set. They are simple and I 'get' them immediately. Also I tend to be prefer that style so am biased by personal preference. The sticky 'push pin' metaphor is instantly accessible to me, though I am unsure how that translates worldwide.

yoroy's set is also attractive but the 'sticky' icon is not intuitive, perhaps try a variant with the 'push pin' icon? Also, the lines with the 'hot' icons do not convey 'hot', it conveys shaky to me. This may expose my lack of scanning other forums and current internet iconography though.

This is merely personal opinion, both are pretty.

#66

momendo - November 26, 2007 - 19:07

I agree with sepeck. I think if you look at the icons used in PHPBB, the hot icon is animated http://www.phpbb.com/community/styles/prosilver/imageset/topic_read_hot.... Lots of other samples which look nice.. http://www.phpbb.com/community/viewforum.php?f=46

#67

Psicomante - November 26, 2007 - 19:26

Underlining #66 and memendo.

Look at the read and unread icons. Different colors to put more differencies as possible between read and unread messages. Unread messages should be more visible.

http://www.phpbb.com/community/styles/prosilver/imageset/topic_unread.gi...
http://www.phpbb.com/community/styles/prosilver/imageset/topic_read.gif

#68

Gábor Hojtsy - November 26, 2007 - 19:38

Psicomante: those different colors would need to work with at least all core themes. And then how many themes did you see coming with a forum icon set? Close to none? Right. So ideally these icons would work well with most color schemes too. How does picking colors up front fit into that?

#69

JirkaRybka - November 26, 2007 - 19:46

Colors, animations... The aim in this thread was, as far as I understood, to provide color-neutral, and more or less style-neutral icons, fitting more or less any theme. Core needs such approach. So I think we should keep just shapes, as it is now.

As for preferences - Yoroy's #55 is definitely better for me. The square ones seem a bit more ugly to me (or not along the style I expect to be universal today, to phrase it differently), and might be offending in some themes. As for the lines on "hot", these definitely mean that there's a lot inside (a pile of speech bubbles, rather than single one), to me.

The push-pin on sticky would be a nice improvement, though.

#70

BrightLoudNoise... - November 27, 2007 - 03:33

I've tweaked the outlines a bit so they behave in IE6 and have also changed the shape of the "hot" icon as suggested by Elv.

AttachmentSize
bln_ie6compare_nov26_updated.png11.91 KB
forum-hot-new.png537 bytes
forum-hot.png393 bytes
forum-sticky.png517 bytes
forum-new.png515 bytes
forum-closed.png509 bytes
forum-default.png342 bytes

#71

JirkaRybka - November 27, 2007 - 10:50
Status:patch (reviewed & tested by the community)» patch (code needs review)

Seems like there's not full agreement on which set should go to core. I still think that square ones are too explicit style to be theme-neutral, but that probably just means that we need more feedback here.

So setting CNR - this is not strictly a patch, but needs feedback quite the same.

#72

catch - November 27, 2007 - 13:01

I continue to like #55 - I can see them working well with my modified zen theme (and lots of other themes), whereas the square ones seem too specific to me.

#73

blackdog - November 27, 2007 - 12:50

My vote also goes to the ones in #55.

#74

Michelle - November 27, 2007 - 13:22

I prefer #55 as well and it would be great if they could work with the color module. I'd like to use them in advforum and having the forum recolor itself to match the rest of the site would be awesome.

Michelle

#75

BrightLoudNoise - November 27, 2007 - 14:41

Let's go with Yoroy's set, I agree that they fit better with most themes.

I'll continue working on a way to recolor the icons, and will release a contrib module as soon as I have something to show.

#76

momendo - November 27, 2007 - 14:45

Yoroy's #55 hot icon is bad. It looks like it's shaking or zoomed in. It should use some kind of flame icon overlay.

#77

catch - November 27, 2007 - 15:02

A flame wouldn't work in b&w, also the #55 hot looks like "lots of speech bubbles" to me, which indicates a busy conversation. I think that's a good, simple way to refer to it.

The idea is to have refreshed usable icons that will work with most themes, if people want something different for a custom theme it's easy to swap new icons in. I think these are ready, given BrightLoudNoise has put his weight behind #55 as well, I'm going to set back to RTBC.

#78

yoroy - November 27, 2007 - 15:46

BrightLoudNoise: Thanks much, that's very nice of you.

Catch: please don't RTBC just yet. I'm working on some last tweaks for a few of the icons, coming soon.

#79

yoroy - November 27, 2007 - 22:33
Assigned to:BrightLoudNoise» yoroy

Ok here's an updated preview. I made a new version for the sticky icon which I think is a big improvement. Also closed the underlying bubbles for the "hot" variations. Hopefully this way people are less likely to interpret it as shaky or zoomed in. Because a stack of bubbles implying a busy conversation is indeed what I want to suggest there.

AttachmentSize
forumiconsupdate-usecase-20.png125.15 KB

#80

yoroy - November 27, 2007 - 22:36

The separate files as used in #79

AttachmentSize
forum-closed.png523 bytes
forum-sticky.png489 bytes
forum-hot-new.png615 bytes
forum-hot.png530 bytes
forum-new.png570 bytes
forum-default.png451 bytes

#81

JirkaRybka - November 27, 2007 - 22:47

"Hot" is now good IMO.

"Sticky" doesn't look right to me, though. The work *is* definitely moving in the right direction, the pin itself is good as I see it, but IMO it should point to the center of the bubble, or at the very least *somewhere* inside the main body of bubble. We're saying that the bubble (= it's content) is pinned to a background (sticky, doesn't move), while the current picture is pinning the pointer of the bubble, or even aiming the pin at the imaginary speaker for that bubble. I think that if the pin was, roughly guessing, somewhere between 1/2 and 2/3 of current size, and moved as far top-left as possible (handle emerging out of the bubble a bit, and the tip somewhere inside the bubble body), that should be much better as far as I see it.

#82

momendo - November 27, 2007 - 22:50

Nice update. How about this for hot discussions. Instead of the shake, we add anothr smaller flipped bubble to the left. It's rough and I'm sure you can create a better one in vector.

AttachmentSize
multiple-discussions.jpg1.39 KB

#83

JirkaRybka - November 27, 2007 - 23:01

As for the "Sticky" one, I played a bit - attaching a rough idea (pin size 75% from #79, rotation 25deg., horizontal flip). Unfortunately, with the pin top-left (most commonly seen), it didn't play nicely with the bubble pointer being the same line/direction.

AttachmentSize
sticky-demo.png4.07 KB

#84

momendo - November 27, 2007 - 23:03

I can see how the tack looks big. You can change the perspective to top-down 2/3rds view. Also, you don't necessarily need to use a thumbtack, you could use a pin (a thin metal bar with a plastic ball at the end). This would be simpler to draw in 2/3rds view.

#85

JirkaRybka - November 27, 2007 - 23:12

I think the currently used pin (it's called "thumbtack"? I'm not very good on English... ;) - that's quite more understood worldwide today IMO (?)

#86

catch - November 28, 2007 - 10:44

The new sticky from #80 looks beautiful to me, they're icons, supposed to be a bit abstract/stylised. +1000 etc.

#87

yoroy - November 28, 2007 - 15:01

#81, #83, #84: I don't see how making the pin smaller would make the icon more understandable. And pseudo 3D and perspective have no place in this stylized, flat approach.

#82: the filename of your sketch indicates why this variation isn't better for indicating a (one) forumthread with lots of replies: something like this might work as an indicator of forums (multiple).

Appreciate the feedback but IMO these suggestions will not improve #80

#88

catch - November 28, 2007 - 15:03
Status:patch (code needs review)» patch (reviewed & tested by the community)

I agree with yoroy's comments in #87 - the simple fact that people are easily able to mock up alternatives to these shows how well designed and flexible they are.

So, back to RTBC.

#89

momendo - November 28, 2007 - 15:19

#87 Respectfully, I don't agree and #83 is valid feedback despite it not looking so clean. To all, if there is anybody that knows some professional graphic/icon designers, I ask that you pass this bug post around and get some feedback for the icons.

If this gets committed, I submit that yoroy must post the original source vector files in EPS along with the patch for other designers to make modifications. I'm sure once the next beta roles around and more designers look at it than us programmers, we'll get some better feedback.

#90

catch - November 28, 2007 - 15:40

One quick point, a bit out of scope - I understand these had to lose transparency because of IE6. For those of us who use IEpngfix on our sites, can I add a slight feature request for 32 bit versions with transparency to get posted at some point?

#91

yoroy - November 28, 2007 - 16:54

#89, momendo: I agree #83 is valid feedback, but it just won't make for a better icon: it doesn't pin the icon down any more than mine, the composition is off-balance and a smaller pin isn't better than a large one. There's been a lot of very usefull feedback in this issue and I have incorporated the bits that actually were improvements, this just isn't one of them. I have no problem with posting the source file (it's a photoshop file, 256 x 256px with vector layer masks, not an eps though) but for now I'd prefer to be the one that makes the necessary changes.

Also, equally respectfully and I know your not implying it explicitly, but for what it's worth: I've been a professional designer for the last 10 years! :-)

#90, catch, mind you, these ARE transparent, but for IE6 result in a crispier outline, see bottom of screengrab #79. I'll be sure to offer 32bit versions as well, no problem.

#92

Michelle - November 28, 2007 - 17:35

I'm not a designer but -1 from me on #83. It just looks off balance to me. I think #80 looks great.

Michelle

#93

JirkaRybka - November 28, 2007 - 18:22

Yes, my #83 is not perfect, I just wanted to demonstrate my point - well - about the tip of pin pointing to the important thing. I asked myself also if we need the bubble at all, if the pin is important here, but probably no need to discuss this at lenghts...

Otherwise - I forgot to say - that was just a minor nitpick. If #80 go into core as-is, I would call it 95% perfect (as compared to 100%), which is still good enough, by far! :)
So RTBC still.

#94

eigentor - December 1, 2007 - 04:30

Hey - you are talking icons and sure yoroy got his hands dirty in it - good work from JirkaRybka also. Wonderful this is getting ahead.

#95

tj2653 - December 1, 2007 - 18:05

+1 on #80 by yoroy. It makes a lot of sense to me, and is light years better than the current set (envelopes don't make sense for a forum).

#96

eigentor - December 1, 2007 - 19:27

@yoroy: since the sticky one with a pin is the most disputed and surely the weakest (designwise): Have you tried to symbolize a pin (with round head and a needle) lie these http://www.schoenherr.de/shop/product/351918.html?PHPSESSID=b9986dee0467... ? If it works it is better because more elegant. Sorry for not doing it myself, but I know I would spend hours being dragged into it. What else coul symbolize sticking? Plaster, Glue... Or something symbolizing it is fixed opens a different road of associative Ideas: being tied , a nail instead of a pin, or metal fittings like you use to tie prisoners to the wall... what ever. The pin breaks the astethic line of round and oval.

#97

momendo - December 1, 2007 - 20:17

#96 Those were the kind of pins I was talking about in #84. I think the icons are RTBC for now. I'd like to see them get in before the next beta. That will get more exposure and hopefully more designers will get behind some of the graphics & branding. Unless Yoroy is taking in the constructive feedback and updating the icons very soon, I'd say this should be committed but the bug should still be kept open.

#98

sepeck - December 1, 2007 - 21:13

I like the one with the pin and disagree it is a 'weak' design. It seems balanced and visually contained.

#99

eigentor - December 2, 2007 - 19:22

I support momendo: even if the pin may be ugly to some people: there is no hindrance putting the icons in and changing this one later. So yoroy: just do it, you got backup from a lot of people ;)

#100

JirkaRybka - December 3, 2007 - 11:19

Yes, #80 seems now generally agreed upon, but now it's a core-commiter we need, to consider and/or commit. The #80 set, although few of us voiced some minor nitpicks, would be a great step forwards.

#101

Gábor Hojtsy - December 3, 2007 - 13:43
Status:patch (reviewed & tested by the community)» patch (code needs review)

I have asked Steven Wittens (original author of the current icons BTW) to look on this issue. His feedback:

There is nothing in that issue to avoid the current pitfall of having
random icons splattered all over core. Where is the source material
and what format or license is it under?

The choice for monochrome icons also seems a bad one, because color
naturally lets you scan the icons and prioritize the various
graphical cues.

I also think the stone age graphical capabilities in IE6 are not a
valid reason to make the icons look crappy everywhere else. We can
apply IE6 alphaImageLoader fixes to get around this.

The 'starred' icon design also looks odd and unbalanced to me, and
aside from taste concerns, the star outline is cut off at the top and
side.

Finally, the icons are misaligned in the proposed screenshot, but
since that applies equally to the drag and drop graphics (at least in
Safari), I guess it's too much of a detail and expecting the design
of core themes to be refined for Drupal 6 rather than degraded is too
much to hope for.

The source files and license is dealt with above in the comments, so I guess Steven missed those follow ups. I also did not notice the icons getting more crappy as better support for IE6 was implemented. Anyway, other concerns are still open from him, and do not look like fixable in the D6 timeframe. I wonder what would solve non-monochrome icons with support for different kind of themes. Any ideas?

#102

JirkaRybka - December 3, 2007 - 16:33

1. - Yes, I think the license is implied by the fact that yoroy proposed these icons for core (just like any other patch), and he already agreed to post the source in #91.

2. - I strongly disagree about monochrome choice being bad. Any colors will make the icons NOT cross-theme compatible, which is unacceptable for core IMO.

3. - The icons are NOT crappy elsewhere, I see that too. The compatibility is pretty good IMO.

4. - I'm not daring to discuss something being 'unbalanced' (my #83 lame attempt was also called 'unbalanced' by someone, and strictly taken, no speech bubble at all is able to be 'balanced' with the tip on one side only), but the starred design looks pretty good to me, and is a very common acronym for 'new' (see "new folder" in Windows). Cut outline is true, but IMO no good reason for making all the icons smaller.

5. - The screenshot #79 was about how the outlines degrade in IE6 as I understood it, but otherwise it's nothing like misaligned to my eyes (others are free to feel differently). I understand this issue being about the icons (=image files) and not alignment (=core themes).

Some reaction from yoroy would be really welcome now.

#103

elv - December 3, 2007 - 18:18

"The choice for monochrome icons also seems a bad one, because color naturally lets you scan the icons and prioritize the various graphical cues."
What I understand in Steven's quote is that even if the shape of the icons is monochrome, some parts could be colored : yellow star, orange pin?

#104

BrightLoudNoise - December 3, 2007 - 20:36

Red lock for closed topics would make sense as well.

#105

tj2653 - December 3, 2007 - 21:21

I pretty much agree with everything JirkaRybka has said. Here's my take. If we start adding colors here and there for a core icon set, then people are going to either have to deal with some colors that might not work well with their theme or they can change the color themselves. If for instance, a red lock is added for closed topics, what if my scheme has a lot of red, and the hue of red is different (making it look a bit bad)? Or the importance of making it red in the first place (to stand out) is diminished, because most of the site is red. So someone would have to modify the icons, which is what they would have to do anyway, if the icons were released in monochrome. I see no reason not to get yoroy's set out there now...it's compatible with a wide variety of schemes, it's more intuitive than envelopes, and it seems to be the most agreeable set of the bunch. There will always be people who don't agree how this or that looks, but 1) you can always change it yourself and 2) does anyone actually think that what is proposed in #79 is worse than what we have now? Again, not everyone will ever be happy with everything. Just my 2 cents :)

#106

momendo - December 3, 2007 - 21:58

I don't think there's a "one set of icons to rule them all" that would work with all the themes. Either we make some simple generic icons that look great in some themes (garland especially) but not so great in others or build sets of icons that look great in each theme. Obviously the latter is not impossible (we need more designers to step up) but seems difficult due to the lack of people to create them. Also, I sense a bit of "Designer's Bias (TM)" towards the icons. Gabor is essentially asking Mr. Wittens, "Hey, we're thinking about replacing your icons with some new ones that look better than yours! What do you think?" That's a no win situation in terms of getting consensus. He also seems to be knocking the new drag-n-drop interface inside Safari and the lack of polish in D6?!?!? You can't please everybody.

I'm for the iterative approach. IMO, let's post what we have now, and that will light a fire/scratch an itch and get people to design some icons.

#107

yoroy - December 4, 2007 - 01:19

We're doing quite well huh, 100+ replies and counting!

1: Yes, I'm fully aware these should be GPL, yes I'll provide sourcefiles. I'm unsure about the possibility of PSDs being GPL'd though. Advice welcome.

2: Like Elv, I read that as a suggestion to maybe add color for differentiation. The process so far has been to find something that works in monochrome first, maybe add color later. We could work on that, has nothing to do with IE6 png display. All colors would be fixed though. I can imagine using drupal-updated-orange for the star, but any color added always decreases compatibility with certain colorschemes. I'd prefer the Drupal core set to be monochrome for that reason.

3: Icons display fine in modern browsers. The bottom row in #79 shows IE6 display, these are transparent too, but with the hard outline. I've tried to make the best image-only solution without introducing browserspecific fixes in css or js. Maybe when Drupal drops PHP4 support in Drupal 7, we should drop IE6 support for the frontend too… For now I've tried to improve the icons within these limitations.

4: Finally someone mentions the star outline cutoff! That took you all way to long :-) It's more apparent with very dark backgrounds and kind of hard to fix, I have looked into itm and it moves the star too much to the center of the bubble and weakens the outline along the top right, but I'll give it another look.

Re: unbalanced. True, the star is dark, so it's pretty heavy visually and on the same side as the bubbletip.