11:53 AM

I'm Active

posted under by Pinheiro | Edit This
From my last blog eatery and a lot of user feedback talking to several people I arrived to a new proposal.
Notice that I'm not using shadows or anything like that and the active window is in the back.
What have I done?
Increased the contrast of the double outline for the active window. Removed part of a gradient on inactive and placed a new darker gradient on inactive, also made the butons in outline mode in inactive.

Click on image for context.

So give me your opinions on this subject and if I'm in the right path or not.


On a side note I decided to enter the akonadi logo contest with this entry,


the 2D Monochrome Version looks a lot like Nvidia logo so i will have to remake it :P (Miss that some how).



53 comments

Make A Comment

53 comments:

dBera said...

By "outline mode" do you mean "inactive window" ? If that is the case, then I must say disabling the window buttons on the inactie windows is a really terrible decision. I can explain why but I will wait for you to confirm the above.

I am just hoping it is not.

OdyX said...

Hi. The design for inactive windows makes *me* think that they are dead. If they are not, there would be need for a "inactive-but-not-dead" windows. Regards, OdyX

Anonymous said...

In my opinion, it is a very interesting idea : it goes in the right direction !

Anonymous said...

Could you please provide a screenshot where the active window is over another window (so that we can see the dark gray border against the grey of the inactive window).

mutlu said...

@dbera:

Nuno's "I [..] made the butons in outline mode in inactive" seems to mean that they don't have content and are not elevated. But as you can see on the screenshot, they are there (and thus functional).


@Nuno:

I think this looks very good and I find the windows to be distinctively different. For me it is sufficiently usable, even given that my vision is quite bad.

However, it needs to be kept in mind that some people have even worse vision and may indeed still have difficulties. Maybe the idea of having an option in System Settings to add even more hints (but not one as ugly as Ozone's colorization) would be very helpful to those. It could be clearly marked as "against the design concepts of Oxygen" or as "for the visually impaired" to make clear it is _not_ Oxygen.

In any case, I love Oxygen and would really like it to be the default in KDE4.

Keep up your wonderful work!

Anonymous said...

The white text on the inactive windows messes with my eyes.
-1 IMHO.

Tsiolkovsky said...

I ilke the new look quite a lot. Maybe I would only like to see how it would look with symbols still in outlines in titlebar buttons. Only that they would be lighter and slimer then those in the active window. Maybe also the color of the text in the titlebard could still be some shade of gray only again lighter and slimer then on active window. Anyways in my opinion you are going in the right direction. Keep up the great work!

Anonymous said...

Looks good - easy to tell the difference. The white text on inactive windows is hard to read. How about a gray, keeping the theme of representing inactivity with reduced contrast?

fred said...

Hi nuno,

I think this is obviously better than current oxygen, but IMO it is still a bit hard to recognize active and inactive. And also doesn't white title color on top of gray background makes it harder to read the inactive titlebar text?

Anyway, thanks for your great work, unifying "beauty" and "usability" :)

Iván said...

Ufff, sorry bro, I don't quite like the new proposal. Something about those extra-sharp outlines feel disturbing, like someone has gone crazy with photoshop's "unsharp mask".

I very much preferred the ideas from your former post, specially, #3 or #5 vs. #6 (back to front):

http://bp1.blogger.com/__JNFVYfijS4/R-47cZmYByI/AAAAAAAAALc/Vi1AKkLmRZI/s400/nocoloringmoreoptions8.png

However, what I quite like are those outlined, "embedded" buttons, not just for the background, but also for the foreground. With just one or two light color touches, thouse would look very oxygen-ish and very pleasant to the eye, IMO.

Now, if you could *just* make them square.... {:-/

Overall, excellent stuff. Kudos to the oxygen man!

Hans said...

I'll be honest: I don't like it.

> Increased the contrast of the double outline for the active window.

In my opinion too much contrast, destroys the whole Oxygen look.
The line between titlebar and window content seems to be darker too. Makes my eyes hurt; it doesn't seem to blend with the background at all.

The new inactive window looks even worse: the white text is hard to read (easy to fix) and the buttons don't look clickable which I think is a problem.

I did, however, really like the smooth look of number 5 here. Just miss the buttons.

Talking about the buttons, I heard that you were trying to come up with a new design for them, right? Have you ever considered having colorized buttons?

I hope I didn't sound too harsh, you've done a fantastic job so far. I didn't think I would abandon Plastik, but now I really wonder. The Oxygen style has improved very much.

One of the reasons I don't like the changes could be that I don't really have trouble finding the active window. It is, however, nice to see that you're trying to find a solution as many have complained about this issue.

Wishing you good luck solving this problem. :)

Anonymous said...

I think it looks pretty brilliant! Good work! I think most of your artwork looks still similar but quite a bit better than the real Oxygen style!

bdgraue said...

i really don't like the black border around the active window. the rest looks good. but that strange border really mess up the whole oxygen style smoothness.

Anonymous said...

Awsome work!

Anonymous said...

The inactive Buttons are looking great!

Daniel.

Thomas DA said...

What about having a 2-3 px blue border all the way around the window, when it is active?

Paul said...

A definite improvement IMHO.

Would some color in the buttons harm the theme?

Jakob Petsovits said...

Ok, so, hm, let me see...

I like:
- Flat buttons
- Less gradients on the inactive window

I don't like:
- Symbols missing from the buttons (...and think about how you'll get usability complaints there again)
- White title text (unreadable, and doesn't look very nice)
- thick black lines (they totally destroy the smoothness)

Suggestion:
Try using the "active titlebar" color for the added outline, and instead of adding it on the outside, put it just on the inside of the white border, with 1px width. That "active titlebar" colored line would then span the whole titlebar and go down on the window frame a bit, and eventually fades out after about 1/3 of the vertical window size.

That way, there's one more contrast in the titlebar ("active titlebar" colored line -> white line -> gray outside line) and the contrast is reduced for inactive windows by just taking away the "active titlebar" line on the inside. Plus, nobody can say anymore that Oxygen ignores the color scheme :)

Alvin said...

I have to disagree with the idea "Increased the contrast of the double outline for the active window". I think it will separate the window decoration and window content. Isn't Oxygen supposed to blend them together?

Other than that, white font on the inactive window kinda hurting my eyes. I prefer the the grey color in the previous post.

Other than that, I have to say that I really love Oxygen =). Keep up the good work!

Anonymous said...

Hi nuno, Oxygen is generally looking great :) I am soo much looking forward to KDE 4.1 as my hopefully default desktop.

Still these little changes might not be enough to help me with finding windows. And finding inactive windows should be able, too. So making the titles unreadable is not preferred ;)

Perhaps you need to design a completly need head?

Please make also the side borders visibly different regarding focus, not just the title bar.

Could you also add some white area to an inactive window? The white area cheats me to quickly into finding the active window.

Xtrakings said...

active window looking good but inactive are looking too flat too empty it could be beter with transparent icon icon or more white
.contrast between active & inactive windows coul be cool like on os x grey for active active white for inactive
(http://img.clubic.com/photo/00656132.jpg / http://img.clubic.com/photo/00656142.jpg )

Xtrakings said...

but akonadi seems to be cool : :D

Sébastien said...

I like this a lot. all through I allready like Oxygen the way it is (using compositing and darken inactive window). But, without composting, it need a better way to differentiate active from inactive windows. And this look like a good direction, anyway white on light-grey is not an option : it hurt my eyes. But the way you reduce contrast and remove the title-bar under-lining is good enough for me.
Renoving the buttons seems dangerous as some user will interpret this as a dead window (as already stated in the comments) but removing some contrast (leaving the button function visible) seam the way to go for me.

Anyway, I was using Domino (kde 3.5) and i love it, and I would love getting it back. Forthe time being, it's oxygen for me :P thanks a lots for your work.

++
Seb

k said...

Wtf with so many positive comments?
Black outside border line and dark title-to-window separator ruins the design. This is not beautiful nor elegant.
The whine about inactive blending with active is unjustified, because they have the patch by now to colorize the active window. Yes the colorize patch needs improvement, but that's not the point.
Please don't make this happen :-(

Anonymous said...

The buttons in the inactive windows are no longer distinguishable. I often close inactive windows, so imho this is not a good idea. I also think, that the black border destroys the oxgen look.

Anonymous said...

Very nice work, as always.

The white text messed up with my eyes a bit though.

Anonymous said...

Yep, the black border on the active window at the bottom doesn't look pretty, remove it please.

Peter Penz said...

I like the flat buttons and the shading of on the inactive windows very much. But I think the black outline on the active window does not fit very well into the Oxygen style: just recently all flat lines (separators, docks) have been replaced by nice shaded lines (http://www.nuno-icons.com/images/estilo/newstyletestsonflatgrpoupboxanddolphin.png) and so I think the black outline does not fit. In my opinion the contrast is OK already even without the black outline :-)

Thanks for sharing your thoughts on this blog, so that we are able to give some feedback. One image, 30 replies, 100 opinions ;-)

Iván said...

[...] it could be beter with transparent icon icon or more white
.contrast between active & inactive windows coul be cool like on os x grey for active active white for inactive


Apple has done it like that for a good reason. The human eye perceives light-shaded, less textured objects as being far away, not the other way around (BTW, this is not just my personal taste: there's a whole lot of cognitive research on this matter).

Mi point is: make the ACTIVE window slightly DARKER, and the BACKGROUND windows LIGHTER, with less sharp features and desaturated colors. If done right, that alone could be a powerful cue of depth.

I could cite a few books on the field, if you'd like to investigate further.

Anonymous said...

it looks good but there is one usability-related flaw: you cannot see, what's inside the inactive windows and if you can't memorize, what's in them, you have to activate every single window until you find the one you are looking for. oxygen looks really great but this design "one solid slab" seems to introduce serious problems...

Iván said...

@anonymous:

you cannot see, what's inside the inactive windows

That's why we have the "present windows" (AKA. Expose) effect in Kwin, alongside with the desktop wall, coverswitch, taskbar thumbnails, etc.

The downside is that all of the above effects rely on compositing, but hey, we cannot have everything for everyone!

Autumn Autist said...

Its forking great!!

I agreed with Jakob Petsovits mostly, but I find that a hard line around the windows is great design... It defines, gives that edgy feeling of something with strength!

To use the color I would use it colorfy the border you have now softly (yes 10% ahaahaha)

My 3000 euros!!!!

Um abraço...

Dread Knight said...

I don't like it so far :-(

Note that one thing I like the most at Oxygen style is having that gap between the close button and the other two buttons (minimize and maximize).
It's handy because there is a less chance you will close your application instead of maximizing it... so keep that in mind, that is good design. :)

Autumn Autist said...

Its forking great!!

I agreed with Jakob Petsovits mostly, but I find that a hard line around the windows is great design... It defines, gives that edgy feeling of something with strength!

To use the color I would use it colorfy the border you have now softly (yes 10% ahaahaha)

My 3000 euros!!!!

Um abraço...

Anonymous said...

The buttons in the inactive windows are no longer distinguishable, since the button position are interchangeable in KDE this is a serious design flaw and should not be implemented.

Anonymous said...

That looks great, IMHO. Like someone said, completely removing the window-icons from the buttons might be a usability-problem. Personally I don't give a f... :)

As a KDE-fan I'm really grateful for your contributions Nuno. Oxygen is shaping up rather nicely... You guys are fantastic.

//allix

nuno pinheiro said...

Thanks for all this feed back I'm now sure that we are on the right path but not kite there yet.
The double outline is something we have now couse we cant depend on hardware acel..
Ivan coments are quite good and I agrea, Reached the same conclusions myself wile mocking.
so expect some more work in the next days, I will keep you posted.

Somthing that seeams to have setled in this cicle is the line under to be inverted and dimed.
No complaints meens good :P

Anonymous said...

Akonadi logo is amazing

Iván said...

@Nuno:
Somthing that seeams to have setled in this cicle is the line under to be inverted and dimed

I disagree. I don't like the inverted line, sorry. Somehow it makes windows look "bent", as if they were bulging inwards.

Perhaps it's just an effect of my displays (an ancient Mac Pismo and a somewhat newer Lenovo laptop.)

Sorry again, guys, but I'm with Nuno in that he was on the right track from the very beginnings. All that's needed are a few *really* succint touches to make it perfect (and did I mention square buttons? :).

I'll see If I can come up with some mock-ups this weekend. No promises here.

Anonymous said...

No, no square buttons!
The new inactive buttons are really good-looking.

Anonymous said...

Even better than before ! Your work is really great :)
From my point of view :

What's good :
- Inverted line gradient on inactive
- Less gradients on inactive
- Flat buttons
- The IDEA of outline without composite for Inactive

What is not perfect :
- The outline is too dark, a softer grey (but still visible!) may be better
- The symbols should still be on the buttons of inactive windows (maybe less noticeable than on active)
- White text... Maybe grey (darker than the background of course) might be better ? (but the background is already dark :/)


Suggestions :
- I prefer the inactive version without outline
- Maybe would it be better if the inactive window was less dark than the active one instead of being darker ? (then you could use grey as title text color)

Anyway, these are minor complaints from me, it's still pretty awesome :)
Actually the only thing that I don't find to look good is the

>> Window Buttons <<

They just look too roundish (and not enough noticeable), due to their form but although the gradients inside and outside + the grey-black gradient of the symbols...
If I had to change one thing, it would be the window buttons :p

Diego Viola said...

WOW I just love this so much!!

http://www.nuno-icons.com/images/estilo/newstyletestsonflatgrpoupboxanddolphin.png

Please make it like this =D

Iuri Fiedoruk said...

Looks like... mac osX.
Too bad, it seems I'll have to continue using other styles for a while because I really do not like active/inactive being too similar (I loose myself),

Iuri Fiedoruk said...

This comment has been removed by the author.
Iuri Fiedoruk said...

This comment has been removed by the author.
Iuri Fiedoruk said...

This comment has been removed by the author.
Iuri Fiedoruk said...

This comment has been removed by the author.
Iuri Fiedoruk said...

This comment has been removed by the author.
Iuri Fiedoruk said...

Sorry for the spam, the google captcha just when crazy :-P

smihael said...

I very like this theme:
http://www.kde-look.org/content/show.php/Konqueror+4.0?content=39993

Just download the package and look after pic named: 7_konqueror4(translucency).jpg

It wold be realy great to see this in KDE4

also much better idea will be menu in windec

Anonymous said...

Just don't destroy usablility because of good looks.

TOtally effacing the buttons will hinder and confuse many users .. especially when they open many windows together and drag and drop in between.

Also say goodbye to one clicking on a button (or an X button) on an inactive window to dispose of it!!

just a dim will be OK but complete effacement is radical and uncalled for (except of course that this given will be offered as an option and not as a premise)

Anonymous said...

I think you're on the wrong part here to be honest.

Oxygen is a very elegant and clean style and the dark outline destroys it. I can live with the stronger gradients inside the box if it has to be but the black outline is a no-go.

In my opinion a drop shadow would be more elegant and help destinguish the active window from the inactive ones...

Maybe try it with stronger gradients inside active, inactive as it is now and just without the ugly black outline... it might work :)

Youre doing a great job by the way... keep up the good stuff ;)

chanerain said...

You have a real talent for cheapest wow

gold
putting your thoughts into clear, original content. Your article is easy to read and understand. You have

brought forth some buy world of

warcraft gold
really good points that I agree with and appreciate.

top