Way back when I started the design of my website, I had a few ideas that I wanted to explore. One of those ideas was that I wanted the website to be surprising – taking back users with something they weren’t expecting, but did not compromise usability.
Through the use of jQuery, this was very possible, and due to the high available of free plugins and examples available, really quite easy. The authors of these plugins and examples spend a long time developing them for our use, often without credit – but without them, we designers wouldn’t be building the websites we are today. Below, I have listed all of the scripts and examples that have been used in the website, hopefully you will get something out of them too.
jQuery Infinite carousel
http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/
This script powers both the sliding ‘featured’ items on the homepage and the portfolio previews within the portfolio item pages. There are numerous sliding graphic jQuery scripts available, and I did experiment with several of them – but this one worked the best for my case. This script has been customised slightly on my website.
jQuery hover fade
http://greg-j.com/static-content/hover-fade-redux.html
This example was used for all of the animated hovers throughout the website. The basis for this was also used to slide up the portfolio previews on the home and portfolio page.
jQuery anchors
http://www.position-absolute.com/articles/better-html-anchor-a-jquery-script-to-slide-the-scrollbar/
Although quite simple, this script provides the automatic smooth scrolling from the ‘Back to top’ anchor link in the footer.
jQuery Tools – Tooltips
http://flowplayer.org/tools/demos/index.html
This is a very useful library of jQuery tools I use regularly. In the case of my website, I used the tooltips plugin to aid in the understanding of my process on my about page.
Easyslider
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Another plugin I use quite regularly, this script powers the form choice sliding on the contact page – although it has been customised slightly.
jQuery validate
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
This plugin provides the validation for required fields in my forms – very simple to install, and very powerful.
jQuery filter
http://www.newmediacampaigns.com/page/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip
This plugin provides the filtering functionality on my portfolio page, filtered based on the class of the images.
Reject ie6
http://www.sandaru1.com/2009/10/17/reject-ie6/
Although most users won’t see this – this script lets users running ie6 know that the browser they are running is out of date, and provides a number of options to upgrade. I made the decision not to support ie6 with this website (for personal and professional reasons) and this tool provides a valuable solution for those still using the obsolete browser.
That lists them all (I think) – I encourage you to try some of them out, hopefully they will be as useful to you as they were to me.
I absolutely love what you have done in terms of design and UX with the subtle uses of jQuery. You definitely had me saying wow!
Thanks Erik, much appreciated
I really like your site, and the use of jQuery. When I have the time I hope to do something similar. I too am very strict on accessibility and usability so it’s nice to see it can be done well. Your design is simple and effective and has a few elements that have inspired me for future web projects.
How hard did you find it to incorporate wordpress into your site ?
I absolutely like your designs, and your style!
I am actually re-designing my website and through yours I acquired ideas and had inspiration.
Good luck
Thanks for sharing these scripts with us! I love you site its going in a post I’ll be doing shortly on my blog! Awesome!
Great roundup, I like reading round-ups from designer/developers actively using JQuery plugins in their designs. A personal favourite of mine is JQuery Tools that you mentioned.
Another carousel plugin that I enjoyed was ImageFlow, which is basically the iPod Coverflow for JQuery. You should check it out!
I like the modifications, will be looking at implementing the IE6 reject script as well, it is only a fraction of my visitors that are still using IE6 anyway, might as well educate them somehow.
Dito to Erik’s comments… Nice Flash-esque jQuery. How do u plan and explorer…….? When is a sketch a build model? Your dev-work inspires me to brainstorm more critically. Good call on the ie6 alert. Will compliment CSS classes for Browser/Version/OS via JavaScript – http://www.brianschmitz.info/js/select.js
You picked the best out…
Respect for your work.
I just can’t use the IE6 Reject even if I would…
My boss would kill me
Your site is definitely a source of inspiration.
Thank you for sharing such valuable information in a very practical way!
A brilliant website Jay, inspiring – you have the rest of us playing catch up big time!!
Truely inspiring site, going to take a few ideas from here and incorporate them into my own. Also very thankful for you page with the shout-outs to those Jquery plug-ins you used, again another great idea to have on your site since there are so many plug-ins to chose from!