The Quicksand Advantage
A few weeks ago, I was assigned to evaluate a jQuery plugin called Quicksand that allows you to shuffle data around in a unique way.
The plan was to add Quicksand to the team page of our website, which is a great place for this type of application.
Smooth Shuffle
The idea behind Quicksand is to create an easy transition between sets of data that overlap at some point. This seemed perfect for our team page because some of our employees work in more than one department, and it is very hard to visually represent that type of overlap in an easily understandable way.
I set up Quicksand on the team page so you can choose from six different categories, and the pictures for everyone in that category will shift over into a smaller group. The shifting effect is really where the beauty of the plugin is, with each picture sliding smoothly into place. Most of the work I put in to this project involved making sure all of the data groups were correct and making sure the site worked properly in all of the major Internet browsers.
Results
Everyone has been really pleased with how the team page turned out, and I think it makes sorting through our staff here much easier for visitors and clients. This plugin has helped reshape our website and avoid navigation problems as we hire new people and the Mudbug Media team continues to grow.
Good work! I’m visualizing a next step. What about some kind of Venn diagram where each circle represented a department, and tiny thumbnails of people were automatically put into the overlapping part of the circles as needed. Is it possible to do something like that with any number of overlaps? The nice thing would be that you could see that one poor overworked person who is in three departments at once.
Append: Maybe not circles, but overlapping blobs that re-shaped to fit the thumbnails within. A new kind of org chart!
Only one guy in the Graphic design team
Vasu is a lucky bastard
I saw this on Reddit. I thought you’d like to know that switching from “Our Team” -> “Executive Team” and vice versa pegs up 50-70% CPU usage on a Core 2 Duo 2.8GHz with 4GBs of RAM using Win7 and Firefox 3.6.7. It’s very jerky as a result.
It runs great in Chrome, though.
This is a really awesome jQuery plugin. And yes, you made the reddit homepage
Congrats
Looks good, unfortunately doesn’t degrade well if someone has Javascript turned off.