Previous Post Next Post

jQuery UI Theme Options

June 2nd, 2008

A week or so ago I offered to help with the jQuery project. I’m such a big fan that I felt compelled to give back. While I consider myself decent at JavaScript I’m not even remotely close to being good enough to contribute code to the project. However, I knew that jQuery was going through a site / branding redesign and I wanted to know if I could help with that.

Unfortunately the lead designer heading up that project never got back to me, but the jQuery UI team did catch my offer for help and let me know that I could contribute in the way of a jQuery UI theme! Since then I’ve been spinning my wheels trying to come up with some decent, portable options. I’ll take a vote and see which one is the most popular, and then hand it off to another fellow (another guy anxious to help with the jQuery project) for some CSS magic.

So without further hullabaloo, here are the three mock ups I have so far. I’d love to hear everyone’s feedback!

jQuery UI Theme 1

(click image for larger version)

This theme takes the concept of the “floating tabs” from the current Flora theme. The color scheme is muted, the gradients are soft, and it has a nice polished feel to it.

jQuery UI Theme 2

(click image for larger version)

This theme is a based on the design of the jQuery UI home page. Black, orange and blue, with a nice container for the tabs. This is the most crisp of the three mock ups, but also the least portable.

jQuery UI Theme 3

(click image for larger version)

This theme is the brightest and perhaps the most portable. Someone in the jQuery UI group mentioned they liked the look of Meebo, so I used their interface as an inspiration point for this. I used a similar bright blue / orange combo, but I toned down the gradients, and ditched the rounded corners in favor of something a bit more crisp.

Oops, I forgot…

So I forgot to make the accordion style for each of these. However, I will wait until we green light a certain concept and just develop the accordion as well as all mouseovers for that particular theme.

Thanks!

Thanks to the jQuery UI team for this opportunity, and thanks to Seth for the CSS help. Again, I would love feedback on all accounts! Be sure and cast your vote as well!

design, development, javascript

Discuss this post

 

I like the first theme, but with the third theme’s colors. :D

Chris Brentano said this on June 2nd, 2008
 

And I like the second theme, but with the first theme’s color :D

In any case, great work!

Claudio said this on June 3rd, 2008
 

I agree with Chris. Also, while these are gorgeous, I wonder if you could make them a bit more consistent. For instance “First Tab, Tab 2, Tab 3″ vs. “Tab 1, Tab 2, Tab 2″ vs. “tab one, tab two, tab 3″. Same with the dialog titles. It’d be easier to make an apples to apples comparison.

Jonathan Gordon said this on June 3rd, 2008
 

From the accessibility point of view I can now only evaluate color contrast. Because you use gradient in the background, I picked the worst contrast ratio.

FIRST MODEL
Active and Inactive tab:
Test passes at AAA level as long as the font’s height is at least 18 points – if not, it passes at AA level
Dialog caption:
Test passes at AAA level as long as the font’s height is at least 18 points
If the font is smaller, test passes only at AA level.
Heading level 1
Test passes at AAA level
Heading level 2
Test passes only if font’s height is at least 18 points
Text
Test passes at AAA level
My suggestions:
Make sure that text which doesn’t pass all tests (particularly the dialog caption) is large enough or (which is better) is scalable. For heading level 2 I suggest making it a little bit darker (#336184 seems to be fine). Bear in mind that the red color will become greenish for protanopia affected people.

SECOND MODEL
Very interesting. Everything seems to be alright with one exception. Heading level 1 orange color fails in all tests. Finding a new color that will go well with the template and will be accessible at the same time may be difficult. People with protanopia and deuteranopia will see the orange color as a greenish one. People affected by tritanopia (quite rare) will see it rose.

THIRD MODEL
The least accessible template.
Active tab and dialog caption:
completely fails
Inactive tab:
passes at AAA level
Heading level 1:
passes only AA level if the font’s size is larger than 18 points (so OK)
Hading level 2:
completely fails
Text
passes at AAA level
I have the same notes on colors as above.

By the way, you do a great job!

Piotr Jankowski said this on June 3rd, 2008
 

The first theme is awesome!

Nicolas Hoizey said this on June 3rd, 2008
 

I voted for the first theme (natch the floating tabs though)

Jake said this on June 3rd, 2008
 

Thanks to everyone for the feedback, help, and kind words!

Piotr - thanks for running accessibility tests! That’s fantastic information to have.

Jonathan - yeah, sorry. That’s me being lazy I suppose ;) I’ll do better next time I promise!

Keep the feedback coming! Don’t worry about hurting my feelings, I’m a UI designer– I’m used to getting tons and tons of feedback and advice from anyone and everyone.

Buck said this on June 3rd, 2008
 

I absolutely like the first one.

imrabti said this on June 4th, 2008
 

I have to agree with Chris. The second reminds me too much of Windows, which gives me some serious wiggins.

James H said this on June 4th, 2008
 

Haha windows? Really? Bleh.

Buck said this on June 4th, 2008
 

I like the second best, but think that floating tabs in the first are great.

Gil said this on June 4th, 2008
 

I chose the first - buy far it has the best spacing and clarity. by far. This is horrid, second looks tacky.

First doesn’t just look better, but actaully really good.

Marcus said this on June 4th, 2008
 

Could you post the source files (whatever they are) so that I can get inspiration from them ? Although the shots are nice, the devil is in the details.

Loic Dachary said this on June 8th, 2008
 

Loic - sure thing. Let me clean up the layers and such and I’ll post them up here for all to enjoy.

Buck said this on June 9th, 2008
 

Great :-) I’m excited about this.

Loic Dachary said this on June 10th, 2008
 

Good Job!!!

Francamente espero que este proyecto pueda crecer, me imagino una página de galería de estilos de JQuery UI…. hmmm. (soñando)

I like the first and second

Coterfield said this on June 10th, 2008
 

Coterfield -
While not exactly full themes, you can “roll your own” at the new theme roller : http://themeroller.com

Loic -
Didn’t have a chance to clean things up yesterday… I’ll post the psds after work today.

Buck said this on June 10th, 2008
 

Does this mean that we could expect your beautiful themes integrated in themeRoller :-)) ?

Claudio said this on June 10th, 2008
 

Unfortunately the themeRoller only supports coloring, and the themes I have made rely on images as well.

I can probably fake it, though :)

Buck said this on June 10th, 2008
 

actually your themes are far cooler….do you mean it’s possible to have an application like themeRoller to customize the colors of your themes?? that’ll be killer…

Claudio said this on June 10th, 2008
 

Hi,

Here is an idea : why don’t you play the community card ? That is, publish the uncleaned source file and ask if someone can clean it for you ? I’m sure I’m not the only one eager to contribute.

Cheers

Loic Dachary said this on June 11th, 2008
 

Hey, did you change your mind and decided not to publish the source files after all ?

Loic Dachary said this on June 15th, 2008

Say something!




avatars come from gravatar