?

Log in

No account? Create an account
ubuntu, wine

Redesigning WineHQ.org

About 3 years ago, I realized that the WineHQ website needed a serious redesign.  It was 2005, and the website looked like it was from the late nineties.  I posted a thread on the Something Awful forums, got some suggestions, and then began looking for volunteer website developers to help.

It wasn't that difficult a project.  Many aspiring web designers would be happy to have a relatively popular, and very public, website like Wine in their portfolios.  A couple users went as far as to make rough outlines and mockups.

I even talked to Jeremy White on the phone about it.  He warned me that the last change was "controversial" and that the current website was the result of a long deliberative process, and it'd be best to not step on any toes.  I posted a mail to the developer list, but I wasn't quite "in" with the rest of the developers and nothing ever happened.

Enter Wineconf 2008

This year, however, I was finally cool enough to attend the Wine developer conference.  I made a mental note to make sure we discussed a new website, especially since I could easily gather consensus that a redesign was needed by just smiling at the rest of the room.

Two at Codeweavers, Jeremy Newman and Jon Parshall, quietly went to work and churned out a much-improved prototype.  CEO Jeremy White then asked for feedback.

All in all, I think the website is much improved, however there are a few areas for improvement.

The Good:
  • Much friendlier, better looking, easier to focus on what I want. Looks professional.
  • The prominent donate link on the front page is very recognizable.  I guarantee you'll have more donations as a result.
  • All the old cruft links are gone.
  • The new small icon reflects the main image on the site, and also no longer has the tiny artifacts that the old one did.  Impressive.
The improvable:
  • The news should be clickable, and take you to a separate news page with slightly longer stories.
  • Rather than getting smaller when you hover the mouse over the buttons, it should be the other way around - highlight them and they get bigger
  • The slogan "Windows software everywhere" doesn't make much sense.  I would replace it with a very small boilerplate text that says what Wine does, namely "Wine lets you run Windows applications in Linux and on the Mac".  This summarizes everything for someone visiting the site who has never heard of Wine before.
  • The "Help!" button could be a bit friendlier, eg "Get Help" or "Support".  At the least, drop the exclamation point.
  • The text under Donate is obvious, so we can benefit from a bit of explanation.  Something like "Help volunteer Wine developers improve Wine" -- this also helps sell the donate button
  • The text under "Download" could be more extensive too, eg "Get the latest Wine packaged for your distribution" -- I don't think we lose much by using a short sentence here since the text is already partially transparent and optional to read.
  • The download icon is weird.  A large down arrow would probably be better than a CD, especially since we don't offer anything CD-like.
  • Similarly, using the classic "wrench" icon for development would be a bit more obvious.  As it is now I'm not sure what it means except for the word development right next to it.
The Bad:
  • The inlaid scrollbar under the news tab.  However, I think the proper way to deal with this is to simply have shorter news stories rather than change the scroll bar.  The current sample news (Wine 1.1.7 released), for instance, could easily be just 2 sentences and a link to the larger story.  Longer stories could be reserved for a separate news page.
We're still looking for feedback, especially if you've got some web design experience under your belt.  I've likely missed something obvious as well - my initial review here was from a cursory review of the prototype.  Regardless, it is exciting to finally see a good idea actually start to happen.

Comments

(Anonymous)

New WineHQ Site

I thin then new one is much better, however I agree the slogan has to change, but also the tabs at the top, all the tab needs to be click-able, not just the text.

I also think however, that the screenshots on the frontpage, of various Windows programs working in Wine was a good thing,; this should be carried over to the new site, however, maybe have a slideshow (http://www.malsup.com/jquery/cycle/) of them playing would be more appropriate?

Re: New WineHQ Site

Good catch with the clickability.

Screen shots can be nice, however I'm a bit worried about where they will go. Wine screen shots should, fundamentally, be a bit unremarkable unless we include the desktop as well as the application. Such a screen shot would be rather large, by necessity, and may not fit well in the small pane of a front page.

(Anonymous)

That new prototype is amazing and very professional.

I hope to see it soon on the winehq website!
Hello Scott,
Exciting news, and great draft indeed!

I have two comments:

1. While the current site displays way too much information and confuse newbies, I think this proposal is too extreme on the simplification side.

I will detail this by taking as example www.firefox.com . I don't say that the firefox site is the holy truth, but I think it's a good example of adequately using the most prominent space on most users screen in order to give them a hint of what this is all about.

Basically, the five "bullets" of the WINE site are in the firefox case presented as tabs. The firefox site uses the central space to show product highlights "New features, Security, Productivity, ...". On the contrary, the WINE site only uses this as a space for a collection links.

The total newbie should learn through some wisely chosen examples and screenshots why he'll love WINE. Here, this goal is still one or more click(s) away.
In this central space could live commented screenshots of WoW in a neat window near the typical linux panel, Word editing a document while listening music in Amarok, ...

All this could be included in an ajax-style under the "Information" bullet.

2. I don't think the donate button is at its place. For me, this should belong to its own element in the right bar. For this I will take as reference http://www.ardour.org/ .
While the donate element may here have a bit too much emphasis to your taste, it lives separately from the rest and is clearly differentiated from the rest. Donate is an act from the user to the community and should be separated from the "resources" (Info, Download, Help, Dev) from the community to the user.

Let me know what you think.
Part of me wonders a bit about our target audience. Repeat visitors to the site will generally use the tabs, to get to places like AppDB and the Wiki. New visitors will be drawn to the big area on the left, where they learn a few things they'll remember: namely that Wine works, you can get help, you can help contribute, and you can donate.

Wine should be different from FireFox in an important way - we shouldn't have to actually sell Wine, as much as tell the user it exists. Visitors to the FireFox website have a good chance of being Internet Explorer users that have to do something, namely download FireFox and start using it instead.

Visitors to the Wine website shouldn't face such a burden: Wine should make itself very easy to install as part of the OS. This isn't currently the case, but at least on Ubuntu I plan to make installing Wine as simple as clicking an exe and saying "yes I do want to install Wine" -- once that's done all the Wine website needs to tell people is that if they switch to Linux Wine will be able to take care of them.

(Anonymous)

Install by mimetype

Doesn't PackageKit already come with a tool to automatically install applications to handle unassociated mimetypes?

Re: Install by mimetype

The trouble is that .exe's are for some reason associated with file-roller. Try double-clicking an exe on a system without Wine installed -- it's really awful.

Re: Install by mimetype

Speaking of filetype association: Why does Wine get associated (as choice, not default) to so many different files? It doesn't need to get associated with anything other than executables and scripts.

BTW: I was the one commenting about PackageKit, I just assumed LiveJournal would somehow save my identity for a while.

Re: Install by mimetype

Which improper file types is Wine associating with? Those are bugs (either in Wine .desktop or in shared-mime-info). There's also a bug in KDE that doesn't parse shared-mime-info properly (.msi is a sub-class of a type, but KDE treats all of that type as .msi). You're right that Wine should be limited to exes, scripts, and msi files.

Re: Install by mimetype

Yeah, I forgot .msi

It feels pretty random what Wine gets associated to, it can be everything from ODT-documents to ZIP-archives.

Re: Install by mimetype

The zip archives thing was a bug from a while back that got fixed.

ODT documents likely comes from KDE's weird bug (.msi is technically XML I think, like ODT).

Problems with contrast

Personally I think the contrast in the mock-up is all wrong and that gives a kind off bad "Web 2.0" look.

The front page could also give of a little more info, maybe a screenshot or something if you sacrifice some of the empty white space.

(Anonymous)

Re: Problems with contrast

>> Personally I think the contrast in the mock-up is all wrong and that gives a kind off bad "Web 2.0" look.

+1

No screenshot though :-)
It's kind of dark. I think a brighter version would be more friendly.

(Anonymous)

Good, but could be improved

I also don't like the inlaid scrollbar with the news. Why not have the buttons there, and the news instead on the left? I prefer scrolling the whole page, rather than inlaid-frames.

OMFG!

That mock-up is awesome! <3
I do like the design, and I do think the current one is too 90s, but the new design has a couple of serious problems (in addition to those you've mentioned).

Firstly, it wastes a prodigioius amount of vertical screen space on all but the tiniest wide-screen monitors; space that is currently well-used on winehq.

Secondly, whilst the overall visual style is incredibly nice, the icons are completely incongruous (and, as mentioned, have confusing motifs).

Lastly, I think screenshots *are* essential, and there is plenty of space for them in the main column, either right-floated or below the actions if the box were expanded.

(Anonymous)

Resume Writing Service

This was some of the best information that I got from your blog.


Resume Writing Service (http://www.resume-service.biz//)
ubuntu, wine

April 2009

S M T W T F S
   1234
567891011
12131415161718
19202122232425
2627282930  
Powered by LiveJournal.com