Designing for the User: 5 Websites with JQuery and/or Javascript implemented


Task 1 :

As apart of our assignment and actually the building of our final website they has to be some documentation with the website that is highlighted on the blog. Task 1 is clearly stated that you have to write a review at least 5 JQuery and/or Javascript websites and write a couple of sentences about it.

So here is a write up in the first 5 websites i found implementing certain features like Picture Slider etc.

1. Florida Flourish


Features: Mouseovers with transparency, slideshow, Navigation Rollovers
Description: The brilliant colors and detail of the illustrated tree on this splash page are immediate attention-grabbers. Click on any of the categories branching from the tree and you’ll get not only descriptive jQuery-driven content but a completely different tree, too.

2. Orange Label


Features: Image pre-loading.

Description: Image pre-loading is the extent of Orange Label’s use of jQuery. As you scroll down, portfolio items are added to the page (with a rotating graphic telling you that they’re pre-loading). The illustration at the top is big, colorful, highly detailed and delicious eye candy.

This is something we also used in CATS when we are talking about people and their online avatars and creating little worlds for themselves online.

3. Tomas Pojeta


Features: Sky, ocean, underwater.

Description: Pojeta adopts a motif (a motif is where as you scroll down the page something happen. For example gets lighter or some sort of events) that goes from high altitude to below the surface. The top of the website is in outer space, with its highly detailed rocket and monkey. Scroll down and you’ll see aliens and balloons in the lower atmosphere. Further down is an Easter Island-looking piece of land in the middle of the water, which leads to an underwater view with a submarine. Each illustration fits, and the transitions are about as seamless as it gets.

4. James Anderson (England Cricketer)


Features: Flip chart images resulting into his figures. Lines in the center of the page represents hawk eye but then cross matches with his figures with balls instead.

Description: Seen as Jimmy Anderson is a cricketer and the old ways of recording the statistics for a game that’s what James has tried to represent on his Personal Page. Also as the website kicks in a bowler line in the middle of the page forms like in a real life hawk-eye and then balls along that line also generate his statistics from his cricketing career.

5. Tori’s Eye


Features: Origami birds flying horizontally.

Description: The creators of Tori’s Eye have built a website with any one of those features and you’d have something completely original. The website insists of blue origami birds to represent tweets instead of just have static pictures. For these creators, having all of these features wasn’t enough. They made the counter-intuitive decision to do all of the animation without Flash!


Final Idea (Site Map)


Following on from my final idea, i have produced a site map that is my final template on which my website navigation will be based on.


Index –  This will be the main page with all the links to other pages and basically introducting you into the website

History- This will display all the vital history of Liverpool Football Club

Timeline- Will display a timeline in javascript that will also show the history of Liverpool Football Club but show it in a more visual display, so the user will interact with the page more.

Gallery- Will show pictures via javascript of the History of Liverpool Football Club.

About Us- Details of website, admin and even maybe a contact form for feedback for the website

More to Follow……