One thing that I often missed in GNOME development is an easy way to apply glow and shadow effects to any kind of element. The most obvious kind of this is the lack of a built-in method to render text shadows. Selectively used in almost every single designer’s mockup, the lack of it in actual implementations has been one reason why the result is rarely as satisfying as it could be.
While some people have stated the opinion that they do not like text shadows, and they can easily be overused, this is not an excuse to make it harder than a single line of code (or CSS!) to implement them. Creating text twice is not a good solution. Despite the awkwardness of the implementation, it is also inefficient, and the reason why this approach was discarded for Maemo 5.
To give a few examples of the importance of text shadows (and glow) in modern UI design:
(Click to enlarge)
WebKit got this covered, why haven’t we? This should be well supported throughout the platform. Where and when to actually use it should not at all be a question that depends on technical issues.
Text shadows are only the tip of the iceberg though. In particular shadows and glow effects are extremely powerful and flexible assets in any GUI designer’s toolkit. We should have utility functions easily available for these effects, as well as the obvious rounded borders and multi-step gradients.
GNOME Shell is certainly on the right track, with their fairly flexible CSS styling, but many of these elements are still missing. This leads to issues like Bug 581067. If the designer wants a glow, she should be getting a glow. Something as elemental as this just shouldn’t require any significant programming effort. I am confident that GNOME Shell will get there, it’s just something to keep in mind (i.e. once the effect is implemented once, make it easily available via CSS).
Another common eye-sore is the way we utilise gradients. A rule of thumb should be: Unless the gradient is used to indicate an obviously rounded surface, the gradient should not actually be visible to the naked eye. Gradients are excellent to add sophistication to an otherwise flat surface by simulating the natural distribution of light, but gradients in itself are by and large just not an attractive design element.
Consider the new Ubuntu theme. The gradient in the panel is pretty good. Oddly enough the gradient in the titlebars is much different. While in itself it is still acceptable (due to the slight illusion of glossiness), the added menubar completely ruins it. Of course that is ultimately a symptom of the larger issue that is the separation between window frame and application (hopefully soon solved by client side decorations), but there is certainly an argument for rather not doing something than to do it badly. Also unnecessarily exaggerated is the gradient of the title button tray.
The straight-forward application of the concepts above would result in something like this:
(Yes, it’s far from perfect, but I hope it illustrates some points. I also forgot to colour the title and menu text)
What I mainly hoped to accomplish with this is to create some discussion about how we can make these things easier to do for designers and developers, and where to add these capabilities in the stack (Cairo? Pango? A graphic styles library? Gtk?). I would want to work on this.
Also, what is our answer for rich application UIs? When Webkit beats us in capabilities for desktop application UIs, something is clearly amiss.