Hylke’s Home
Posts tagged “”

Saturday, April 19th, 2008

Pretty GNOME clock

You can make your clock applet prettier by changing two lines with gconf-editor. Here’s how to do it:

Pretty GNOME clock applet.

Thursday, April 3rd, 2008

Tango artists to LGM 2008

These are stickers/buttons for Libre Graphics Meeting 2008 you can print out before attending LGM, so others can recognize you! :)

Wednesday, April 2nd, 2008

Ugly notification area in GNOME

I’m writing this because I find the current layout of the GNOME notification area very ugly, and I think a lot of GNOME users agree.
The icons are all crammed in a tiny space with very little spacing. Sometimes the sizes of the icons look very inconsistent, and the horizontal spaces between that ARE there often look different in width. And, to me, it looks like the icons are always one size to big for the current panel height.

So I’d like to present my solution to the problem. Now I don’t want to start the discussion of what applications should be using the notification area. I know it’s almost never used the way it’s supposed to be used. Applications like Pidgin, Banshee and Deluge use it as a permanent nesting place (personally I think the goals of the notification area should be rewritten, but that’s a different discussion).

Current situation

The default height for the GNOME panel is 28px. The icons in there look crammed.

Monochrome icons are not the solution
I often hear the notification area is ugly, and making the icons monochrome (like MacOS X) is opted, I think this is wrong and not a solution to the real problem.
Taking away color reduces usability. Pidgin for example relies heavily on color for status, shape is only secundary. When switching to monochrome icons I think we would very soon run out of shapes, and icons will tend to look like eachother, causing confusion. It is however wise to not to overuse color in the notification area, and have some guidelines for color use. I think tones of grey and two different colors max should be enough. Color isn’t the problem, the real problem is spacing and consistency. The notification area can still be pretty with colors!

Revisit spacing and sizes

I suggest to use 16×16px icons as a the starting size (this is a mockup made by jimmac, edited by me):

The bottom panel shows the current situation.
With spacing i mean:
- The distance of the panel top to the icon top;
- The distance of the panel bottom to the icon bottom;
- The horizontal distance between the icons.
It is very important for the eye that these distances are equal. Every time the panel changes height the spacing should be recalculated.

Of course when you increase the panel height the icons should still grow. With that we to come up with some kind of formula to define how much pixels the spacing should be.

$spacing = round(0.2 * $icon_size, 0) + round(100 / $icon_size, 0);

I’m not a mathematical genius, this formula is open for change, but it has a pretty decent result (imagine the grey are to be the panel):

So the icons switch to 22×22px sizes whe the panel reaches a height of 22 + 8 + 8 = 38px.In case of this calculation 22×22px icons appear with a panel height >= 40px, 32×32px with >= 50px, etc.
These formula’s may also be useful for other applets and application launchers in the panel.

I will post the code to generate the previews soon, after i figure out how to post HTML without messing up the layout.
If anyone has more ideas how to make the notification area prettier and more consistent, please speak up! :)





© 2006—2010  Hylke Bons   
-->