The Road to KDE 4: Oxygen Artwork and Icons

One of the big visual changes just happened in KDE 4, the
transition of kdelibs to the Oxygen Icon set. This transition is
still in progress, and it includes a massive icon naming scheme
change that affects thousands of files. But, the Oxygen artwork
project much is more than just an icon set, it's a unified way to do
artwork for KDE 4. SVG an essential part of Oxygen, so many
applications that are now capable of SVG display are also using
Oxygen styled artwork. Read on for more...

Please keep in mind that the artwork I am showing today is a
work in progress, but shows things that have already made
their way into KDE's SVN as the new default. Oxygen will be the
default art scheme throughout KDE 4, but many of the elements can
still use some tweaking. If you have constructive feedback on any
of the artwork demonstrated today, the Oxygen team would be happy to
hear about it in the comments. :)

Back on the first of January, I wrote an article showing some SVG
widgets making their way into KDE, thanks in part to Qt's new SVG
capabilities. Some of the artwork shown in that article was
placeholders that were produced by the Oxygen team. Since then,
there have been improvements to much of those graphics, but the
really big visual change that just happened is the inclusion of the
new Oxygen Iconset into the KDE libraries as the new defaults.

Oxygen is a far reaching project, and extends well beyond icons.
They have a sort of unofficial tagline: "a breath of fresh air for
your desktop", which encompasses the look and feel of the whole KDE
environment. They are a team of developers and artists that are
dedicated to making things look beautiful. And not just shiny
effects either, they are ensuring that KDE has a unified, easy to
recognize interface. For example, icons that end up in toolbars all
have the same shadows below them to give them a consistent look.
Colour palettes have been created for the artwork to ensure that
icons don't clash with one another, and yet are still easily
recognizable. All of the icon sources are SVG files create using
Inkscape (and other SVG capable programs), and having the sources
available makes it easier to make simple tweaks to the SVG files.

We also now have an official icon naming scheme for KDE 4.
Previous versions of KDE grew the naming scheme organically as KDE
evolved, so it was somewhat random in many places. The Oxygen team
was responsible for developing parts of this naming scheme, but they
did so as part of freedesktop.org so that there is less confusion
about icon schemes between Gnome and KDE (and other environments) in
the future.

So, rather than just talk about Oxygen, I have some screenshots
to show the icons in action.

Below is a screenshot of Dolphin showing Oxygen icons, and a shot
of Konqueror (from KDE 3.5.6) showing the same folder. Many of
these mimetypes also have previews available for them, when previews
are enabled.

You'll notice in the Dolphin shot that there are still a few old
icons sticking around, even though the Oxygen iconset includes
replacements to those icons. One of the biggest changes that
happens are part of the Oxygen transition is that many icons got
renamed. Old code may be referring to the old icon names, rather
than the newly corrected Oxygen names -- when the crystal SVG icons
are removed from kdelibs, it will become more apparent which names
are affected. For those who like the old icons better, they will
also get renamed, and be offered as an icon-theme within the KDE
artwork package.

As the Oxygen Icons have now been made the default, you will be
seeing them in all future articles in the Road to KDE 4 series, and
should get a better appreciation of how complete this artwork is.
Of course some icons still have room for tweaking, which is easy
thanks to using SVG sources. I'm not providing the screenshots of
the whole iconset in this article as you can find them in websvn or by
building KDE 4 yourself. The next snapshots of KDE 4 will of course include the new icons as they are now considered the default.

But, like I said, Oxygen isn't just about the icons. There are a
lot of other places within KDE where the Oxygen artwork is popping
up. Here is a shot of KDE 4's new logout dialog.

One of the biggest advantages to using Oxygen artwork in various
locations throughout KDE is that it is (mostly) resolution
independent. Which means, certain applications can be made to scale
to any size you want, and it will still look good. So, for
instance, if you are playing KBounce (from KDE Games), and you want
it to be big or small, it just adjusts the size for you.

So while KDE 4 is not a true, resolution independent desktop, and
this isn't necessarily a goal for KDE at this time, some KDE
components do now operate on a resolution independent basis.

There is another two elements of Oxygen currently in development,
that are not yet complete. These are the Oxygen Widget Style, and
the Oxygen KWin Decoration. These have not yet been made the
defaults for KDE 4 as they are not yet far enough along. But owing
to the fact that it has not yet become the default for KDE, I'll
decline to show it off just yet. Just bear in mind that the Oxygen
Icons and related artwork are just a few elements of the Oxygen
project. The Oxygen team is making a lot of progress on the Style
and Windeco, but this whole project is an enormous amount of
work.

There are also other visual elements of KDE 4 underway that do
not directly involve the Oxygen team, but will work together with
them when required. These are things like KWin's composite branch,
or the Plasma Workspace theming capabilities.

For those that are interested in helping KDE out through
artwork, you should visit #kde-artists on irc.kde.org and get in
contact with some of the artists there. They are quite friendly,
and take constructive feedback from artists and non-artists
alike.

Individual KDE projects are also looking for artists: Recently,
Carsten Niehaus of Kalzium put out a request
for some help producing some kid-friendly icons to represent the
elements of the periodic table in an optional kid-friendly layout.
Anyone up to the task should visit the #kalzium irc channel.

Also, the Amarok project has recently informed me that they are
in need of some artwork for their upcoming 1.4.6 release (for KDE
3.5.x) which doesn't need to be Oxygen styled, as Oxygen is intended
for KDE 4. Join the #amarok irc channel if you're interested, and
talk to 'markey'.

Editorial aside: I'm glad that so many people are showing
interest in KDE 4's development, but please try to provide
constructive feedback to help improve KDE 4. Many of the developers
read the comments on the dot and implement things that users request
if they are well-reasoned. For example, Peter Penz implemented the
Tree View in Dolphin, and Rafael Fernández López made changes to the
Job Progress Manager based on your constructive feedback. Your
feedback is very welcome, but as last week's article has shown, when
the comments get out of hand, it becomes harder to sift through them
for the constructive ones. On the flip side, that article
absolutely demolished the previous dot.kde.org comment records.
Hopefully we can break those records again one day as the interest
in KDE 4 grows. Until next week...

Comments

by Aaron Seigo (not verified)

i suggest looking at which icons are usable at small sizes in oxygen and which probably aren't. i'm not going to ruin the surprise for you, but when coupled with some basic facts from cognitive science you may find that it won't impact use on smaller resolutions.

and really, 1024x768 doesn't require 16px icons.

by Aaron Seigo (not verified)

hm, to back up that assumption, i should mention that my notebook computer, which i live and die by, is a 14" widescreen that runs at 1280x768 and i use what many have described as "obscenely large icons" for filemanagent. i also use 32px icons on the toolbar, usually with text. omg! =)

by Vide (not verified)

At work we have just bought a dell that sports a 12" screen that runs at 1280x1024 so... :D

Anyway, don't listen to these trolls that want GUIs to stick to 90s...they can use KDE 2.0, not 4.0 if they want :)

by The noob (not verified)

Actually, for once, I have to agree with the trolls.

An icon is a symbol, with as few lines in it as possible. My professor in cognition used to say that as long as you can leave out a detail and people will still think their first thought "that is a camera", it is a too complex icon. When you no longer can remove anything from the icon without people starting to actually think, it is the perfect icon. Think road signs! binary colored, high-contrast quickly and easily recognized symbols that can't be misunderstood.

Certainly we don't want to few details, as that will imply a lot of mental activity to figure out what it is, but at the same time we don't want to clutter the icon with too much details, which will also increase mental activity in order to recognize its meaning.

A better word for an icon is pictogram. Think of it as a corporate logo or as a road sign. (or public toilet sign or whatever sign). They are supposed to be quickly identifiable by our brain.

Of course, it's great we have so beautiful large photorealistic arts in KDE, so some people can use it as icons. It is certainly a benefit and something we should encourage. Personally though, the only reason I made the swicth from Gnome to KDE 2 was the highcolor iconset. That is the most beautiful, functionalistic iconset I have ever seen outside of Windows.

Though, most of the icons in Oxygen are really great and I am impressed with the thought-through overall design that will run through the entire desktop experience in KDE, not just another icon set.

If I had any artistic talent I would have made my own dream iconset and never ever ranted about others work. Unfortunately, I don't have any kind of artistic talent. :(

by Aaron Seigo (not verified)

the road sign metaphore is useful but also highly limited. we want both usability and beauty in our tools. sometimes one comprimises the other, and this is ok as long as it is within reasonable limits. pursuing the maximization of one at the expense of the other will result in a desktop that fewer people enjoy using. the trick is to maximize both so neither offends and both are workable (e.g. usable and beautiful, if not maximized in either, but the maximal combined value)

as for complexity, etc.. please go look at the different types of icons. they have different guideline details; e.g. action icons are kept purposesfully simple compared to, say, application or device icons.

this was originally about sizing in any case, and your cog sci prof will probably be able to tell you all about identification of small objects, perhaps some info on motor control issues and certainly information on how larger numbers of items (esp crowded) increases the cognitive load to the point that the interface becomes frustrating and unpleasant for most people.

cramming things down into 16px or even 22px boxes is not the answer. i think the cell phone world started learning that not so many years ago ;)

by The noob (not verified)

Thanks for that answer!

Off course, it's a trade-off, and as you point out, app icons needs more love to be identifible.

I completely trust this team on this matter.

Sorry for your time I wasted.

by Youssef (not verified)

Seriously, Tango icons are far more visible. Oxygen icons are very detailed, have great artistic features and some are very usable. I don't question the style, but how items are displayed.
In the idea of being constructive, it would be nice to catalog the icons in a collaborative site (Wiki), where users can provide feedback. But that may be hard, since an icon requires a lot of time to design, and it may not be very constructive to yell and scream.

by Aaron Seigo (not verified)

art design by committee tends to produce pretty dismal results. particularly when that committee is made up of a lot of non-artists.

it would be interesting if some users took this bull by the horns and set up such a thing to see what emerges. i'd be very hesitant to try the patience and use the time of the artists involved with kde's artwork in such an experiment, however.

personally, i find tango drab and ugly. there is a good amount of personal preference in these things, and moving to the icon naming spec opens the way to use the icons of your choice much more easily.

by Johann Ollivier... (not verified)

If you find the KDE 4's new logout dialog ugly... don't worry... it is. The SVG was only here for test purpose. But now it's gone... it won't hurt your eyes anymore, a new one is commited. Happy oxygen week ;)

by Vide (not verified)

you have just saved my day :)

by Jonathan Zeppettini (not verified)

I have to say from what I've seen on http://websvn.kde.org/trunk/KDE/kdelibs/pics/ Oxygen is coming along very well and will give KDE4 a much more professional look in general. I'm particularly interested in the benefits of the "resolution independence".

by Felix (not verified)

I really love the bigger preview and additional information during the mouseover. How is this done with the sidebar ? Will there be a double click default setting ? ;)

Sure a good sidebar is a really great feature, but always using Ctrl+Mouse to get a bigger preview for the image is not good.

Will the mouseover feature be available in kde4 ?

Greetings
Felix

by MamiyaOtaru (not verified)

Man, I still like crystal. The electronic business card has.. business cards. Oxygen's has a silhouette with partially see through shoulders? I can't call either inspired: using cards to represent business cards isn't exactly creative, but I don't find that a bad thing. IMHO it beats using an abstract head.

tinfoil hat on
Changing the name of icons is not so nice. All the applications get to change their code, and then where are people left who prefer to use old icon themes? Of course people who care can update the old themes to use the new names but it seems like "oxygen lockin"
tinfoil off.

If I had one criticism to make, it would be that the mimetype icons use too little of the space available. The green speaker cone and soundwaves thing is very minimal, with a lot of white space around it. The disembodied head too. I'd use more room! Make them easier to differentiate at a glance! I'm not an artist though.

It'll be nice if someone grabs the oxygen icons and puts up a kde3 icon set at kde-look.org. The Oxygen folks might have forbidden it, dunno. I'd love to see them up close though and be able to actually speak from experience instead of scrounging for details from the occasional screenshot.

by Paul Eggleton (not verified)

> it seems like "oxygen lockin"

Nonsense. It's about having a standard naming scheme between different desktop environments.

by Aaron Seigo (not verified)

i agree that the vcard icon isn't the best. there are a number of icons that could be better, and the artists know this =) many of the icons are already much better than in current crystal though, imho.

the cards in the crystalsvg icon are hardly intuitive, however. they could be anything card like: credit cards, debit cards, name tags, business cards, candy tins ... the oxygen mimetype at least embodies the purpose of a vcard: identity.

> Changing the name of icons is not so nice. All the applications
> get to change their code, and then where are people left
> who prefer to use old icon themes?

it's a standardized naming scheme, so it should have the -opposite- effect you are concerned about here. this is a standard we've adopted, not authored. so ... "oxygen lockin" is rather innacurate.

but what about those old icon themes? we have 6 themes in kdeartwork to 'port'; just as the code porting resulted in a nice script, i'm sure we'll end up with something similar for icon themes so you can just run them through a script the changes the names. voila.

> It'll be nice if someone grabs the oxygen icons and puts
> up a kde3 icon set at kde-look.org

it'd also be nice if kde4 has a distinctive look.

by nilesh (not verified)

In the description, it says "MPEG Layer 3 Audio" for a MP3 file. Why not simply say MP3 Audio. "MPEG Layer 3 Audio" is too geeky for a normal user. Same with "Mime Encapsulated W..."

Also, the description should be short enough to be completely visible. "Plain Text Document" can be renamed to just "Plain Text". Infact, "PNG Image" can become just "Image", and "MPEG Video" can become "Video" only. File type for advanced users is anyway visible via the extension, so why confuse joe's grandma?

by David (not verified)

I completely agree with this comment. The information should be cristal-clear and not just for the sake of geekness!

by Iuri Fiedoruk (not verified)

I also have to agree. You can maybe show a more complete naming for mime in the properties dialog.
KDE shpuld start thinking about simplification. This change won't be any problem for power users, but for common people, will be much better.

by Kosh (not verified)

File extension tells you squat about the file. It can easily be very inaccurate. The kde information is taken by inspecting the file and so it will be as accurate as the file sniffing capabilities are. I definitely don't want to see things like PNG Image just turn into image, I often care about the types of these things and just being able to hover my mouse over a file and gets it details is very useful.

If you do want to dumb it down at least provide some setting in the control center to always show advanced view. Having to always go into some properties box on a file and click on an advanced tab to see all the real information would be a major pain.

To be honest I don't really care about joe's grandma, I care about getting my work done and kde has excelled at letting advanced users do things that you just can't do with any other system and save a huge amount of time in the process. If you want joe's grandma to use it then make some joe's grandma settings just leave the advanced stuff there also and keep improving it. It is wonderful to be able to put an sftp url into the file upload box in a webpage in konqueror and submit it and have it all just work or being able to edit a document stored on a remote server all transparently.

by kwilliam (not verified)

I completely disagree! KDE4 should not be dumbed down like GNOME. KDE4 should be the most powerful desktop environment ever!

> Why not simply say MP3 Audio.
How else will the average Joe's learn what MP3 stands for? :-) Why not educate people, rather than dumb down an entire desktop environment?

> Infact, "PNG Image" can become just "Image", and
> "MPEG Video" can become "Video" only.
That would remove the only useful part of the description! I can tell whether a file is an "Image" or a "Video" by the preview. A lot of people actually work with files, believe it or not, and like to know what type of file it is. (And, like the previous poster mentioned, file extensions can lie, and in Linux they are completely optional.) For instance, is this file a JPEG image, or a BMP that needs to be compressed before it's published it on the company website? Is it an Scalable Vector Graphic or a GIF? Before I email this attachment, is it a DOCX or an RTF? These differences matter to web developers, graphic artists, and many other people.

Even Average Joe cares sometimes. Say he wants to download some music and video to his portable media player, but it only accepts JPEG's and MP3's. He needs to be able to tell AVI's from MOV's and OGG's from WMA's in order to know which files to convert. Or in my case, if it's a video, I need to know whether it's an MPEG video or an Ogg Theora before giving it to my Window's using friend, who wouldn't know how to play an Ogg Theora.

Accurate descriptions will not confuse Joe's Grandma. If it merely said "PNG" maybe it would, but "PNG Image" is still pretty clear. If Joe's Grandma is anything like my mom, she does not use the file explorer anyway - she only uses the "Open/Save" dialog.

by Agrou (not verified)

I would like to know if you will include previews ? I think a folder witch is containing pictures for exemple should show a small preview on the icon of 2 or 4 pictures, this could looks realy nice and be useful in some cases.

by Troy Unrau (not verified)

This sort of thing is planned, and in many cases implemented. In fact, I had to create 0-size files with random extensions to create those screenshots specifically so that there was no previews in konq, and you could see what the actual icons looked like. :)

(I know I could have turned previews off and then back on, but this was faster.)

by Aaron Seigo (not verified)

we already support folders showing emblems reflecting content. the emblems aren't thumbnails of the images inside the folder (would make a nice addition, indeed) and we do already support thumbnails on files, of course, for the last 7 or so years...

by Bas Grolleman (not verified)

I was wondering if dolphin will have a quick filter/search box like most mail applications have. I was browsing a large directory and I would have loved to just types "bla" in a box to have only the files show with "bla" in it. That would make working with large directories much easier ( and might even make me lazy and start throwing more documents in the same folder, but is that really bad ;) )

Looking forward to KDE4

by 138 (not verified)

>I was wondering if dolphin will have a quick filter/search box like most mail applications have.

It won't, it already has. Tools -> Show filter bar, and start filtering :).

-138-

by Tobias (not verified)

However this doesn't seem to include directories (they are not filtered), which is quite annoying.

Tobias

I think everything should be more refined and more polished, with clean 1px borders instead of thick and blurred borders, and handlers. Colors are too dull, we need to bring life into KDE. KDE 3 also had dull colors. The thick arrow used to show a file is a shortcut is really too big and too thick. It needs to be more discreet and subtile. The "File | Edit | View" tool bar is too high, it needs to use less screen space, reducing its padding would do the trick. Also, I suggest using DejaVu Sans Condensed, it looks more professional and less rounded. If you'd like me to participate in improving KDE's look and feel, please contact me: landemaine=at=gmail=dot=com

The fonts usually depend on the distro, not on KDE. And that widget style will not be the default for KDE 4 either, as there is an Oxygen Style in the works that is seeing active development, so that problem may just go away. It uses colours in key places.

by Aaron Seigo (not verified)

> I think everything should be more refined and more polished

i agree. this takes time and effort and one person only moves so quickly. please join us in making things more refined and polished =)

> Colors are too dull

your opinion is, for better or worse, at odds with most people on this point.

> It needs to be more discreet and subtile

i agree. do you have an alternate piece of artwork to show what you mean? preferably something you've made that could then be used? (licensing issues =)

> tool bar is too high, it needs to use less screen space,
> reducing its padding would do the trick

negative space; it's not wasted space. this is a design fundamental. something apple gets and almost none of their users do, except intuitively.

> DejaVu Sans Condensed

that's not really up to us, as the system integrators / OSVs tend to make the final font decisions. i agree it would be nice to use a standard font for our publicity screenshots that shows well, though =)

> If you'd like me to participate in improving KDE's look and feel

it works the other way around actually: you subscribe to the mailing lists that interest you, join the irc channels perhaps, start creating with others. we don't have the time or ability to go "headhunting" =) if you need some pointers on where to start, please feel free to ask. i hope to see you around.

> that's not really up to us, as the system integrators / OSVs tend to make the final font decisions. i agree it would be nice to use a standard font for our publicity screenshots that shows well, though =)

I just use whatever kubuntu (feisty now) gives me by default. If we could decide on a standard, I'd be happy to use it :)

by Aaron J. Seigo (not verified)

we talked about this at the last LSB face-to-face i was at. turns out the problem is that distros ship their own tweaked versions of various fonts.

thiago suggested we could just say, "this is the font. ship it!" and maybe we should take the driver's seat here because the OSVs are certainly screwing it up right now.

it still comes down to somehow getting red hat, novell, mandriva, etc to ship the same fonts without tweaking them or otherwise replacing them with similar but different fonts.

this is even worse for people trying to do content creation on linux, e.g. write documents for use in the office.

by David (not verified)

I don't know if this is the right place to post it, but I would like to be able of selecting the thumbnail images of my videos.

For instance, while I'm playing a video, then with the right click: "set frame as thumbnail".

That way I could set the frame where appears the title of the movie and not just the first frame (usually blank) or the middle of the movie (uninforming).

By the way, the icons look great. Well done!

by Duncan (not verified)

I like the idea of specified frame video thumbnails, but it does sound like it could be somewhat complex to implement. To do it right would require a KDE core interface that individual video players could hook into, then implementing the UI in each video player. It's possible, but requires a lot of coordination and a lot of folks seeing it as worth the trouble both to integrate, and to ship as a core part of KDE. Having an arbitrary frame hard coded is just "easier". Unless it's already in process, therefore, I expect it to be unlikely for KDE 4.0, but it'd sure be nice for 4.1 or 4.2 or whatever. =8^)

Knowing KDE, maybe it's already in process. =8^)

Duncan

by Felix (not verified)

Why not taking the frame, converting it to a svg or png. Than place it in .kde and update the .desktop or whatever file for the movie ? Aren't there such files for this ?

Sure a general solution is better, but is it really a problem if only kde players support the feature ?

Felix

by T1m (not verified)

I really like the oxygen icons.
I was thinking about the mimetype icons in the first screenshot - they look much too thick. Shouldn't they look like paper, not (thick!) plastic?