Replace the "Classic" theme with a native looking "Modern" theme
David Tenser
any computer today.
The benefit with this theme is that it uses native looking buttons,
toolbars, menus, etc. The "Modern" theme, on the other hand, uses
designed buttons, menus, toolbars etc.
My suggestion is that a new "Default" theme should be created, which
would be using native widgets like the "Classic" theme, but with much
more modern buttons. To be completely honest, the toolbar buttons in the
"Classic" theme are awful. Basically, the new "Default" skin would look
like "Classic" but with new, fresh toolbar icons. There may be other
things that could be improved too, to make the theme more modern and up
to date, but the toolbar icons are the most important part.
I won't say that the "Modern" icons are that good looking either, but
they are certainly better than the Classic ones. My suggestion would be
to create completely new ones, with more color depth than the "Classic"
skin.
This new Default theme would of course be the default used in Mozilla.
The "Classic" theme could be downloadable, but should not be included in
the install. Who wants Mozilla to look like a 5 year old application?
Jonas Jørgensen
> My suggestion is that a new "Default" theme should be created, which
> would be using native widgets like the "Classic" theme, but with much
> more modern buttons.
Seconded. Let's have a Default theme which has good-looking toolbar
icons and which looks, walks and smells like a native browser.
(BTW, you meant to write "Default", not "Modern" in the subject, right?)
/Jonas
--
Anyone who considers arithmetical methods of producing random digits is,
of course, in a state of sin.
- John Von Neumann, 1951
David Tenser
> David Tenser wrote:
>
>> My suggestion is that a new "Default" theme should be created, which
>> would be using native widgets like the "Classic" theme, but with much
>> more modern buttons.
>
>
> Seconded. Let's have a Default theme which has good-looking toolbar
> icons and which looks, walks and smells like a native browser.
Exactly my suggestion. This theme would also, in my opinion, replace the
current "Classic" theme. The "Default" skin would be the default theme
and "Modern" would be available as an alternative skin just as it is
today. My point is, why defaulting to an obsolete Netscape Navigator
theme? This only makes users who care about design think that Mozilla is
an old-fashioned browser, when it really isn't.
> (BTW, you meant to write "Default", not "Modern" in the subject, right?)
Right. I came up with the "Default" theme name *after* writing the
subject line. :)
David Tenser
RFE for this in Bugzilla, but found none.
John Dobbins
I Would go even farther than this. "Classic" looks too much like
Netscape's 4.x software and does little to establish Mozilla's idenity
as an independant organization. Netscape is using "Modern" as it's
default theme and it's new "signiture". Both "Classic" and "Modern
should be considered part of Netscape's branded version. Mozilla should
ship with two different themes to give it it's own idenity. One should
have the "native" widgets, the other should demostrate the capibilites
of skinning.
Expanding on this I would also like to see Mozilla drop the Netscape
names for the program sections getting rid of names associated with
Netscape like "Navigator". This change should go farther than just
replacing each instance of the old name with a different one. The name
should be replaced with a string that is defined in one common location
so a third party like Netscape can set a new browser name globaly by
editing a single file.
John Dobbins
Matthew Thomas
>...
> My suggestion is that a new "Default" theme should be created, which
> would be using native widgets like the "Classic" theme, but with much
> more modern buttons.
Classic is *supposed* to look like a contemporary native app on each
platform where it runs. The only reason it uses the smelly 4.x icons is
because no-one has submitted a complete set of better icons.
Here are some guidelines for designing good toolbar icons for Classic,
so y'all don't go wasting too much time.
1. To start with, we need icons for Back, Forward, Stop, Refresh, Home,
Search, Bookmarks, History, Mail, and Edit. (Remember, it's the lack
of icons which is blocking the Navigator toolbar dehorkage.)
2. To fit with Windows UI guidelines, supply the icons in two sizes,
16 pixels * 16 pixels and 24 pixels * 24 pixels. Start with 16
pixels * 16 pixels, because they'll be used by default until we have
a GUI for changing sizes, and because that will stop you from making
icons which are too complicated.
3. To fit with Windows XP and Mac OS X style, the icons should be
anti-aliased using an alpha channel (this means PNG), and look like
translucent blobs of glass/plastic. How do you do that? Make the
shapes a gradient from light on the bottom/right half to darker on
the top/left half, then apply a sharper light highlight along the
top/left.
4. However, the icons should still look *relatively* flat. If they
protrude from the screen too much, users will be subconsciously
misled into thinking they need to find a flat section of the icon to
click, lest their mouse slide off the edge, and that will slow them
down. While Chimera's <http://chimera.mozdev.org/> icons are poor in
most respects, they're good in this respect -- they're
three-dimensional, but not excessively so.
5. You can use as many colors as you like, but it's best if the
extremes of your gradients are Web-safe colors (i.e. the R, G, and B
components are each 00/33/66/99/CC/FF). That way, the dithering
won't be too bad for those with 256-color displays (e.g. a lot of
X11 users).
6. The icons should have a 1-pixel black-or-dark-colored outline, for
the same reason -- graceful degradation on low-colored displays. For
easy anti-aliasing, you may find it easier to draw the icons at
twice real size and then resize them, in which case you'll need to
draw the outlines 2 pixels thick.
7. To maximize user speed, the icons should be simple in shape, and
distinct in shape. For example, it would be a bad idea for the Stop
and Reload icons to both be circular.
8. To maximize user speed, the icons should be distinct in color. For
example, the Back and Forward buttons should be *different* shades
of green, Stop of course is red, Reload could be blue, Home might be
maroon, Search dark gray (a pair of binoculars), and so on. Don't do
what Internet Explorer 4.x/5.x does on Windows, which is not
providing the color until just after you needed it, i.e. on
mouseover. (In fact, it's best if you don't have different mouseover
appearance at all, since that just wastes the user's time when they
pass over the button on the way to another control.)
9. However, the icons should not be *too* bright, otherwise they'll be
distracting for people reading Web pages. Strike a balance. In
addition, the default set of buttons should be a balanced spectrum
of color; don't do what Netscape 1.x, 2.x, 3.x, 4.x, and
mozilla/browser do, which is skew the whole set towards a wan shade
of blue.
10. Once you've finished, produce blue monochrome versions of the icons
for use in Modern (to replace the current circle-within-a-button
silliness, and to allow the Navigator toolbar dehorkage). If the
icons aren't obvious enough once you've done this, then you weren't
paying enough attention to guideline #7.
Have fun ...
--
Matthew `mpt' Thomas, Mozilla UI Design component default assignee thing
<http://mpt.phrasewise.com/>
John Dobbins
> On Sun, 09 Jun 2002 12:14:46 +1200,
> Matthew Thomas <m...@myrealbox.com> wrote:
> : David Tenser wrote:
>
> :> My suggestion is that a new "Default" theme should be created, which
> :> would be using native widgets like the "Classic" theme, but with much
> :> more modern buttons.
>
> : Classic is *supposed* to look like a contemporary native app on each
> : platform where it runs. The only reason it uses the smelly 4.x icons is
> : because no-one has submitted a complete set of better icons.
>
>
>
> (If not, what's keeping the Giovanni/Grayrest icons out of the tree, for
> example?)
Good old bug 28028. One of the Icons has the red dino head, and they all
contain the "M" that is used in the throbber.
There shouldn't be a problem with images that don't contain Mozilla's
art work IF it's original, that is not something that was ripped off
from a web site or the UI of another program.
Make sure you avoid gifs for legal reasons. Mozilla.org has no way to
insure that outside gifs were created with legal licensed software.
Unisys's bogus patent still has another year to run, and if your
software isn't legal then Unisys didn't get their fee making your gifs
illegal.
>
>
> : 1. To start with, we need icons for Back, Forward, Stop, Refresh, Home,
> : Search, Bookmarks, History, Mail, and Edit. (Remember, it's the lack
> : of icons which is blocking the Navigator toolbar dehorkage.)
>
>
> *splutter* Is that really what's been blocking it?! Eegh ...
>
>
> : Have fun ...
>
>
> This post should be adapted as an icon how-to.
>
>
David Tenser
Matthew Thomas wrote:
> Here are some guidelines for designing good toolbar icons for Classic,
> so y'all don't go wasting too much time.
>
> 3. To fit with Windows XP and Mac OS X style, the icons should be
> anti-aliased using an alpha channel (this means PNG), and look like
> translucent blobs of glass/plastic. How do you do that? Make the
> shapes a gradient from light on the bottom/right half to darker on
> the top/left half, then apply a sharper light highlight along the
> top/left.
Could you please be more specific... How do I do this in Photoshop? What
filters/effects are in use?
> 6. The icons should have a 1-pixel black-or-dark-colored outline, for
> the same reason -- graceful degradation on low-colored displays. For
> easy anti-aliasing, you may find it easier to draw the icons at
> twice real size and then resize them, in which case you'll need to
> draw the outlines 2 pixels thick.
Do you mean the outer edge of the icons should have a black 1-pixel
outline, or do you mean also the edges inside?
> (In fact, it's best if you don't have different mouseover
> appearance at all, since that just wastes the user's time when they
> pass over the button on the way to another control.)
I'll probably just highlight the icons as mouseover versions (e.g. apply
some more light to the icons). Use them or waste them.
> 10. Once you've finished, produce blue monochrome versions of the icons
> for use in Modern (to replace the current circle-within-a-button
> silliness, and to allow the Navigator toolbar dehorkage). If the
> icons aren't obvious enough once you've done this, then you weren't
> paying enough attention to guideline #7.
What about disabled icons then? Should they use a high level of
alpha-transparency, or should they be gray? Or maybe a combination?
Johnny Yen
snip
>
> 8. .....(In fact, it's best if you don't have different mouseover
> appearance at all, since that just wastes the user's time when they
> pass over the button on the way to another control.)
>
I have to dissagree with you on this one. A mouseover is very much
needed (and expected) in a modern design and it, oft times, is your main
indication that the window has focus without clicking on it.
Otherwise, very good process.
jy
yatsu
Well, except on Windows.
Mouseovers really serve no purpose. However, incidentially, they can be
useful to tell if an application has crashed (a Windows-only feature ;)
Matthew Thomas
>...
> Matthew Thomas wrote:
>...
> > 3. To fit with Windows XP and Mac OS X style, the icons should be
> > anti-aliased using an alpha channel (this means PNG), and look
> > like translucent blobs of glass/plastic. How do you do that?
> > Make the shapes a gradient from light on the bottom/right half
> > to darker on the top/left half, then apply a sharper light
> > highlight along the top/left.
>
> Could you please be more specific... How do I do this in Photoshop?
> What filters/effects are in use?
I don't know, I don't have Photoshop, sorry.
> > 6. The icons should have a 1-pixel black-or-dark-colored outline,
> > for the same reason -- graceful degradation on low-colored
> > displays. For easy anti-aliasing, you may find it easier to draw
> > the icons at twice real size and then resize them, in which case
> > you'll need to draw the outlines 2 pixels thick.
>
> Do you mean the outer edge of the icons should have a black 1-pixel
> outline, or do you mean also the edges inside?
Preferably both, though you can elide the outline on inner edges if
you're really cramped.
>...
> What about disabled icons then? Should they use a high level of
> alpha-transparency, or should they be gray? Or maybe a combination?
I think we'd just apply a very low -moz-opacity. More consistent, more
performant, and less flickery than having special graphics for it.
Jonas Jørgensen
> Mouseovers really serve no purpose. However, incidentially, they can be
> useful to tell if an application has crashed (a Windows-only feature ;)
Make that an IE-only feature. This does indeed make mouseover effects in
IE very useful, but obviously Mozilla doesn't need them ;-)
/Jonas
--
Q: Will the virus impact my Macintosh if I am using a non-Microsoft
e-mail program, such as Eudora? A: If you are using an [sic!] Macintosh
e-mail program that is not from Microsoft, we recommend checking with
that particular company. But most likely other e-mail programs like
Eudora are not designed to enable virus replication.
- http://www.microsoft.com/mac/products/office/2001/virus_alert.asp
Henri Sivonen
David Tenser <david.tenser_at_telia.com> wrote:
> My point is, why defaulting to an obsolete Netscape Navigator
> theme?
When the decision of the default was made, the alternative (Modern 1)
looked like this: http://www.hut.fi/~hsivonen/screen/mozilla-m16.png
--
Henri Sivonen
hsiv...@niksula.hut.fi
http://www.hut.fi/u/hsivonen/
Sailfish
> yatsu wrote:
>
>> Mouseovers really serve no purpose. However, incidentially, they can
>> be useful to tell if an application has crashed (a Windows-only
>> feature ;)
>
>
> Make that an IE-only feature. This does indeed make mouseover effects in
> IE very useful, but obviously Mozilla doesn't need them ;-)
>
> /Jonas
>
Last two posts were way-funny. This entire thread is way-useful...
--
Best Regards,
Pat
"Surfin' the Net...grappling with the 3rd Wave"
Got a message? Project It!? http://www.projectit.com/
David Tenser
> David Tenser wrote:
>
>>...
>>Matthew Thomas wrote:
>>...
>>
>>>3. To fit with Windows XP and Mac OS X style, the icons should be
>>> anti-aliased using an alpha channel (this means PNG), and look
>>> like translucent blobs of glass/plastic. How do you do that?
>>> Make the shapes a gradient from light on the bottom/right half
>>> to darker on the top/left half, then apply a sharper light
>>> highlight along the top/left.
>>
>>Could you please be more specific... How do I do this in Photoshop?
>>What filters/effects are in use?
>
>
> I don't know, I don't have Photoshop, sorry.
I'll have to experiment then. No problem.
> I think we'd just apply a very low -moz-opacity. More consistent, more
> performant, and less flickery than having special graphics for it.
In other words, I don't have to make these disabled icons? What exactly
is -moz-opacity? Is it an XUL feature that makes graphics transparent?
If so, are there any "-moz-gamma" or something similar, to
highlight/lighten up the icons for the mouseover icons? If so, I
wouldn't have to make those either. (I know you said you didn't find
hover icons needed, but I strongly disagree)
Finally, where should I send in the icons when I've made the first ones
(Back, Forward, Home, Stop, etc.)? Is there a bug rfe to post an
attachment, or should I send it to you in person?
David Tenser
*horrible*
KaiRo - Robert Kaiser
>>theme?
>
> When the decision of the default was made, the alternative (Modern 1)
> looked like this: http://www.hut.fi/~hsivonen/screen/mozilla-m16.png
True. And I really liked that modern1 theme at that time...
Maybe someone finds the time to revive it...
Robert Kaiser
Greg K.
Looks may not be everything, but SHEESH.
In article <hsivonen-BCAAA6...@news.jippii.fi>,
Al Vining
>
> Could you please be more specific... How do I do this in Photoshop? What
> filters/effects are in use?
To some extent, see:
Creating Windows XP Icons
http://msdn.microsoft.com/library/en-us/dnwxp/html/winxpicons.asp
Aqua Human Interface Guidelines : Icons
http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/AHIGIcons/
The XP ones seem saner... (and more useful: "For great-looking Aqua
icons, have a professional graphic designer create them.")
Al.
Jonas Jørgensen
>> I think we'd just apply a very low -moz-opacity. More consistent, more
>> performant, and less flickery than having special graphics for it.
>
> In other words, I don't have to make these disabled icons? What exactly
> is -moz-opacity? Is it an XUL feature that makes graphics transparent?
It's a CSS property similar to CSS3's 'opacity' property:
http://www.w3.org/TR/css3-color/#transparency
> If so, are there any "-moz-gamma" or something similar, to
> highlight/lighten up the icons for the mouseover icons? If so, I
> wouldn't have to make those either. (I know you said you didn't find
> hover icons needed, but I strongly disagree)
>
> Finally, where should I send in the icons when I've made the first ones
> (Back, Forward, Home, Stop, etc.)? Is there a bug rfe to post an
> attachment, or should I send it to you in person?
>
--
Kevin Gerich
>>What about disabled icons then? Should they use a high level of
>>alpha-transparency, or should they be gray? Or maybe a combination?
>
>
> I think we'd just apply a very low -moz-opacity. More consistent, more
> performant, and less flickery than having special graphics for it.
>
Assuming that -moz-opacity ever gets fixed. It has been broken for a
long time.
from bug #33601 (http://bugzilla.mozilla.org/show_bug.cgi?id=33601):
------- Additional Comment #54 From Robert O'Callahan 2002-05-17 14:02
opacity is fundamentally broken and is not a priority for 1.0.
Matthew Thomas
>
> Matthew Thomas wrote:
>...
> > I think we'd just apply a very low -moz-opacity. More consistent,
> > more performant, and less flickery than having special graphics for
> > it.
>
> In other words, I don't have to make these disabled icons?
That's right.
> What
> exactly is -moz-opacity? Is it an XUL feature that makes graphics
> transparent?
`-moz-opacity' is a CSS property for applying transparency to anything,
not just graphics. It has been implemented in Mozilla, in preparation
for the `opacity' property which is being defined in CSS3. CSS3 isn't
standardized yet, which is why our property is called `-moz-opacity' --
we don't want authors running off and using `opacity: 80%', only to have
the meaning changed later in the standards process such that they should
be using `opacity: 20%' instead. By using `-moz-opacity', authors accept
that the effect of the property might change in the future.
And before you ask, no, it doesn't work for making whole windows
semi-transparent.
> If so, are there any "-moz-gamma" or something similar,
> to highlight/lighten up the icons for the mouseover icons?
>...
Not that I know of.
> Finally, where should I send in the icons when I've made the first
> ones (Back, Forward, Home, Stop, etc.)? Is there a bug rfe to post an
> attachment, or should I send it to you in person?
Put them on the Web and post the address here. We don't want this to
turn into another splash screen debacle, now, do we? :-)
Henri Sivonen
David Tenser <david.tenser_at_telia.com> wrote:
> Could you please be more specific... How do I do this in Photoshop? What
> filters/effects are in use?
http://www.pixelcentric.net/aquaicons.html
Henri Sivonen
Matthew Thomas <m...@myrealbox.com> wrote:
> > Do you mean the outer edge of the icons should have a black 1-pixel
> > outline, or do you mean also the edges inside?
>
> Preferably both, though you can elide the outline on inner edges if
> you're really cramped.
Neither Aqua nor Luna has icons with black outlines. If the goal is to
look like a native app on OS X and Windows XP, the icons should probably
use some other way of making the shapes recognizable.
David Tenser
> In article <3D035306...@myrealbox.com>,
> Matthew Thomas <m...@myrealbox.com> wrote:
>
>
>>>Do you mean the outer edge of the icons should have a black 1-pixel
>>>outline, or do you mean also the edges inside?
>>
>>Preferably both, though you can elide the outline on inner edges if
>>you're really cramped.
>
>
> Neither Aqua nor Luna has icons with black outlines. If the goal is to
> look like a native app on OS X and Windows XP, the icons should probably
> use some other way of making the shapes recognizable.
That's correct. Few IE6 toolbar icons have black outlines (but they do
have anti-aliased, *slightly* darker ones). I'm about to create a set of
icons that have the XP alpha shadowing and color palette, but I will
also try to follow the other "rules" in
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp.
According to that document, the outline doesn't even have to be black.
"A drop shadow provides contrast and dimension. [...] Outlines provide
definition."
Look at the Media toolbar icon in IE6. That one doesn't have an outline
at all, just a shadow.
A.Roch.
> 2. To fit with Windows UI guidelines, supply the icons in two sizes,
> 16 pixels * 16 pixels and 24 pixels * 24 pixels. Start with 16
> pixels * 16 pixels, because they'll be used by default until we have
> a GUI for changing sizes, and because that will stop you from making
> icons which are too complicated.
Why should the 16*16px be used by default? I know of no other browser
in which it is the case. Also, using 24*24px by default would provide
an inexperienced computer user, who is unlikely to set the size of the
icons via some preferences panel, an easier to hit target by making
the buttons bigger. I do agree about the fact that the icon should be
simple enough to look good at very small size though.
> 3. To fit with Windows XP and Mac OS X style, the icons should be
> anti-aliased using an alpha channel (this means PNG), and look like
> translucent blobs of glass/plastic. How do you do that? Make the
> shapes a gradient from light on the bottom/right half to darker on
> the top/left half, then apply a sharper light highlight along the
> top/left.
I don't see why the style of the icon particularly, icons looking like
blobs of glass, should be imposed. The only OS that seems to make
heavy use of this visual style seems to be Mac OS X (not Win XP) and
even there, most *icons* do not support that look (look at the finder
for instance). In my opinion, very often, it makes the icon more
difficult to discern and should not be a necessity.
[deleted some very relevant rules here :) ]
> 9. However, the icons should not be *too* bright, otherwise they'll be
> distracting for people reading Web pages. Strike a balance. In
> addition, the default set of buttons should be a balanced spectrum
> of color; don't do what Netscape 1.x, 2.x, 3.x, 4.x, and
> mozilla/browser do, which is skew the whole set towards a wan shade
> of blue.
I agree with this but, I do think it is okay to use bright color on a
particularly important icon (e.g. the back button). It is important
not to abuse this rule though because if too many icons are bright, it
looses its emphasis value...
How many time have you been asked "How do I go back to where I was?",
even though there is a button named "Back" ?
Putting the back button brighter would help... a little.
--
Alexandre Rochette
<roch...@pandore.qc.ca>
David Tenser
> Matthew Thomas <m...@myrealbox.com> wrote in message news:<3D029DF6...@myrealbox.com>...
>
>>2. To fit with Windows UI guidelines, supply the icons in two sizes,
>> 16 pixels * 16 pixels and 24 pixels * 24 pixels. Start with 16
>> pixels * 16 pixels, because they'll be used by default until we have
>> a GUI for changing sizes, and because that will stop you from making
>> icons which are too complicated.
>
>
> Why should the 16*16px be used by default? I know of no other browser
> in which it is the case. Also, using 24*24px by default would provide
> an inexperienced computer user, who is unlikely to set the size of the
> icons via some preferences panel, an easier to hit target by making
> the buttons bigger. I do agree about the fact that the icon should be
> simple enough to look good at very small size though.
I completely agree. In my opinion, the 24x24 icons should be default, as
in IE6 (and Mozilla, for mail/news). I will of course make both formats
though, and they will look good in both sizes (hopefully!!)
>>3. To fit with Windows XP and Mac OS X style, the icons should be
>> anti-aliased using an alpha channel (this means PNG), and look like
>> translucent blobs of glass/plastic. How do you do that? Make the
>> shapes a gradient from light on the bottom/right half to darker on
>> the top/left half, then apply a sharper light highlight along the
>> top/left.
>
>
> I don't see why the style of the icon particularly, icons looking like
> blobs of glass, should be imposed. The only OS that seems to make
> heavy use of this visual style seems to be Mac OS X (not Win XP) and
> even there, most *icons* do not support that look (look at the finder
> for instance). In my opinion, very often, it makes the icon more
> difficult to discern and should not be a necessity.
The MacOS X guidelines even says that toolbar icons should *not* look
like translucent blobs! So I agree here too. I will not make them look
like plastic/glass, but they will have the same alpha shadow as Windows
XP icons.
> [deleted some very relevant rules here :) ]
>
>>9. However, the icons should not be *too* bright, otherwise they'll be
>> distracting for people reading Web pages. Strike a balance. In
>> addition, the default set of buttons should be a balanced spectrum
>> of color; don't do what Netscape 1.x, 2.x, 3.x, 4.x, and
>> mozilla/browser do, which is skew the whole set towards a wan shade
>> of blue.
>
> I agree with this but, I do think it is okay to use bright color on a
> particularly important icon (e.g. the back button). It is important
> not to abuse this rule though because if too many icons are bright, it
> looses its emphasis value...
> How many time have you been asked "How do I go back to where I was?",
> even though there is a button named "Back" ?
None.
> Putting the back button brighter would help... a little.
Maybe. mpt tells me that I should make the back/forward buttons in
different shades of green. I personally don't think this is necessary,
since you should be able to easily distinguish an arrow pointing to the
left from an arrow pointing to the right, even though they use the same
color. I even think using the same color helps indicating that these are
two closely related icons. mpt, what's your thought about this?
Lauri Kieksi
> A.Roch. wrote:
> > Matthew Thomas <m...@myrealbox.com> wrote in message news:<3D029DF6...@myrealbox.com>...
> >
> >>2. To fit with Windows UI guidelines, supply the icons in two sizes,
> >> 16 pixels * 16 pixels and 24 pixels * 24 pixels. Start with 16
> >> pixels * 16 pixels, because they'll be used by default until we have
> >> a GUI for changing sizes, and because that will stop you from making
> >> icons which are too complicated.
> >
> >
> > Why should the 16*16px be used by default? I know of no other browser
> > in which it is the case. Also, using 24*24px by default would provide
> > an inexperienced computer user, who is unlikely to set the size of the
> > icons via some preferences panel, an easier to hit target by making
> > the buttons bigger. I do agree about the fact that the icon should be
> > simple enough to look good at very small size though.
>
> I completely agree. In my opinion, the 24x24 icons should be default, as
> in IE6 (and Mozilla, for mail/news). I will of course make both formats
> though, and they will look good in both sizes (hopefully!!)
As per Aqua Human Interface Guidelines, the default (and only) toolbar
icon size on Mac OS X is 32x32. So if these icons are to be used in
the Mac OS X version, then there has to be a set of icons at that
size. For Windows I'd suggest using the 24x24 size as the default,
since 16 squared is just ridiculously small for frequently used
interface elements.
> >>3. To fit with Windows XP and Mac OS X style, the icons should be
> >> anti-aliased using an alpha channel (this means PNG), and look like
> >> translucent blobs of glass/plastic. How do you do that? Make the
> >> shapes a gradient from light on the bottom/right half to darker on
> >> the top/left half, then apply a sharper light highlight along the
> >> top/left.
> >
> >
> > I don't see why the style of the icon particularly, icons looking like
> > blobs of glass, should be imposed. The only OS that seems to make
> > heavy use of this visual style seems to be Mac OS X (not Win XP) and
> > even there, most *icons* do not support that look (look at the finder
> > for instance). In my opinion, very often, it makes the icon more
> > difficult to discern and should not be a necessity.
>
> The MacOS X guidelines even says that toolbar icons should *not* look
> like translucent blobs! So I agree here too. I will not make them look
> like plastic/glass, but they will have the same alpha shadow as Windows
> XP icons.
Indeed, Mac OS X toolbar icons (or Finder icons, for that matter)
should not be translucent blobs. Aqua icons should contain
translucency and gloss only when it helps the icon tell its story
(such as in a search icon's magnifying glass) -- not when it looks
"cool". Microsoft has fallen into this "pretty shinies" trap with IE
for Mac, and the look (like the browser itself) stinks and looks very
out-of-place. Proper Mac OS X toolbar icons are quite similar to
Windows XP toolbar icons, except that instead of the slightly cartoon
look used in XP, the OS X icons employ a more realistic look as far as
color, shading and texture go.
John Dobbins
platform application or are y'all forgetting about Linux, the BSDs and Unix?
http://developer.kde.org/documentation/standards/kde/style/basics/
John Dobbins
Sailfish
Very informative thread ... very interesting post, imo.
David Tenser
> As per Aqua Human Interface Guidelines, the default (and only) toolbar
> icon size on Mac OS X is 32x32. So if these icons are to be used in
> the Mac OS X version, then there has to be a set of icons at that
> size.
Once I've made a set of good looking icons, there should be little
trouble making different sizes of them, including 32x32.
> For Windows I'd suggest using the 24x24 size as the default,
> since 16 squared is just ridiculously small for frequently used
> interface elements.
I don't agree. I agree that 24x24 should be default, but 16x16 is
actually quite comfortable and gives you much window real estate (if
you're not displaying text in the toolbar buttons)
> Indeed, Mac OS X toolbar icons (or Finder icons, for that matter)
> should not be translucent blobs. Aqua icons should contain
> translucency and gloss only when it helps the icon tell its story
> (such as in a search icon's magnifying glass) -- not when it looks
> "cool". Microsoft has fallen into this "pretty shinies" trap with IE
> for Mac, and the look (like the browser itself) stinks and looks very
> out-of-place. Proper Mac OS X toolbar icons are quite similar to
> Windows XP toolbar icons, except that instead of the slightly cartoon
> look used in XP, the OS X icons employ a more realistic look as far as
> color, shading and texture go.
And I'm not sure which one is best. Based on the examples I've seen of
MacOS X icons, I think they are a little bit too realistic. An icon
should be considered a pretty symbol (like symbols you see on airports,
etc.). The key is to be informative and that as many people as possible
know what the symbol stands for. Few users care about the texture of the
little pencil next to the letter (for a "compose message" icon)...
Alexandre Rochette
> David Tenser <david.tenser_at_telia.com> wrote in message news:<aeb3f1$l...@ripley.netscape.com>...
>
>>in IE6 (and Mozilla, for mail/news). I will of course make both formats
>>though, and they will look good in both sizes (hopefully!!)
>
>
> As per Aqua Human Interface Guidelines, the default (and only) toolbar
> icon size on Mac OS X is 32x32. So if these icons are to be used in
> the Mac OS X version, then there has to be a set of icons at that
> size. For Windows I'd suggest using the 24x24 size as the default,
> since 16 squared is just ridiculously small for frequently used
> interface elements.
From the Apple HIG,
Toolbars should conserve screen real estate while
still being inviting and easily clickable; 32 pixels by 32 pixels is the
recommended
size for toolbar icons.
So 32*32px is the recommended icon size but not necessarly, as you say,
"the default (and only)" toolbar icon size (look at ms office for instance).
Also, I think 16x16 icons is a perfectly good choice for an advanced
user at lower resolution
(snip)
> Indeed, Mac OS X toolbar icons (or Finder icons, for that matter)
> should not be translucent blobs. Aqua icons should contain
> translucency and gloss only when it helps the icon tell its story
> (such as in a search icon's magnifying glass) -- not when it looks
> "cool". Microsoft has fallen into this "pretty shinies" trap with IE
> for Mac, and the look (like the browser itself) stinks and looks very
> out-of-place. Proper Mac OS X toolbar icons are quite similar to
> Windows XP toolbar icons, except that instead of the slightly cartoon
> look used in XP, the OS X icons employ a more realistic look as far as
> color, shading and texture go.
Also, Mac OS X HIG gives more importance to the perspective of the icons
than on Windows although both MS and Apple seems to think that icons on
toolbar should look as if they were right in front of you (a lot of
icons in the current classic skin do not follow this at all).
--
Alexandre Rochette (A.Roch.)
Alexandre Rochette
> I See the Mac and Windows guidelines. Is Mozilla going to become a dual
> platform application or are y'all forgetting about Linux, the BSDs and
> Unix?
>
> http://developer.kde.org/documentation/standards/kde/style/basics/
Also how about
http://developer.gnome.org/projects/gup/hig/hig-0.1/icons.html ?
It's not all that clear wich HIGs Mozilla should follow on unix/linux as
it is not a kde application at all and not a gnome app either.
The thing is, with mpts original suggestions, the toolbar would be
compliant with most of the icons guidelines from the Gnome HIG. (except
maybe for the fact that it states icons should default at 24*24px)
Matthew Thomas
>...
> Neither Aqua nor Luna has icons with black outlines.
I said `black-or-dark-colored'. Aqua has such outlines in its icons
<http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/art/iconfamily.gif>,
and so does Luna <http://msdn.microsoft.com/library/en-us/dnwxp/html/winxpicons8.gif>.
Matthew Thomas
>
> I See the Mac and Windows guidelines. Is Mozilla going to become a
> dual platform application or are y'all forgetting about Linux, the
> BSDs and Unix?
If Mozilla on X had Qt Classic and GTK+ Classic themes included by
default, instead of Windows Classic, then it could indeed have KDE-style
icons in Qt Classic.
As X users get more and more used to the sort of theme-consistent GUI
which KDE or Gnome provide, they're going to become less tolerant of
programs like Mozilla which don't look like the rest of the programs on
their platform.
Matthew Thomas
> > 2. To fit with Windows UI guidelines, supply the icons in two
> > sizes, 16 pixels * 16 pixels and 24 pixels * 24 pixels. Start
> > with 16 pixels * 16 pixels, because they'll be used by default
> > until we have a GUI for changing sizes, and because that will
> > stop you from making icons which are too complicated.
>
> Why should the 16*16px be used by default? I know of no other browser
> in which it is the case.
As far as I know, 16 * 16 pixels is the default in Netscape versions
1.x, 2.x, and 3.x (all platforms), and Internet Explorer versions 2, 3,
4, 5.0, and 5.5 for Windows. Approximately 18 * 18 pixels is the default
(and only choice) in Internet Explorer 5.0 and 5.1 for Mac.
> Also, using 24*24px by default would provide
> an inexperienced computer user, who is unlikely to set the size of the
> icons via some preferences panel, an easier to hit target by making
> the buttons bigger.
Yes, but currently, Mozilla (a) provides no method of turning off the
text labels for the buttons, (b) provides no method of horizontally
arranging toolbars, and (c) has a user base with a high pain threshold.
Once (a) and (b) are fixed, *then* perhaps the default could be changed
to 24 * 24 pixels.
>...
> > 3. To fit with Windows XP and Mac OS X style, the icons should be
> > anti-aliased using an alpha channel (this means PNG), and look
> > like translucent blobs of glass/plastic. How do you do that?
> > Make the shapes a gradient from light on the bottom/right half
> > to darker on the top/left half, then apply a sharper light
> > highlight along the top/left.
>
> I don't see why the style of the icon particularly, icons looking like
> blobs of glass, should be imposed. The only OS that seems to make
> heavy use of this visual style seems to be Mac OS X (not Win XP)
<http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp>
Though perhaps it looks a bit more like plastic than like glass.
> and
> even there, most *icons* do not support that look (look at the finder
> for instance).
The glassy style is used in OmniWeb, Internet Explorer, Chimera, and of
course Aqua windows and controls themselves.
> In my opinion, very often, it makes the icon more
> difficult to discern and should not be a necessity.
True.
Alexandre Rochette
> "A.Roch." wrote:
>
>>Matthew Thomas <m...@myrealbox.com> wrote in message
>>...
>>
>>>2. To fit with Windows UI guidelines, supply the icons in two
>>> sizes, 16 pixels * 16 pixels and 24 pixels * 24 pixels. Start
>>> with 16 pixels * 16 pixels, because they'll be used by default
>>> until we have a GUI for changing sizes, and because that will
>>> stop you from making icons which are too complicated.
>>
>>Why should the 16*16px be used by default? I know of no other browser
>>in which it is the case.
>
>
> As far as I know, 16 * 16 pixels is the default in Netscape versions
> 1.x, 2.x, and 3.x (all platforms), and Internet Explorer versions 2, 3,
> 4, 5.0, and 5.5 for Windows. Approximately 18 * 18 pixels is the default
> (and only choice) in Internet Explorer 5.0 and 5.1 for Mac.
Er. You're right, I meant "no current browser"...
Although I believe the default size for IE 4, 5.x and 6 is dependant on
what win32 variant it is installed on (e.g. win95 had 24px², win2000
16px²). But this, of course, is irrelevant :)
>> Also, using 24*24px by default would provide
>>an inexperienced computer user, who is unlikely to set the size of the
>>icons via some preferences panel, an easier to hit target by making
>>the buttons bigger.
>
>
> Yes, but currently, Mozilla (a) provides no method of turning off the
> text labels for the buttons, (b) provides no method of horizontally
> arranging toolbars, and (c) has a user base with a high pain threshold.
> Once (a) and (b) are fixed, *then* perhaps the default could be changed
> to 24 * 24 pixels.
I agree.
(c) should not be an argument though because if we base design decisions
on a facts like this, the situation will never improve.
>>>3. To fit with Windows XP and Mac OS X style, the icons should be
>>> anti-aliased using an alpha channel (this means PNG), and look
>>> like translucent blobs of glass/plastic. How do you do that?
>>> Make the shapes a gradient from light on the bottom/right half
>>> to darker on the top/left half, then apply a sharper light
>>> highlight along the top/left.
>>
>>I don't see why the style of the icon particularly, icons looking like
>>blobs of glass, should be imposed. The only OS that seems to make
>>heavy use of this visual style seems to be Mac OS X (not Win XP)
>
>
> <http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwxp/html/winxpicons.asp>
>
> Though perhaps it looks a bit more like plastic than like glass.
Sorry, I misinterpreted your initial description of the style slightly.
--
Alexandre Rochette
Lauri Kieksi
> Lauri Kieksi wrote:
> > David Tenser <david.tenser_at_telia.com> wrote in message news:<aeb3f1$l...@ripley.netscape.com>...
> >
> >>I completely agree. In my opinion, the 24x24 icons should be default, as
> >>in IE6 (and Mozilla, for mail/news). I will of course make both formats
> >>though, and they will look good in both sizes (hopefully!!)
> >
> >
> > As per Aqua Human Interface Guidelines, the default (and only) toolbar
> > icon size on Mac OS X is 32x32. So if these icons are to be used in
> > the Mac OS X version, then there has to be a set of icons at that
> > size. For Windows I'd suggest using the 24x24 size as the default,
> > since 16 squared is just ridiculously small for frequently used
> > interface elements.
>
> From the Apple HIG,
> Toolbars should conserve screen real estate while
> still being inviting and easily clickable; 32 pixels by 32 pixels is the
> recommended
> size for toolbar icons.
> So 32*32px is the recommended icon size but not necessarly, as you say,
> "the default (and only)" toolbar icon size (look at ms office for instance).
>
> Also, I think 16x16 icons is a perfectly good choice for an advanced
> user at lower resolution
You're correct, the HIG does state that 32x32 is a recommendation --
but for instance the OS X Cocoa toolbar API automatically assumes that
the icons passed to it are 32x32. Of course, in the case of Mozilla,
we're not dealing with the Cocoa API at all, but it's still a healthy
idea to work with 32x32's to stay consistent with most other OS X
applications, a lot of which use the Cocoa toolbar system, and a big
portion of the rest mimic the behavior (like IE for Mac, for example).
David Tenser already suggested that 32x32 versions could be produced,
and I think that's a very good thing.
I don't really think OS X's Office is a good example of a functional
Mac OS X interface. Icons in pushbutton controls, non-standard toolbar
buttons and popup-buttons... And the toolbar icon size seems like a
compromise -- so as to get more of them to fit into a single toolbar
pallette and to make the Office v.X package look somewhat like the
Windows equivalent -- more than anything.
> (snip)
> > Indeed, Mac OS X toolbar icons (or Finder icons, for that matter)
> > should not be translucent blobs. Aqua icons should contain
> > translucency and gloss only when it helps the icon tell its story
> > (such as in a search icon's magnifying glass) -- not when it looks
> > "cool". Microsoft has fallen into this "pretty shinies" trap with IE
> > for Mac, and the look (like the browser itself) stinks and looks very
> > out-of-place. Proper Mac OS X toolbar icons are quite similar to
> > Windows XP toolbar icons, except that instead of the slightly cartoon
> > look used in XP, the OS X icons employ a more realistic look as far as
> > color, shading and texture go.
>
> Also, Mac OS X HIG gives more importance to the perspective of the icons
> than on Windows although both MS and Apple seems to think that icons on
> toolbar should look as if they were right in front of you (a lot of
> icons in the current classic skin do not follow this at all).
True. Toolbar icons should be quite flat, pictured from a perspective
that's straight-on, and not be as detailed as file system icons in Mac
OS X. In many respects this makes OS X toolbar icons similar to XP
icons.
John Dobbins
> John Dobbins wrote:
>
>>I See the Mac and Windows guidelines. Is Mozilla going to become a
>>dual platform application or are y'all forgetting about Linux, the
>>BSDs and Unix?
>>...
>
>
> If Mozilla on X had Qt Classic and GTK+ Classic themes included by
> default, instead of Windows Classic, then it could indeed have KDE-style
> icons in Qt Classic.
>
> As X users get more and more used to the sort of theme-consistent GUI
> which KDE or Gnome provide, they're going to become less tolerant of
> programs like Mozilla which don't look like the rest of the programs on
> their platform.
>
When Classic was first introduced it had a Unix version that tended more
towards GTK than Qt, but it was dropped. I am working on a KDE look
theme however.
John Dobbins
to just replacing the old icns with newer versions that are just slight
improvements.
http://bugzilla.mozilla.org/show_bug.cgi?id=150535
John