jQuery.com Site Redesign

Posted on by

We’ve just pushed out a brand new site redesign (for jQuery.com and all its sub-sites). This has been a long time coming and it feels great to get it out the door.

New Homepage

jQuery.com

Easily the most contentious part of the redesign – but absolutely the most eye-catching.

jQuery has long been driven by rock, even looking back to its original release which was heavily inspired by the always-excellent Devo. We shot for a catchy design that helped to bring JavaScript out of the cold doldrums that it frequently inhabits – giving it a serious jolt of fun.

New Site Layout

jQuery Docs

The entirety of the site has a new layout. With drastically improved multi-layer navigation and a standardized sidebar it should become much easier to navigate the individual portions of the site.

You should probably wear a hard hat while exploring the interior pages – font sizes, spacing, and colors are all in need of tweaking, which will be handled over the upcoming week (it’s fun working against Trac, WordPress, Drupal, and Mediawiki simultaneously).

New Logo

jQuery Logo

The original jQuery logo was a variation of the Devo hat – we’ve taken that concept, turned it on its ear, and made it something that we can call our own – while still being inspired by the original contours of the Devo Energy Dome.

Thanks

Site and Logo Design: Scott Jehl – he put a fantastic amount of work into this redesign, bringing it all the way from conception to final implementation.

Rockin’ Illustration: Varick Rosete from nGenWorks also of Happy Webbies fame.

Initial Logo Prototyping: Bradley Sepos.

Also want to thank Media Temple for our hosting. They’ve been helping us a lot this past week migrating our sites to some new servers – expect some speed improvements for the sub-domains very soon.

99 thoughts on “jQuery.com Site Redesign

  1. That’s an interesting design for a code library. :)

    But hey, jQuery has made working with Javascript tolerable for me. John Resig is a god. I hope the new site doesn’t have some of the UI issues the old one did (at least in IE)

  2. Ahah love the menu effect with double text to make a shadow :)

    One note, the jpg background is too much compressed, it renders bad.

    It has typical lines of jpg low compression of gradients. A 1px width jpg image shouldn’t be compressed.

  3. Not a big fan. Sorry guys.

    I’d suggest losing the rock-star quote and illustration (apologies to Varick – it’s a cool illo on its own). Also, the hover effects on those initial checkmarks are a bit erratic and don’t (to my thinking) pitch jQuery that well (sweep across all three from left to right and tell me that doesn’t hurt your eyes – even just a bit).

    Everything else is kinda nice. I particularly like the logo. Dig the library, of course.

  4. whoa… just looking for some quick documentation and wha? Home page is awesome — definitely an interesting/pleasant surprise branding wise (sh*t, that rhymed).

    I like how you’ve resisted using jquery effects etc at every turn… Keeps it “grown up” and still fun. Slick design.

  5. I love it! I haven’t browsed through every page variation yet, but what I’ve seen so far is really great. But please make the favicon’s background white instead of black — I think that will look better, as most address bars have a white background themselves.

    Oh, and shouldn’t “Who’s using jQuery” be a link to a page displaying them all? There must be thousands of sites using jQuery and with a separate page displaying them all, I’d say the more, the merrier.

  6. Pingback: David Esperalta

  7. nice design! i was finally won over to jQuery recently… for ages I preferred scriptaculous and made that clear on my blog too; but I’ve just redesigned my site too and replaced scriptaculous with jQuery and jQuery UI :-) it really IS a more powerful framework

  8. Congrats on getting the new site out the door.

    I’ve been a fan and user of jQuery for a long time. I love the library and use it extensively. I also love the new site-except for the illustration and hover effects on the check marks. It’s an awesome illustration, but it’s hard to take seriously.

    Also, the “Rock Star” text totally draws the eye away from your logo and steals the visual focus on the page-that is, until you hover over the check marks. It’s a nice effect, but it feels too big and awkward, too wide. I can put the mouse over the right of an item and make the box pop up for the one next to it. That doesn’t seem like a good first impression to make when showing off the power of jQuery.

    I mean no disrespect. You guy have built the best JavaScript library on the web and, aside from those two small caveats, the new site is lovely.

  9. Big fan of the library, but I was unpleasantly surprised to discover the new frontpage. I’d say this new alignment would be better suited and geared towards a crowd of script kiddies and effects junkies than professionals.

    I’ve been using jQuery for a year and a half now and I’ve come to respect the practices that come with engineering, and I’m sorry to say this visual alignment doesn’t match the one I’d ascribe to. It’s hard to be taken as a serious tool when you’re gearing towards a visually-fixated crowd. I would have no problem with a demo site that would feature sort of a forge for effects and tutorials with all the dings and whistles, but leave the main site intentionally bland for all of us that frequent the site with very specific intentions.

    My 2 cents.

  10. Pingback: jQuery und der Rock’n’Roll - Code Candies

  11. The rock star thing looks stupid an unprofessional to me, but I plan on using jquery regardless of what your home page looks like. :)

  12. cdamian on said:

    Nice library, nice logo, horrible site.

    I first had to check if today is the 1st April.

    I think you might frighten away new users, current users probably just use docs.jquery.com and it is not quite so bad on those pages.

  13. Sebastian on said:

    IMO the new design is a little bit “childish” and wastes too much space, but that’s personal taste.

    Where’s the “packed” download? We don’t gz-compress our JS and therefore always downloaded the packed jquery, but now this isn’t accessible on the frontpage, only the minified version.

    And my impression is that the site is still as slow as usual (at least when accessed from Europe, don’t know where jquery.com hosting is located), which is a pain in the a** when browsing docs etc. Can’t you get a better hosting, maybe you could find some company which funds this?

    Sebastian

  14. That’s a cool redesign,
    but there’s something to check:
    - the blue menu wraps in Ubuntu/FF3
    - why use checkboxes instead of radios?

  15. Dear god!!!?

    Seriously, I like the sub page designs but the graphic on the home page of the cartoon character is useless/awful! It makes jQuery look very immature and kid’ish.

    I appreciate that you want to inject some ‘fun’ into a very geeky aspect of life (face it, programming is a very boring subject for a lot of people) but jesus guys find some other way of being funny and/or unique as that cartoon character is horrible and absolutely off-putting.

    Maybe I’ll pass this link around to some people and see what they think, but my initial reaction is: all good, except that cartoon character!

    Kind regards,
    M.

  16. Johan Sahlén on said:

    I like the new site design, and the logo is ok I guess, but the illustration and rock motif on the home page feels really unprofessional. If I came to the site without having used jQuery before I think I would write it off as, like Klemen Slavič said, “script kiddies and effect junkies”.

  17. Overall, the refresh to the site design is welcome, however I do have some feedback that I would like to share regarding the logo and the home page image.

    Logo:

    The original logo graphic had a connection to the Devo reference – which, for better or worse, had personality. However, the new abstraction away from the original motif has left the current graphic in the ranks of the generic ‘swoosh’ category.

    I’m also not a fan of the typeface – Blade Runner meets Star Trek. It’s typical of work that aims to be futuristic and cutting edge, to the point where it ends up firmly in the 80′s Sci-Fi school of design. Unless of course, that was the objective from the outset :)

    Splash header:

    The illustration is well executed and the notion a playful one, but as a graphic designer and client side developer, I’m less interested in being a Rockstar and more interested in being a professional craftsman.

    Obviously, I use jQuery for jQuery and not the ‘site design’, but communication design always has an impact, and the sentiment of this graphic is that (for me at least) – as a reflection of jQuery’s potential future direction – it points in a different direction than I intend to head as a developer.

    I guess I could dilute the above statements down to a couple of simple representations:

    Design: Less David Carson, more Paul Rand please
    Development: Less Joshua Davis, more Douglas Crockford please

    (Disclaimer – I respect and enjoy the work of each of the above designers and developers and it’s not a measure of one being ‘better’ than the other – only a representation of where I’d prefer, or previously imagined, jQuery to be orientated)

  18. I’m inclined to agree with Johan and Klemen.

    Not to minimize all the hard work that went into the site — certainly it is deserving of praise — but it just doesn’t seem to match jQuery anymore. The old design was professional and colorful; this one is far too gloomy.

    Every change, for better or worse, has its detractors, so I apologize for being one of “those guys.” I’m sure I’ll get used to it in time.

  19. The old design was far better; this one looks so unprofessional. It’s going to be so much more work trying to pitch this to colleagues now. A massive step down from the old site.

  20. Very nice, good to see you have your own image and I think it fits jQuery well. jQuery can be used to make sites more fun and interesting to use for Joe Public who have no interest in how the site works.

  21. The new logo is nice but I don’t like the rock star graphic and the new design is quite messy. The previous site was a lot more cleaner.

  22. Michael Dingler on said:

    Oh no, it’s the post-punk, alt-rock mano cornuto. Now you made Dio angry…

  23. redsquare on said:

    Congrats John et al. Like the design and fun feel.

    Unprofessional? Come on it’s a js library not some snotty consulting company…..

  24. Here are my thoughts: Keep the illustration. In fact, add more. And put them in rotation. Show people that you can be everything you want to be with jQuery. (A ninja illustration should be next on the list. (or a samurai since book publishers seem to like that better!))

    I like that the site is now aligned with the UI site. I agree that the devo hat now is a little swooshy but I think the nod to its past is good. The jQuery wordmark is the most important part and I think it stands on its own and wouldn’t change it. It has enough personality.

    However, I’d be remiss if I didn’t complain about *something*, but for me, it’s actually the width of this main column. I find it too small, especially in the documentation. Bumping it out another 50-100 pixels would make a world of difference.

    Also, it’d be cool if the logo and top navigation lined up perfectly with the UI site (which, incidentally, is slightly wider!).

    All in all, I’m cool with the new look. Some people just don’t like change. jQuery is a framework put together and managed by a bunch of nomads. It’s people who’ve come together from around the world to maintain a great library all for the fun of it. I think the site is a reflection of that.

  25. I love the new look. I think it’s great that you’ve taken a dry subject that normally inhabits ‘functional’ looking site designs and given it some artistic design flair. Which after all is exactly what jQuery is about – ditching the technical mumbo-jumbo and allowing easy creativity. Spot on concept, great execution.

    Sadly, the same attention to detail from the homepage clearly hasn’t made it to the sub pages, which look at best half finished. Come on guys, in for a penny in for a pound right? So why are the content pages just boring black headings in a boring default font? Why is all of the content just a series of boring lists? The interior pages look like they got about ten minutes of thought into all of them combined, when the homepage clearly got days of love applied to it.

    Regardless, this is a great re-design, congratulations :)

  26. Leo Ruggeri on said:

    The new design is really beautiful and clear. The only thing i don’t like is the “hip hop” style rockstar illustration.

    Thanks for the great work

  27. Most of the redesign I can appreciate, but I agree with the sentiments that at first site it feels script kiddie-ish. Within companies this is already an important process of the “pitch” for using jQuery.
    The rock image causes me to have to scroll to even read more about jQuery, which cannot be the aim, now can it?

    Also why such a narrow use of the available monitor space? The image stretches side to side on my browser window, but for the content of the site someone was happy using only 50%? This causes me to scroll much more through the site’s content, highly distracting!

    The website now is making me do more, not less.

  28. It looks good, but it doesn’t fit the website in my opinion. Also, the contrast between foreground and background on the text-pages distracts from the content.

    I would’ve gone for a more serious look.

  29. YES. Jonathan Snook’s rotation suggestion rocks almost as much as the dude in the drawing. That would be a reasonable compromise. I can deal with the color scheme. >_>

    I just… don’t think that illustration should become jQuery’s mascot, you know?

  30. Alistair Davidson on said:

    I actually like the new design – with one (usability) caveat:

    The Production / Development checkboxes are mutually exclusive, so they should be radio buttons, not checkboxes. Using checkboxes for exclusive options is a big no-no! Worse, people who don’t know any better may get the impression that this is an acceptable practise, by seeing it on such a well-respected site.

  31. Matt Nowack on said:

    I like the redesign in general but I agree with the others that the Rock Star image is fairly childish. If it is to be kept, maybe moving it below the content and giving it a better reason to exist, other than just being nifty looking, would mitigate its childishness. Maybe you could use it to link to profiles of people using jQuery in neat applications like Digg or Google.

  32. Great Job John and TEAM jQuery is moving forward furiously- each step it is more amszing. I’m very glad that I picked a winner when I decided that jQuery was the library to use. Long live jQuery!