Little update

Posted on December 16, 2008 by ereslibre

I just wanted to post the new look of both System Settings and Dolphin with their new drawing code. Note this is still not the definitive version, because they are still subject to change if someone points out good improvements. I want to remind the mockups Nuno did draw: this one for System Settings, and this other one for Dolphin.

Now, what we have at this moment (still not on SVN) is:

Update: I have removed a bit of blank unused space. How about this one?

As always, comments are really welcome =)

About ereslibre

Free Software developer and enthusiast. Architect/Developer. Researcher at Complutense University. Web developer. C, C++, PHP, Ruby, Javascript, JQuery, Qt, KDE expert. Rails hacker on the works.
This entry was posted in KDE Development. Bookmark the permalink.
  • Luis

    The current implementation is much better, those lines just make the overall GUI looks more clutter and confusing. Not to mention how ugly they look.

  • http://www.ereslibre.es Rafael Fernández López

    @Luis: great to see that you loved it. LOL. Now, if you have any positive suggestion of how to improve it, it would be really nice :)

  • Mark van Boern

    Well, I really agree with Luis.
    The current look of Dolphin is much better – these vertical lines are quite annoying and clutter the GUI.

    But the new look of systemsettings is really an improvement, though ;-)

    I’m sure, you’ll also find a way to make the Dolphin thing look less ugly – so keep on rocking for the best desktop experience in the world!

  • Phlogiston

    Can’t you just make look both the same? Maybe if the vertical gradient would just scale in dolphin? I like the look in systemsettings, but I think the one in dolphin looks ugly and boring…

    Will the open/save dialog use the same style maybe, when it could group files?

  • HD

    It’s better, but there’s still acres of gray around. Too much weird blank space! I don’t know how to fix it. It’s very different from usual default GNOME and KDE 3 themes so it’ll take a while to settle down but you’ll get there!

  • Aaron Seigo

    my initial thoughts:

    * the margins are very large; lots of space being lost there.

    * having different styles for different apps is a little odd; they are all “Groups of icons”, no?

  • Richard Moore

    Could you make the gradient a little darker at the bottom in the first image? The icon labels could do with feeling more part of the ‘group’.

    I think the same gradient would help with grouping in the second image.

  • http://www.ereslibre.es Rafael Fernández López

    Thanks for all your comments.

    I really think we can make different looks for systemsettings and dolphin. They are meant for different purposes. For instance, on system settings we know we will handle a “small” amount of items, while on Dolphin we should be ready for handling tons of them.

    This means huge gradients on Dolphin, which is not good for usability/accessibility, where the regular view background is far better, but means a nicer look for systemsettings where we know we won’t make an overkill of the view.

    About margins, yes, they can be reconsidered, and probably 10 pixels is too much for a margin. How much do you propose ?

    Thanks !

  • mario

    yeah, i fully agree with aaron. i REALLY like the dolphin one. i dont know which possible gain the gradient offers in the systemsettings example. but great anyway!

  • rudolph

    nice, but one thing that really miss from vista when is showing groups, is the avility to show/hidden groups.

  • David

    Pretty. One complaint: Particularly in the new screenshot, there are four lines in a row. You have the window border, then the tab frame, then the inner frame, then the outside of the block. It looks a little jarring.

    The tab frame could probably be helped with documentMode in Qt 4.5 and KDE 4.3 I guess. http://labs.trolltech.com/blogs/2008/07/02/some-qtabbar-qtabwidget-love/

  • Sergio Pistone

    I like both the new SystemSettings (with little white space) and Dolphin looks. Only problem I see is the top-left rounding in Dolphin which doesn’t look very smooth (maybe using a lighter shade of gray could help, or maybe is just my old monitor –as no one else has brought this up). I would like to see though how would Dolphin look with the same gradient as SystemSettings… any chance you can post a screenshoot of that just for comparison purposes?
    Great work, BTW.

  • Paulo Cesar

    Hi, systemsettings one is indeed very good, but I *really* dislike dolphin’s one, it would be a great huge step back from what we have today, I’m not sure I could live with it :)

    I think the gradient of the line is not as smooth as in systemsettings one, and even with tons of itens, I think a little background gradient, similar to systemsettings one, but with limited size, would be more pleasant

    Anyway, thanks for the good work

  • Sergio Pistone

    Sorry, I just though of another thing: I think SystemSettings would look best if long labels were split into multiple lines and items where arranged in a grid like fashion (basically, just like Dolphin does) but trying to keep white space to a minimum (as currently shown). Is there a reason why they behave differently in this regard?

  • alex

    @Rafael: good job! but i also like the system settings more than the dolphin one! try to make the dolphin one more decent by using more decent colors like gray instead of black! removing “a bit of blank unused space” was a good idea!

  • Paulo Cesar

    Hi, I made a mockup based on your screenshot to explain what I was talking about on my last comment:

    http://i34.tinypic.com/27zlhc.jpg

    please take a look and tell what you think about it

  • Paulo Cesar

    Well, now that I’m with the image editor opened, what about gaining some more space:

    http://i34.tinypic.com/f07p83.png

  • christoph

    Nice to see improvements to this new KDE widget. I just hope style authors will be able to configure the appearance, something like PE_PanelItemViewItem.

  • KronoZ

    Hi, thanks for the work you’re putting on this.

    One thought :
    * It would be nice if the icons in system settings could be vertically aligned. ATM it gives a bit “messy” feeling.

    One more “abstract” thought :
    Why use two different “browsers” for system settings and dolphin ?
    Wouldn’t it be nice to be able to browse these settings inside dolphin by making them fit into some “special folder” ?
    (you could give that particular folder a different look if needed, though i don’t know if this is implemented in dolphin – e.g. the KDE logo on the background).
    I think it would reinforce the integrated feel of KDE and moreover, it would spare having to open another window than dolphin just to go tweak a feature…

    Anyway, thanks for reading my suggestions and keep it up ! :)
    KronoZ

  • Luis

    I told you why the new implementation is bad, which a completely valid argument; the old one is superior. If I didn’t propose any new layout, that doesn’t change fact that I’m right about the new one. Many KDE devs should learn logic.

    The updated mock-up is better, however, the old implementation is still less cluttered and confusing.

  • john

    I love the look of system settings, but dolphin looks quite ugly. I agree with the posters up above that they should both look the same.

  • http://weblog.obso1337.org/ seele

    @Sergio: I think the non-line-break is a problem with Qt4, I had brought it up when 4.1 came out.

  • KronoZ

    I got nothing else to do so here’s a mockup of what i was talking about in my previous comment (icons still not aligned) : http://i299.photobucket.com/albums/mm311/kronophage/mockup.png

    Thanks for looking. Cheers.

  • http://elcugo.mixtk.com Elio

    I really like the system settings look better than the Dolphin one.

  • jospoortvliet

    Nice work, I esp like the updated systemsettings one. Would these gradients slow down drawing in Dolphin too much? If so, as said before, at least make the lines gray instead of hard black and it’ll look decent. But even if you don’t, it’s an improvement over the current look so good work!

  • Tony Murray

    The gray titles are too close to the gray gradient and make it harder to read than it could be. Darkening up the text should do the trick.

  • Mark

    I normally turn the whole KDE on small icons. Can you show how it looks like with small icons?

  • Dominci

    I like the new look. I prefer the first version of of system settings. I think it is easier on the eyes than the second version. The second version contains 4 vertical lines right next to each other. I think this is the kind of clutter that the Oxygen artists tried to remove in KDE 4.

  • http://dampthewhite! nick

    I think that you should keep dolphin as it is (it seams simpler to me). And for system settings i think you should damp the white space and make the style like amarok’s new playlist.

  • Diederik van der Boor

    I like the new systemsettings layout. :-) The dolphin one could use some less dark edges imho (e.g. more gray).

  • tecnocratus

    Hola Rafael!

    Just to disagree with everyone else up there, I’m not sure I like that “open box effect”. To me, either shot looks like a stack of nested boxes, which makes it a bit confusing and way too “open” (in a pictorial sense) towards the right side of the window.

    Also I think it’s a step backwards for the hallmark clean looks of KDE4. I’m beginning to see too many lines all over the place, and that’s what we wanted to do away whith from KDE 3, right?

    I do like the dim rules and the subtle gradients (though I don’t know how visible those would be on old displays, sp. old LCD panels).

    How about removing the vertical line on the left of the grouping boxes, just leaving the horizontal ones, PLUS a *slightly* stronger gradient. I know… that would look a lot like OS X’s System Settings, but what the hell…

    Just my 2 cents of moaning.

    PS: since I know these design issues are always opinionable and subjected to the eye of the beholder, here’s my profile, so you can get and idea of what kind of user constituencies you’re dealing with: I’m from Spain, 32. I’m a telecom engineer and have a strong photography background.

  • tecnocratus

    One more thing: I also think that the widget should be the same for Dolphin and System Settings. If you think the gradients would be too large when there are dozens of icons in each category, how about just shading the headers (say, 40px down from the ruler)?

    I wish I could make a mockup, but I’m at work right now….

  • http://agateau.wordpress.com Aurélien Gâteau

    It looks promising!

    I would suggest a few changes though:

    - Use the same rendering in both Dolphin and System Settings (more consistent, helps user to reuse what he learnt)

    - Personal taste: I prefer the system settings one, but I would suggest using a darker color for the title and having the same border on both left and right sides.

  • Paulo Cesar

    I agree with tecnocratus, for me the vertical line causes too much visual clutter. You don’t need boxes to categorize content, just the header is enough for this, so a ~30px gradient on the header background would do the trick

    Anyway, will exist any way to choose the actual look in dolphin instead of the new one?

  • MM

    Hi,

    Another idea for dolphin:

    _______
    |Tabs |____________________________

    no gradients, a little more space above, a little less space below the tab

    Not sure about the vertical left line, maybe it would be better to throw it away (as someone else here said, too much lines aren’t that good…)

    ______
    Tabs |____________________________

    Sorry for unperfect english and poor ascii art (it looks good with fixed typewriter-like fonts)…

  • http://www.finex.org FiNeX

    I don’t like the vertical line… anyway, can you try to apply the same style of systemsettings to dolphin and post a screenshot? I’m curious :-)

  • Porcel

    Dolphin looks too boxy.

    Do with gradients what you are trying to do with the lines that separate the different sections.

  • David

    Hi
    I think the first screenshot of systemsettings looks best. The second is somehow too dense. And I would go with the gradients booth dolphin and systemsettings as it would provide a consistent look and guides the eyes better then just lines.
    David

  • Petr

    Hey,
    great to see work being done here. I quite like the Systemsettings one, for Dolphin, though, I like the KDE 4.1 implentation style-wise better. The vertical lines just add too much visual clutter IMO. The vertical lines are not “needed” in the sense of serving a specific purpose.

    What about removing the vertical lines alltogether, but keeping a gradient like in systemsettings? For Dolphin, the Gradient could just be like 40 pixels high, and then go into white (for large groups).

    So: Great work! But please no vertical lines. I love KDE 4′s clean interface a lot, a lot more than KDE3′s far more cluttered. IMO the vertical lines are a step in the wrong direction. Don’t add clutter, remove it. Work with (light) background color variations and gradients instead.

  • knue

    The actual problem with the kde 4.1 version is, that you don’t see if the headline is actually a headline or a footer on the first sight, right?

    I agree with many comments above that additional lines make the things even more confusing and that system settings and dolphin should use the same layout. Perhaps you should try this:

    – Label ————–

    or this:

    ———————- (line directly above the heading)
    Label

    or this:

    ———————- (line directly under the last item)

    Label (start heading without something special)

    Cheers.

  • Michael

    IMHO the guide should be no unnecessary lines, margins an the like. So “no” for those vertical lines, especially the hard ones in dolphin.

    I like the clarity of this one: ;)
    http://switchtoamac.com/guides/images/sys_pref_leopard01.png

    Every line there has a purpose and it’s in each case just as contrasty as necessary.

    The system settings one is pretty good IMO. The ugly tab frame is not your fault ;)

    No problem for dolphin looking different and having less eye candy.

  • Victor

    >Sergio Pistone wrote on December 16, 2008 @ 1:50
    >Sorry, I just though of another thing: I think SystemSettings would look best if long labels were split into multiple lines and items where arranged in a grid like fashion (basically, just like Dolphin does) but trying to keep white space to a minimum (as currently shown). Is there a reason why they behave differently in this regard?

    >seele wrote on December 16, 2008 @ 3:22
    >@Sergio: I think the non-line-break is a problem with Qt4, I had brought it up when 4.1 came out.

    I also agree with this

  • Victor

    >Michael wrote on December 16, 2008 @ 14:19
    >I like the clarity of this one: ;)
    http://switchtoamac.com/guides/images/sys_pref_leopard01.png

    Exactly!!!

  • http://www.DreadKnight666.com Dread Knight

    The lines are f*ugly.

    And i hate the fucking tabs as well. Take a lot of screen estate in an ugly way.

    I sound so negative :D