Making the Wine icons beautiful

It started with a bug report.  The problem was the icon. Here is Wine’s current icon:

The Wine icon is old.  It’s ugly.  It looks like it was made for Windows 95 (it was).  All this is enough reason to change it to something, but what does a good icon actually look like?  The Tango project has an answer to this question.

A good icon is intuitive

They’ve defined a set of standards for icons.  Usability is improved when these standards are followed – a user can easily pick out the icon and, if a good metaphor is possible, have a reasonable guess as to what it means.  The two playing cards next to eachother hint as to what Applications->Games has inside of it, even before you read the text.

When a good metaphor isn’t possible, your best bet is to have an easy to recognize logo.  Since a “program for running Windows applications” doesn’t lend itself to any obvious metaphor, a logo suggesting the name Wine is our best bet.1

A good icon is easy to recognize

Enter the Wine glass.  To an English speaker, it’s very easy to create a mental connection between “wine glass” and “Wine program”.  If you don’t know what “Wine” is, at the very least you can recognize the wine glass as something rather unlike any other icon on the system.

We also benefit from using the same Wine icon everywhere the user interacts with Wine itself.  Applications->Wine should have the main Wine logo.  Browse C:\ Drive should have a folder icon with a Wine logo on it, since it’s both a folder and has a lot to do with Wine.

A good icon is consistent with the rest of the system

The Tango project gives simple standards for visibility and usability, however they also give helpful standards for design.  Icons are generally three dimensional and, importantly, from the same perspective with the same lighting.  It looks very off when you jam a 2D, backwards tilted, viewed and lit from the bottom wine glass onto a menu full of 3D, front-viewed, lit from the top objects.

Selecting the Wine glass

The bug report was helpful enough to include a link to a Tango-compliant Wine icon that someone had made over 3 years ago.  It looked like this:

I appreciated it, since it certainly was consistent with the other system icons, however something was off.  It looked like a wine glass, but a strange one.  Not being a drinker, my closest encounters with real life wine glasses all involved sparkling cider or rubbing my finger around the rim to make a humming sound.  I turned to Wikipedia.

As it turns out, some real life wine drinkers really care about what kind of glass they use.  I learned that for all these years we’ve been committing the horrible sin of using a white wine glass for red wine.  That’s why the tango icon looked different – red wine glasses are supposed to be fatter.  But they vary on this too: as I learned from the internet, burgundy-style glasses are a bit fatter, and bordeaux-style glasses are a bit thinner.

I also discovered a whole lot of websites use the same public domain wine glass clipart images:

My uncultured user expectation

So, that’s why the tango icon looked off.  It was violating my intuition of what a wine glass should look like – I hadn’t seen many fat glasses, and was expecting a thin wine glass.  The author of the icon was probably expecting wine to be in a burgundy glass.  Maybe he’s Burgundian.

Being an uncultured American prone to these kinds of things, I decided the typical user was more like me.  I figured the best compromise was an actual red wine glass, but not one as fat as the icon provided.  I sent off emails to the wine devel list and posted on web forums discussing the situation, hoping someone might appear out of nowhere to make the perfect icon for me.

YOSPOS, Bitch!

The most helpful answer came from the Something Awful “Your OS is a POS” forum.  It’s a forum designed for nonsense so users of the “Serious Hardware/Software Crap” forum can blow off some steam.  In practice it’s a much more casual place to talk about nerd stuff where you don’t have to be burdened by making an effortpost.2

Apparently, the work I was looking for was already done, and even put into an Ubuntu package.  Specifically, the ubuntustudio-icon-themes package, which has an icon for Wine that looks like this:

It was everything I wanted.  They even had sub icons made for the Wine-related programs like notepad.  After a quick consensus from the Wine-devel mailing list, I’ll be bundling the icons into the next beta package.  Most users won’t see the new look until the upcoming Wine 1.2 release makes its way into Ubuntu 9.10.  There’s a nice coincidence there, because a slick new look tends to increase users expectations about an application, and Wine has vastly improved since 1.0.

1: A Windows logo might seem like a good icon to use here, however that could create confusion as to what Wine is actually doing.  It’s very easy to think Wine might be opening some sort of virtual machine if you’ve never used it before.

2: Actually, I find myself reading/posting almost exclusively in YOSPOS now instead of the serious forum.  It’s just more enjoyable somehow.  The catchphrase “YOSPOS, bitch!” is, of course, repeated widely in users signatures.

24 Comments

PloumApril 22nd, 2009 at 2:08 am

No offense intended but your post illustrates well the cultural difference between American and European people.

I don’t drink alcohool, I don’t like wine but, for us, european, the fact that each drink come with its own glass is normal. We have thousand of beers in Belgium : each one has its own glass (you can sometimes admit to use another glass if it’s of the same kind). Drinking red wine in a glass as pictured on the original icon would a terrific idea for nearly anybody in our countries. For French people, it would nearly be a crime against humanity. I’m joking but not too much : it would be really really shocking to see such a thing. Everybody around in the restaurant will look at you.

Also, the fact that you find the glass strange is really interesting as I don’t know any family that doesn’t have that kind of glasses.

To me (that don’t drink wine at all), your post is like : “OMG, I’ve been to wikipedia and see that cars have wheels. So strange !”

I’m not judging (because, hey, caring so much about glasses is not specially intelligent), I’m just saying that your post is a really good illustration of our cultural differences :-)

Eitan IsaacsonApril 22nd, 2009 at 4:19 am

As a pessimist, I see the glass as half empty, or maybe even three quarters empty. This is my cultured reaction ;)

Fabian RodriguezApril 22nd, 2009 at 4:46 am

I only see all the support issues “.. you will find a glass icon that used to be thinner because white wine…”…

;)

Just kidding of course, great post.

TGMApril 22nd, 2009 at 6:09 am

Think you should use a bunch of grapes :D

Brian LucasApril 22nd, 2009 at 7:07 am

Sorry for a negative post but I’m not too sure i like the new icon much either. It still looks like something I would have used in windows 95. I wish I was an artist so i could help out but I see a stylized update of the current icon as a better solution.. widen the glass if you like but put it on a 45 degree angle like the original. Do it vector style with thick border lines and the vector style duo tone shading in the red color of the wine.

Paul KishimotoApril 22nd, 2009 at 8:45 am

Ploum is right: there is actually an ISO standard on wine tasting glasses: http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=9002. Normally I buy four or more glasses for that price!

I sort of agree with Brian Lucas—the style of the Tango icon makes it much clearer than the one you’ve settled on. I also (maybe because I *am* a wine drinker who prefers reds, and also enjoys a good cognac) don’t have any problem with the wider Burgundy glass. I hope you will reconsider!

YokoZarApril 22nd, 2009 at 9:53 am

To be fair the latter icon is shown in a bad way – it’s in it small size but hasn’t yet been “tangoified” to have the clearer 1-pixel border on each side. This is also the reason neither are tilted at an angle – Tango icons are to be viewed from the front or from the front and above.

FidoApril 22nd, 2009 at 10:04 am

Take the right photorealistic wineglass, reflect a window in it and tilt it a bit. That would be a nice icon.

Dread KnightApril 22nd, 2009 at 10:05 am

I like the icon with ‘fatter’ glass way better. Because it’s more visible and stylish, while the other one has the wine rendered oddly and the glass is barely visible. Just go for the fatter glass icon and cut the crap please; you have serious issues man :D

(I’m a designer, usability expert and open source fanatic if that counts for something)

YokoZarApril 22nd, 2009 at 10:13 am

Dread Knight I find myself agreeing with you about some things – the thickness of the stem is easier to see in the original icon, for instance.

I guess I’m not happy yet. Anyone want to make an icon?

Hans RödtangApril 24th, 2009 at 6:08 pm

The style and colors of the thin glass are much better than in the fat one. The thin one also matches the original style (form factor of the glass).

The stem is maybe too small, but it is overall the best icon.

Hans RödtangApril 24th, 2009 at 6:11 pm

The tilt of the icons will also not be necessary and will break with the style other Tango icons have.

DavidApril 24th, 2009 at 11:36 pm

For what it’s worth, here’s the Oxygen wine icon.

http://websvn.kde.org/*checkout*/trunk/kdesupport/oxygen-icons/128×128/apps/wine.png?revision=940055

NananoiApril 25th, 2009 at 12:22 pm

I have no art credentials to back up this opinion, but the new icons strike me as poor. Even if they’re tango-compliant, there’s something very anemic about them. Perhaps I would like them better if the lines were thicker, if the wine stem were shorter, and if the proportions were more expressive and less realistic. The old icon was primitive but expressive; this one is a very “bland” look.

In my opinion, the best choice would be a scaled SVG of the wineglass currently on WineHQ. That one is awesome.

phiphiJune 15th, 2009 at 12:39 am

In the meantime, there’s a new one (that one in your avatar). So how did the story continue?

What I actually wanted to say, is, that in your blog’s icon there is still the win95 version. (upper right of this site)

YokoZarJune 22nd, 2009 at 9:30 am

phiphi: yes, I need to update the blog icon too, I’ve been very busy in the past few days so I’ll try to do it by tonight when I make a new post.

Regardless, the story continued with further refinement of the icon to what you see in the current Wine package. I’m still working on little bits of it, but the scalable version should be stable now.

VV MODEMarch 31st, 2010 at 3:12 pm

Thanks.
VV MODE
(Covering The Losses)

Breakfast Nook %0ADecember 3rd, 2010 at 9:36 am

most wine glasses have very thin structure and i bet that they break easily not unless they are made of quartz glass :;:

joey27January 15th, 2011 at 9:04 pm

The Wine icon is old.  It

Jon SchuringSeptember 22nd, 2011 at 3:51 am

Wonderful weblog! Do you’ve got any suggestions for aspiring writers? I’m hoping to start my own blog soon but I’m slightly lost on everything. Would you suggest starting with a free of charge platform like WordPress or go for a paid option? There are so numerous choices out there that I’m completely overwhelmed .. Any concepts? Appreciate it!

Commission Commando bonusSeptember 25th, 2011 at 11:10 pm

I do like the manner in which you have framed this specific concern plus it does supply us some fodder for consideration. Nonetheless, from what I have witnessed, I just wish as other feed-back pack on that people remain on issue and don’t embark upon a soap box involving some other news of the day. Yet, thank you for this outstanding piece and whilst I do not really concur with this in totality, I respect the point of view.

Tabitha MckeonOctober 5th, 2011 at 8:14 pm

I was examining some of your posts on this website and I believe this site is real instructive! Continue posting .

Elana NauerOctober 11th, 2011 at 11:15 am

Nice post. I study one thing more challenging on different blogs everyday. It is going to at all times be stimulating to learn content material from other writers and observe a little bit one thing from their store. I’d desire to make use of some with the content material on my weblog whether or not you don’t mind. Natually I’ll provide you with a link on your internet blog. Thanks for sharing.

Londa LozinskiFebruary 28th, 2012 at 8:42 am

Thank you so much for spending some time on this

Leave a comment

Your comment