Icon Suggestions for the new Qt Interface

[Tombigel]

I was asked by our dear friends here at VideoLan to try and design some new icons for the Qt interface.

All images were made in Illustrator CS (no "real" 3D), I even redo the cone in vector. the only icon where I used an image not made by me is the "Video" icon - the Popcorn seeds are taken from the work of Manuel Zander.

BTW - Images here are 32bit PNG, so if you use IE6 they will have a gray blueish ugly background

I'd love to have some feedback and ideas.


So, here is the new collection, presented by our house model, the Cone:

Audio:



Video:


Input/Output:



Shortcuts (Hotkeys):



Playlist (Might not be needed...):



Interface (Qt/Skins):



These 2 are for "Subtitles", though I think that the 1st one will look much better as an icon for this forum:



Tom B.

[CloudStalker]

I like the cone with headphones and the one for input/output. All the others are alright too.

How about one for streaming? And for advanced (futuristic cone)?

[Tombigel]

Sorry, I forgot to mention it -

The icons that are currently needed for the "Simple" interface are:

> video
> audio
> input/codecs
> shortcuts
> interface
> subtitles

There were a "playlist" and an "advanced" in there, but they decided to move them to somewhere else.

Oh... and I made one for streaming (kind of...) a long time ago for the website design contest.

[dionoea]

Awesome Tombigel! You rock

[Jean-Baptiste Kempf]

[Tombigel]

I photoshoped your screenshot a bit, what do you say about this:

[thresh]

take a look at this, please
http://img92.imageshack.us/my.php?image=vlcge8.png

and, Tom, could you please provide svg ones, too?
the "small" ones arent centered properly

and i think multiple tabs in _simple_ preferences isnt so good...

[Tombigel]

1. I sent JB svg versions, but, they were not converted good enough from Illustrator format, I'm still struggling with getting good results when converting.

2. The small images are left aligned, intentionally

3. Tabs are a VERY good idea, they keep the data the user has to deal with on the page ordered and minimal.

If you don't believe me, take look at MacOSX and see how the "Preferences" are orginized there.

[Jean-Baptiste Kempf]

OK. My point of view. Don't scream in your posts please.

First, the Simple Prefs design must be well thought since this is one of the major reproach about VLC.

1/ About the icons on the left, I think I prefer tom's screenshot. But I think there is a slight color gradient I may not be able to represent. Confirm ?
And yes, this white background is unneeded.

2/ About the show all settings.
It is easier with a radio button, but much nicer with the button, I agree. Thresh, advice on that one?

3/ About the tabs, I am afraid I am with thresh on this one. The Audio tab is the biggest one, and Tabs is not what I call easy, because it add clicks. Please note that tabs look a bit different in Linux and Windows, and same, very unsure I am on color gradients.
We need extra advice on this one! @$im, dionoea, xtophe ?

4/ Audio preferences, what is your Font ?

5/ Why is your preferences less wide than mine ? Is it intentionnal ?

Finally, please pay attention to the fact that the dialog can resize.

[Jean-Baptiste Kempf]

And thresh: what was the point of your screenshot ?

[Tombigel]

I didn't mean to shout, just emphasize .

1. if you mean the gradient on the "selected" button, it's just an idea, if you want i can create a png for that.
The gradient on the buttons is from your screenshot.

2,3,5. For the past 6 weeks I'm working on a Mac most of the time (I work for the local Apple retailer) and I fell in love with the GUI of OSX.
From my point of view the way the dialogs are designed in this OS is the "right" way.
So this is what I tried to do in this little screenshot - without copying too much of the look of OSX, just taking 2 basic concepts for the "Basic" interface:

a. The design should be clean, every element that is not functional should be removed and every complex control should be downgraded to a simpler one.

b. Minimum amount of data in every screen and minimum global default size for the preference screens (hence the smaller size and the tabs).

4. I used Verdana, But it's from Photoshop so It might not look the same when it's live text.
BTW as you can see I gave the text a dark gray color instead of black, it makes it look more "embedded" in the overall look.

[CloudStalker]

I like the way this is turning out. I think the menu looks nicer without the white background, and how about a black and white cone with some sort of computer chip design or something
for the advanced tab.

Side question:
Will the Mac OS-X version have a different style from the Windows version (show all settings)?

[Tombigel]

I'll be glad to design an iCone (look! I invented a new buzz word!) for Advanced, but as you can see from the screenshots, there is no "Advanced" tab, there is the "Show all" button/radio, so there is no need for this kind of icon.

BTW
I just noticed that there is no "Reset" button, are you removing it, or it will be available only on "All" options ?

[Jean-Baptiste Kempf]

Well, I forgot about the reset button, that is it

And no, there will be NO advanced tab in easy preferences. So the iCone could go on the switch to advanced button.

[CloudStalker]

Can the reset button be used for each individual tab instead of resetting changes made to all preferences (reset changes made to Video, reset changes made to Audio, ect), or is this the wrong place to be asking this question? Sorry if it is.

[Jean-Baptiste Kempf]

Well, no sorry, this is not possible.

[yoann]

Thanks Tombigel!
I already loved the pictures you designed for the website design contest (too bad they weren't chosen...), and these new icons are really awesome! I especially like the "screenshot" you made (even though everything might not be easy to implement).

Just a remark about the "subtitles" icon: I find the red symbols hard to read on the small version of the icon, and I wondered for a while what this black rectangle was. I don't know if there is a way to enhance this?

You rock!

[Jean-Baptiste Kempf]

Yoann ? You are not dead ?

[Jean-Baptiste Kempf]

These 2 are for "Subtitles", though I think that the 1st one will look much better as an icon for this forum:

Could you provide it in 150px high ?

[CloudStalker]

Aahhhh!!! Huge cone taking up my entire explorer!!! I like it, keep it.

[Jean-Baptiste Kempf]

A bit too big, but I was so fed up with the other one

[xtophe]

Hello,

I like these icons.

My only comment would be like Yoan that the red of the subtitles icons should be brighter.

on the tab vs. no tab matter:
my view on simplicity is that you don't have to click tree level on a tree or a tree then tabs to find your settings. As long as the page are not extra long and cluttered.
So in the context on the simple pref, i am for no tab. there is only 12 settings in the biggest one (audio).

(if you want to see a page too long look at ffmpeg in advanced prefs

[Tombigel]

The subtitles cone is tricky...

If someone didn't understand - the black rect with the symbols is like a teleprompter, or a LED message board...

It's like the 1001 version of it and I'm still having trouble with designing one that looks good in small sizes + express the meaning of "subtitles" without the user to have to wonder "WTF is that?"

any ideas?

BTW jb, sent you the forum icon.

[Jean-Baptiste Kempf]

Applied for the icon.
And I would say brighter red could fit. And I don't find it a problem, btw.

[Tombigel]

Thanks, I'll try to refine the subs icon tomorrow.