Back to Normal

Last week I visited London to work with Richard and some Canonical guys on the Ubuntu Dapper UI. Richard uploaded a group picture. Our initial goal was to make sure that Clearlooks-Cairo would be ready and nicely polished, but we ended up redesigning almost every element in the process. I’m very happy with the result and I think it will give Dapper a fresh new face:

(click image for Dapper Flight 5 release notes with more screenshots)

It was a great experience to work with so many skilled and nice guys in one room and I think we got a lot done for just five (albeit long) days of work. Seeing London was very nice as well, although we didn’t have a lot of time to actually look at it. Maybe I’ll later show the two or three pictures I made, but it will take a while since I still use an archaic analog camera. πŸ™‚


17 responses to “Back to Normal

  1. Hey Daniel, good to see that Ubuntu folks (my personal distro of choice) are finally realising that the look and feel of the desktop is an extremely important factor for most users. You and Richards works are and have always been amazing.

    The ubuntulooks theme has it’s pros and cons for me (the main con really being the whole ‘orange / brown’ choice of colours, but that’s gonna change after Dapper so it’s not so bad). I love the ‘highlights’ around the edges of the buttons, it’s something I used to notice in Windows XP and thought “hey, that’s pretty cool”.

    I’m busy working on my website at the moment, which is taking me far too long, but after seeing the ‘Mirage’ picture from your last post I think we have a fairly similar idea of how a modern theme could look. I’ve slapped up one or two quick mockups today of a theme I’ve been thinking of for a while now and it does bare some resemblences to your Mirage theme. I have no experience with the ‘under-the-hood’ parts of GTK+/Gnome theming, but if you’d like to see the mockups or collaberate just drop me a line.

  2. Hey Gareth! Thanks for your comments. I always like to see mockups, so just bring them on. πŸ™‚

    We are also playing with the idea to make Clearlooks a more generic engine in the future, with multiple options. So good ideas might have a really good chance to make it into it.

  3. Ok I’ll get working on some good mockups as soon as I get rid of this damn flu and have a bit more free time on my hands. I have one really basic one done already, but that’s all it is… really basic. You probably know the feeling yourself, but I find myself changing the ideas in my head as I’m creating the images, so it takes more time and I find myself dissatisfied with the end result. Suppose it’s better to have more ideas than less, but it takes it’s toll on time management, and it’s the main reason my website wasn’t finished 3 months ago πŸ˜›

    Anyway, here’s the link to the first mockup…

    Probably the most agitating things to get right are the ‘file edit etc…’ toolbar and how buttons should look on hover and clicks… Also, the Window-decorator (‘minimize, maximise, close) buttons are just fill-ins, I imagine they’d look better in some type of button form rather than simply the icons. Fire ahead with the ‘constructive’ criticism, I can take it πŸ˜‰

  4. I like inner focus rings on buttons, but would like aqua-like external rings much more. They are on Richard’s Clearlooks TODO list. Alas, I cannot add any comments there. I don’t quite understand what’s the problem with external focus rings — there are already rings of shadows around widgets. Why can’t the dark outline and the space taken by shadows be reused for focus rings? Would the ring be too thin? — Jan

  5. Actually we do use external rings for button prelights. What you see on the screenshot is the marking for default buttons.

    As for the focus rings on text entries, I believe the reason we don’t do them on the outside is that it’s very tricky to get right for combo boxes. Besides, I guess we kinda got used to it.

  6. Just wondering whether my previous comment actually posted properly or not, as the ‘comments’ counter never increased after I posted it… the counter says “4 comments” when in fact there should be five. This ever happen before?

  7. Everything should be fine. πŸ™‚ Regarding your mockup, this really looks close to what I’m doing. It looks a bit too bulky for my taste though, I prefer sleek and simplistic designs (in a very fancyful way :)). I suggest you put a text shadow behind the menubar labels to give them more contrast.

  8. Thanks for the comments Daniel. I completely agree with the ‘bulkiness’ of the mockup, and I’m working on a new one now. As I said, the first one was really rushed. Looking back on it now, pretty much everything in the mockup is oversized (except the Tango icons which are directly taken from the 22×22 folder), especially the window borders and the ‘file edit view’ toolbar… that toolbar is an annoyance when trying to make a ‘blended’ type theme in any case though, so back to the drawing board I guess πŸ˜€

  9. I do like the “aqua” feel you give these. Its a nice change πŸ™‚

  10. Ugly scrollbars!

  11. I’ve played with Ubuntulooks a bit on my Ubuntu laptop, recasting it in less annoying (Clearlooks-Darjeeling) colors. I like outer hover rings on buttons, and lighting-up the stripes on scrollbars on hover (although I’m not completely happy with the look of scrollbars). Inner default-button rings are also nice.

    However, there is one thing that confuses me: when moving keyboard focus by pressing , some focused buttons are rendered as default buttons (with a colored inner ring), but some focused buttons are rendered with a black dotted focus ring. It seems this is distinction inherent in GTK, but I don’t see why there are two kinds of buttons. For a really weird example, take the Theme Preferences dialog box — when focused, Help is rendered as the default button, but all other buttons only get the dotted focus ring. Shouldn’t all focused buttons be rendered the same?

    A related question: What about getting rid of dotted focus rings completely and using color rings instead for all controls. I understand this is tricky when it comes to radio buttons, checkboxes, and tabs, but perhaps some Aqua inspiration might help (but I haven’t got access to an Apple machine, so I don’t really know, how focus is displayed there for those controls).

  12. The default button is supposed to indicate what dialog button will be activated when you press enter. It does seem weird at times, but that’s something for Gtk or those dialogs to figure out.

    Using focus rings for all widgets is a commonly discussed idea but which is neither aesthetically nor technically feasable at this point. I’m not aware of OS X doing anything special in this regard (it doesn’t even have prelight states).

  13. focus rings for all widgets is feasable in the pixbuf engine so why not others? To me, if it is to indicate what dialog button will be activated when you press enter, then it should be at least in the common places this feature is used, which depends on the user of course. We have been untrained to use this feature because of the inconsistency in which it is used and not used, depending on the engine, but thus far, no one has got it right except the pixbuf engine. Can’t believe I said that πŸ˜€

  14. > The default button is supposed to indicate what dialog button will
    > be activated when you press enter. It does seem weird at times, but
    > that’s something for Gtk or those dialogs to figure out.

    Designation of default buttons in really weird in most GTK applications. Even worse, sometimes they are designated, but Enter does not activate them. But I know it’s not a theme issue.

    What I was trying to say was this: When a button (*any* button) has keyboard focus, then it will always be activated by pressing Enter. That is, it acts like the default button, and should imho be rendered as such (with colored inner focus ring). To add a bit of weight to this: I know Windows is not the king of UI, but it does this (blue inner ring in the default XP theme) and it feels pretty consistent.

    But I can see now that this should be generally accepted throughout GTK, not in a particular theme. …Will have to submit a GTK bug. πŸ™‚

    > Using focus rings for all widgets is a commonly discussed idea but
    > which is neither aesthetically nor technically feasable at this point.
    > I’m not aware of OS X doing anything special in this regard (it
    > doesn’t even have prelight states).

    I meant keyboard focus, not mouse prelight… How does OS X indicate that a checkbox/radio button/tab has keyboard focus?

    BTW, I’m becoming sorry to bother you here. Is there a mailing list to discuss clearlooks and related stuff? The clearlooks mailing list at sourceforge seems dead.

  15. Here is the answer to my question about how Mac OS X indicates keyboard focus on checkboxes & radio buttons: The same way ubuntulooks does mouse prelight on regular buttons, i.e., by drawing a colored glow around the box/button. See

  16. I knew there was something wrong with the scrollbar prelight in ubuntulooks, and I finally figured out what it was: The orange stripes at scrollbar’s ends don’t look glossy. Instead, there is a plain gradient from normal to prelight color there. If the stripes were glossy, coloring them on prelight would look more as if there were lights switched on at the ends of scrollbars. I think that would be more consistent with the orange glow around buttons on prelight.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s